I think I see why I was confused. The contents of the specific form is submitted but the page reloads. This causes the the contents of both to disappear making me think that it submitted the contents of both. Thanks!(Also correct me if I'm wrong)
Answered question:
I made to forms on a page. But the submit buttons effect both forms.(by this I mean make both inputs go away) How can I make it only submit to a specific one? I tried doing these,
<Input type="button" value="submit" onClick="document.form.sumbit.formName">
<Input type="button" value="submit" onClick="document.sumbit.formName">
<Input type="button" value="submit" onClick="document.formName.submit">
But those didn't work. It would be a great help if anyone could tell me how to make it specify to a specific form!
<body>
<FORM name="personal">
Name:<Input type="text"><br>
E-mail:<Input type="text"><br>
<Input type="submit" value="submit">
</FORM>
<hr>
<FORM name="preferences">
Favourite food:<Input type="text"><br>
Favourite drink:<Input type="text"><br>
<Input type="submit" value="submit">
</FORM>
</body>
I think I see why I was confused. The contents of the specific form is submitted but the page reloads. This causes the the contents of both to disappear making me think that it submitted the contents of both. Thanks!(Also correct me if I'm wrong)
Answered question:
I made to forms on a page. But the submit buttons effect both forms.(by this I mean make both inputs go away) How can I make it only submit to a specific one? I tried doing these,
<Input type="button" value="submit" onClick="document.form.sumbit.formName">
<Input type="button" value="submit" onClick="document.sumbit.formName">
<Input type="button" value="submit" onClick="document.formName.submit">
But those didn't work. It would be a great help if anyone could tell me how to make it specify to a specific form!
<body>
<FORM name="personal">
Name:<Input type="text"><br>
E-mail:<Input type="text"><br>
<Input type="submit" value="submit">
</FORM>
<hr>
<FORM name="preferences">
Favourite food:<Input type="text"><br>
Favourite drink:<Input type="text"><br>
<Input type="submit" value="submit">
</FORM>
</body>
- 1 You can do this with JavaScript, by assigning id's – JVE999 Commented Jul 26, 2013 at 19:02
- 2 Each submit button will only submit the form it belongs to. So you don't even need JavaScript (unless what you're looking for is an ajax submit...) – bfavaretto Commented Jul 26, 2013 at 19:18
4 Answers
Reset to default 3Here's how you can do it with JavaScript:
<FORM name="personal" id="personal">
Name:<Input type="text"><br>
E-mail:<Input type="text"><br>
<Input type="submit" value="submit" onclick="submit_personal">
</FORM>
<hr>
<FORM name="preferences" id="preferences">
Favourite food:<Input type="text"><br>
Favourite drink:<Input type="text"><br>
<Input type="submit" value="submit" onclick="submit_preferences">
</FORM>
<script>
function submit_preferences(){
document.getElementById("Preferences").submit();
}
function submit_personal(){
document.getElementById("Personal").submit();
}
</script>
Actually, here's an edit. I tested your original code and it works fine. I think you might be wanting to open it in a new window or without closing the current window. To do that, either use AJAX, or you can just add target="_blank" to the original, like this:
<FORM name="personal" id="personal" target="_blank">
Name:<Input type="text"><br>
E-mail:<Input type="text"><br>
<Input type="submit" value="submit">
</FORM>
<hr>
<FORM name="preferences" id="preferences" target="_blank">
Favourite food:<Input type="text"><br>
Favourite drink:<Input type="text"><br>
<Input type="submit" value="submit">
</FORM>
document.forms['preferences'].submit()
I'm not sure that we're getting at what you're asking for, though. Posting either form will round-trip the whole page because, well, that's just how HTTP works. If you want to post one form asynchronously while the other one stays put, you'll need to use AJAX.
This should work for you,
<FORM name="personal">
Name:<Input type="text"><br>
E-mail:<Input type="text"><br>
<Input type="submit" name="form2" value="submit">
</FORM>
<hr>
<FORM name="preferences">
Favourite food:<Input type="text"><br>
Favourite drink:<Input type="text"><br>
<Input type="submit" name="form2" value="submit">
</FORM>
</body>
<button type="submit" form="form1" value="Submit">Submit</button>