[solved] Split up an HTML form?

XML, Perl, Python, and other languages can be discussed here, even if it isn't PHP (We might forgive you).

Moderator: General Moderators

Post Reply
User avatar
dallasx
Forum Contributor
Posts: 106
Joined: Thu Oct 20, 2005 4:55 pm
Location: California

[solved] Split up an HTML form?

Post 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>
Last edited by dallasx on Thu Nov 10, 2005 3:17 pm, edited 1 time in total.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

not that I know of.
User avatar
dallasx
Forum Contributor
Posts: 106
Joined: Thu Oct 20, 2005 4:55 pm
Location: California

Post by dallasx »

feyd wrote:not that I know of.
Never thought about doing it until now. I tried it and didn't work.
foobar
Forum Regular
Posts: 613
Joined: Wed Sep 28, 2005 10:08 am

Post 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
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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:
Post Reply