We help IT Professionals succeed at work.

Page breaks in a form text field?

mellijae
mellijae asked
on
Medium Priority
222 Views
Last Modified: 2012-05-12
I really need to get this done... And I've googled and googled it.

I have a text box in a form, with terms that somebody has to agree to before the submit button is made active.

But if you look at the terms and conditions-- there are no paragraph or line breaks.

https://www.onlinedivorcecoach.com/order/

If I put paragraph or line breaks in, the show up in the code.

The form is in Wordpress and I am working in the HTML window. (I just pasted this code from a javascript library site.)

Can anybody please tell me how to divide the content without showing actual <br> tags in the text area?

Thank you in advance!

Comment
Watch Question

Jason C. LevineDon't talk to me.
CERTIFIED EXPERT

Commented:
textarea tags are a little funny that way.  Try putting in whitespace breaks (no p or br tags, just plain old line breaks) instead :)

 Should look like this

Author

Commented:
I tried that Jason. Even though I am working in Wordpress plain HTML window editor-- it is putting in paragraph tags when I do that. Why wouldn't Wordpress edit in plain HTML if they are telling me it's plain HTML?

Pure evil. I say.
Jason C. LevineDon't talk to me.
CERTIFIED EXPERT
Commented:
Got it.  FWIW, you're still in the TinyMCE editor when you switch to the HTML view and it still makes those corrections.

Again, you could go into the wp-content table and add the whitespace there.  It would work (hardly elegant though).

The other way to do it is to install the TinyMCE Advanced plugin which adds a metric ass-ton of buttons to the editor.  One of those buttons will bring up a Code window which should allow for direct HTML manipulation with no error correction.  

Commented:
textarea probably isnt the best choice since the user can put their cursor in it and edit the text.

Try using a div and giving it a specific height and width with overflow: scroll;

div#disclaimer {

  height: 240px;
  width: 305px;
  overflow: scroll;
  overflow-y: scroll;
  overflow-x: hidden;
  border: 1px solid #666;
  background: #fff;

}

Without testing it, I think the only problem would be that overflow-y and overflow-x are css3 so they will be ignored in older browsers and the user will see a scroll bar on both the vertical and the horizontal.
Jason C. LevineDon't talk to me.
CERTIFIED EXPERT

Commented:
You can protect a textarea with readonly or disabled and anyone can now edit HTML in the browser thanks to firebug.  

However, the div with scrolls is probably a much better solution.

Commented:
We both know from answering questions here that not anyone can edit HTML in the browser with firebug =)

But good point on the readonly/disabled

With readonly the info will still be submitted with the form.

With disabled the info will not be submitted, the textarea cannot receive focus and it will be skipped when navigating the form by tabbing.
Jason C. LevineDon't talk to me.
CERTIFIED EXPERT

Commented:
Okay, fine.

...ALMOST anyone...

Literalist. :)

Author

Commented:
So confused! But this is what I think I'm doing:

Installing a plugin for the advanced TinyMCE, editing in raw html, and making the text area disabled.

Off to go do it right now!
Jason C. LevineDon't talk to me.
CERTIFIED EXPERT

Commented:
>> Installing a plugin for the advanced TinyMCE, editing in raw html, and making the text area disabled.

One possibility.  The other is to do all of that but change the textarea to a div with the CSS specified by gwkg.

Author

Commented:
I split the points... I didn't know what else to do. I wanted the CSS solution to be chosen, because Jason said that was the "best solution." However, I am not familiar enough with CSS, so I chose to use the raw HTML option.

I hope that's fair. I appreciate both of you!

Explore More ContentExplore courses, solutions, and other research materials related to this topic.