How can I submit a <textarea> which is outside my <form>?

Question

My website is separated into two parts - a large (CodeMirror) <textarea> and a drop-down menu which has a <form> (that contains "From", "To", "Subject" inputs) in it linked to a send.php file.

The text area and the form itself are located inside different <div> s so I'm not able to link it to the rest of the inputs I'm transferring to the send.php file.

How can I link / connect the submit button to the <textarea> input along with the other inputs it's associated with ("From", "To", "Subject") when transferring the data to the send.php file?

<div id="container">

   <div id="sidebar" class="twenty"> //the form div

      <li class="menu">
          <li class="dropdown">     
             <form method="post" action="send.php">      
                <input type=... />
                <input type=... />
                <input type=... />
                <input type="image" src=... alt="Submit Form" />                
             </form>
          </li>
      </li>

   </div>

   <div class="seventy"> //the textarea div

   <textarea id="code" name="code">
   </textarea>

   </div>

</div>

Answer 1

You can make form the outermost tag. It changes nothing to the flow of the document.

Answer 2

Technically, you could use the form attribute to associate a textarea with a form:

<form ... id="foobar">
...
</form>
...
<textarea form="foobar" ...>

This is an HTML5 feature supported by Chrome and Firefox, for example, but not IE 9.

So check out other options, primarily reorganizing the page as suggested by @niomaster or using JavaScript as suggested by @Fluffeh. However, it's not a good idea to rely on JavaScript being enabled, in matters of basic functionality. In reorganizing the page, care should be taken to avoid messing up any styling (or scripting) that might rely on the current markup. Also note that the current markup is invalid, since li elements are allowed only as children of ol or ul , so restructuring (if feasible) would be recommendable anyway.

At the simplest, it might suffice to move the <form ...> start tag to the very start of the body element and the </form> end tag right before the end of the body element. Then all form field elements on the page would be fields of this form.

Answer 3

You can't directly - if it's not in a form, it can't be submitted.

The best you can do is to write a custom javascript function that replaces your 'submit (image type)' action and copies the data from the textform into a hidden field within the form then submits the form as the last action. This will get the results you want without the user really knowing what you are doing behind the scenes.

Edit: As niomaster correctly points out, forms can span more than just a single <div> or <li> attribute. You can extend it easily without changing your code structure.

Answer 4

use jquery

//Get the text from text area

var textareadata = $("#code").val();

//dynamically append a hidden feild to your form

$('form').append('<input type="hidden" name="myfieldname" value="myvalue" id='myvalue'/>');

// dynamically write your text adtea data to the hidden field append to the form

$('#myvalue').val(textareadata);

Answer 5

amiregelz,

You can just add one id to form tag. using jquery get the value of the text area [$("#text-areaID").val();]and add hidden field using jquery/ javascript, pass the value to hidden field which you created dynamically then after validation of the form submit the form. You can get the value of the textarea as well in your php page.

Hope It will help you. Please mark it answer if it helps.