Page 1 of 1

[solved] Split up an HTML form?

Posted: Tue Nov 01, 2005 12:55 pm
by dallasx
Can an html form be split up all over a document just as long as the form names are consistant? Like this:
<form name="add_user">
<!-- textbox here -->
</form>

<form name="add_user">
<!-- another textbox here -->
</form>

<form name="add_user">
<!-- submit button here -->
</form>

Posted: Tue Nov 01, 2005 1:04 pm
by feyd
not that I know of.

Posted: Tue Nov 01, 2005 1:07 pm
by dallasx
feyd wrote:not that I know of.
Never thought about doing it until now. I tried it and didn't work.

Posted: Tue Nov 01, 2005 3:44 pm
by foobar
If you really want to do that, for the sake of source-code clarity, you can try the following:

Head:

Code: Select all

<script type="text/javascript">
function submit_all_forms () {

  var form, field; //Used for iteration
  var input; //Your temporary & 'virtual' input field
  var forms = document.forms; //All forms on your page
  var dynfrm = document.getElementById('dynform'); //Get the dynamic form from

  for (form in forms) { //Cycle thru all forms

    for (field in form.elements) { //Cycle thru all fields in each form

      /* Create a new field dynamically */
      input = document.createElement('input');
      
      /* Set name & value attributes */
      input.setAttribute('name', field.name);
      input.setAttribute('value', field.value);
      
      /* Insert the field into the dynamic form */
      dynfrm.appendChild(input);
    }
  }

}
</script>
Body:

Code: Select all

<!-- The following in crucial: -->
<form id="dynform" method="POST" action="some_script.php" style="display:none;"></form>

...some html...

<form ... name="frm1"></form>

...some more html...

<form ... name="frm2"></form>

...more html...

<form ... name="frm3"></form>

...more html...
And then somewhere on your page, you put this:

Code: Select all

<input type="button" value="Submit" onclick="submit_all_forms();" />
or

Code: Select all

<button onclick="submit_all_forms();">Submit</button>
It's really a matter of choice, unless you want to use images in your button, in which case you have to use <button></button>.

Cheers,

Tom

Posted: Tue Nov 01, 2005 6:11 pm
by Chris Corbyn
Hmmm.... what do you need to split the form up for? You could always just have the <form></form> tags spaced out over the document.

EDIT | Well I guess with fancy CSS and positioning, if you have multiple forms on a page they could get tangled up. Perhaps they can nest inside one another... I've never tried nesting forms :idea: