How to I add a multi-line textbox to a PHP form

This is a continuation to a question that I posted previously. I would now like to implement a multi-line textbox in a PHP form (with a scroll button). Currently I have a single-line textbox coded as follows:

<label>Please specify start date and week:
                                    <input name="oneWeekStartDate" id="" type="text" value="" />

and the validation for it is as follows:

if( !$("input[name='oneWeekStartDate']").val() ){
                        alert('Please specify a Start Date and Week for your program');
                        return false;

What is the code to implement a multi-line textbox and how would I validate the input?

Who is Participating?
Mark BullockQA Engineer IIICommented:
Sorry. My mistake.
I tested this. See if you like it.
 <textarea name="mytextArea" cols = "20" rows = "4" id="mytextArea" value="" style="overflow-y:scroll"/>

Open in new window

Mark BullockQA Engineer IIICommented:
<input name="myTextArea" type="textarea" value="" />
You can add attributes for
cols for the number of columns (width in characters). The default is 20.
rows for the number of rows (height in characters). The default is 2.

You can validate it the same  way as for a text input.
geeta_m9Author Commented:
Hi Mark,

I tried following your example, but the multiline textbox does not have any scrolling capability.


Mutliline textbox
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

geeta_m9Author Commented:
And this is how I entered the code:
<label>Please enter your information below</label>
     <input name="mytextArea" cols = "1" rows = "20" id="mytextArea" type="textarea" value="" />
geeta_m9Author Commented:
Hi Mark,

I tried implementing your code and the multi-line textbox now appears on the form. But I now facing new problems.

I am trying to implement a multiline textbox in the section titled, "Customized Programs" just below "Optional Activity 3" (see first screenshot). The code is as follows:

<h4>Questions or Comments</h4>
  <div class="form-section" id="comments">
     <textarea name="mytextArea" cols = "30" rows = "10" id="mytextArea" type="textarea" value="" />    

However, when I insert the code there, the radio button for the "Customized Programs" section does not work (refer to second screenshot). When I try to put it after the "Optional Activity 3" section and before the "Payment Info" section, I get something like this where the code for the "Payment Info" section and almost everything else after that appears in the textbox (refer to third screenshot). Do you know why this is happening and how I  can fix it? I am also attaching the code for the form.
geeta_m9Author Commented:
I figured out what the problem is. I had omitted the close textarea HTML tag, i.e., </textarea>
geeta_m9Author Commented:
I didn't need to use the scroll style feature after all, the scroll button would automatically show up once the input exceeded the number of rows.

 <textarea name="mytextArea" cols = "50" rows = "3" id="mytextArea" type="textarea" style="width:95%" value="" /> </textarea>
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.