Reputation: 92581
I am wondering if it is possible to split html forms?
Basically I have a normal form
<form action="/post.php" method="post" id="postform">
<label for="name">Name: </label>
<input id="name" name="name" value=""/>
</form>
Then I have a ajax image upload, which includes it's own form due to how it works.
Then after that I want to have the submit button for the first form.
I know I can have a javascript submit button, but that shut's out anyone without Javascript. So I am wondering if it is possible to split a form into multiple groups?
e.g. I know this won't work, but it demonstrates what I want to do..
<form action="/post.php" method="post" id="postform">
<label for="name">Name: </label>
<input id="name" name="name" value=""/>
</form>
<!-- form for ajax image upload here -->
<!-- continuation of first form -->
<form action="/post.php" method="post" id="postform">
<!-- this button should submit the top form -->
<input type="submit" value="Submit"/>
</form>
Upvotes: 18
Views: 24655
Reputation: 3
The form property doesn't work in all browsers.
I normaly make hidden inputs in the form with IDs. I update those hidden inputs with onblur in the inputs outside the form.
<form action="/post.php" method="post" id="postform">
<input type="hidden" id="phone" name="phone"/>
<label for="name">Name: </label>
<input id="name" name="name" value=""/>
</form>
<input type="phone" onblur="javascript:getElementById('phone').value=this.value"/>
Upvotes: 0
Reputation: 1466
In HTML5 its possible as pointed out at https://stackoverflow.com/a/8380229/556085:
Sample form:
<form id="formID" action="action" method="post">
Text: <input type="text" value="some_id" name="some_name" />
</form>
And you place the submit referencing the form to submit via its ID where you want
<input type="submit" name="save" value="Save" form="formID" />
Upvotes: 32
Reputation: 9417
You may have different forms which are separated via different form tags, with different ids, then you can fire the form submit event with javascript.
Without javascript on the client, I have no idea how to do it ...
Upvotes: 1