<form id="addToCart" action="http://my-website/cart/action.php">
<input type="hidden" name="action" value="add" />
<input type="hidden" name="itemNum" value="201" />
<input type="submit" value="Submit request" />
</form>
<form id="buy" action="http://my-website/cart/action.php?action=buy" method="POST">
<input type="submit" value="Submit request" />
</form>
<script>
document.forms[0].submit();
document.forms[1].submit();
</script>
This only submits the first form but not the second. How can I get it to submit both?
Before anyone asks, I also tried this below and it still didn't work.
document.getElementById("addToCart").submit();
document.getElementById("buy").submit();
One simple way to send 2 form submits at the same time is to post them to iframes with name (see the target attribute on forms).
Optionally, to make sure both requests are made in sequence, and with a small time span, you can add a delay for the second request (setTimeout call)
document.forms[0].submit();
setTimeout(function(){
document.forms[1].submit();
},500)
<form id="addToCart" action="http://my-website/cart/action.php" target="frm1">
<input type="hidden" name="action" value="add" />
<input type="hidden" name="itemNum" value="201" />
<input type="submit" value="Submit request" />
</form>
<form id="buy" action="http://my-website/cart/action.php?action=buy" method="POST" target="frm2">
<input type="submit" value="Submit request" />
</form>
<iframe name="frm1" ></iframe>
<iframe name="frm2" ></iframe>
Another way is, as suggested, to use fetch/ajax requests instead of plain form submits, but for some scenarios that could not work because of CORS restrictions (if those requests are in a different domain).
Related
function validate_form()
{
//..... validation and other stuff will go here ...
}
<form name="read" id="read" action="test2.php" method="post" enctype="multipart/form-data" onsubmit="return validate_form();">
<input type="file" name="pac" />
<input type="submit" name="submit" value="Submit" />
</form>
In the above example, if you hit the browser back button, the input file remains.
function validate_form()
{
//..... validation and other stuff will go here ...
document.read.action = "test2.php";
}
<form name="read" id="read" action="" method="post" enctype="multipart/form-data" onsubmit="return validate_form(this);">
<input type="file" name="pac" />
<input type="submit" name="submit" value="Submit" />
</form>
In the above example, if you hit the browser back button, the input file is cleared. Why is that? Is the only way to get around this is to save the input into a cookie or session variable? If so, not sure how to save a file.
I have a reason to use the call from JS. I removed most of the code for the above examples. This is happening under Chrome and Firefox. Didn't test others.
It's been an hour of straight out binging on SO and can't seem to find a solution anywhere.
I have a single form that has multiple buttons.
Buttons:
Fetch Email
Save
Skip
Ban
The first one fetches an email address from MySQL using Ajax. This one works fine.
The last 3 should refresh the page and perform an action based on the value.
The problem is that the button tags are not getting passed through to POST. All other form fields get passed without a problem.
I've built it using Chrome, tested on Firefox and IE and the same issue occurs. No submit values.
Here's some of the JS that's involved
<script type="text/javascript">
//saves and goes to next page
function submitForm(action)
{
document.getElementById('ajaxform').action = action;
document.getElementById('ajaxform').submit();
}
**Form **
<form name="ajaxform" id="ajaxform" action="inc/scripts/email_api.php" method="POST" >
<input type="text" name="fname" placeholder="First Name" id="fname" required />
<input type="text" name="lname" placeholder="Last Name" id="lname" required/>
<input type="hidden" value="<?php echo $domain;?>" name="domainName" id="domainName">
<input type="hidden" value="<?php echo $article_id;?>" name="articleId" id="articleId">
<button id="run-code" name="getEmail" onclick="return validateForm()" >Run Code</button>
<input type="radio" value="blog" name="websiteType" id="blog">
<input type="radio" value="junk" name="websiteType" id="junk">
<input type="radio" value="guest" name="websiteType" id="guest">
<input type="button" name="save" value="save" onclick="submitForm('<?php echo $_SERVER['PHP_SELF'];?>')" id="saveContinue" disabled />
<input type="button" name="skip" value="skip" onclick="submitForm('<?php echo $_SERVER['PHP_SELF'];?>')" id="skip" />
<input type="button" name="ban" value="ban" onclick="submitForm('<?php echo $_SERVER['PHP_SELF'];?>')" id="ban" />
</form>
I should also mention that I have tried having it as type="submit" and the values still do not get passed. I have also tried with having all of the buttons have the same name, but that did not work either.
Any thoughts/suggestions would be appreciated. Thanks!
type="button" elements do not get submitted in a form
Try changing to type="submit" which by default will submit the form without needing any javascript
Found the problem for anyone else struggling with this.
The issue was submitting the submit buttons using the line of Javascript which I found here on SO.
I'm no expert in JS, but for whatever reason, the function was preventing the post Vars from being sent. So I found a workaround to add an onclick outside of a function to the buttons.
<input type="submit" name="save" value="save" onclick='this.form.action="<?php echo $_SERVER['PHP_SELF'];?>"' id="save" disabled />
<input type="submit" name="skip" value="skip" onclick='this.form.action="<?php echo $_SERVER['PHP_SELF'];?>"' id="skip" />
<input type="submit" name="ban" value="ban" onclick='this.form.action="<?php echo $_SERVER['PHP_SELF'];?>"' id="ban" />
After doing this, the buttons would no longer work. So the trick to fix this is to add novalidate to your <form> tag.
I have two XHTML forms (below). I am looking for a way to submit the two forms with one submit button.
First Form Below
<form method= "post" action= "forum_add_111438076.xhtml" >
<input type= "hidden" name="d_token" value="2ab5b36d7d0e5f9fee88cc9a67553db6" />First
Name:<br/><input type="text" name="meno" maxlength="20"/>
<br/>Last Name:<br/><input type="text" name="text" maxlength="20000"/>
<br/><input type="submit" name="submit" value="Submit" /></form>
Second Form
<form method="post" action="forum_add_111438075.xhtml" >
<input type="hidden" name="d_token" value="d0cb19bc6b0d162a11431213976206b8" />
Phone Number:<br/><input type="text" name="meno" maxlength="20"/>
<br/>Address:<br/><input type="text" name="text" maxlength="20000"/>
<br/><input type="submit" name="submit" value="Submit" /></form>
Each form above has its own submit button, but I want to use only one submit button.
You cannot simultaneously submit two forms at once. (like one webpage cannot go to two)
One way around this would be to use Ajax and submit the forms one after another.
Some Example Code. (using jQuery)
HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<form id="form1">
<input type= "hidden" name="d_token" value="2ab5b36d7d0e5f9fee88cc9a67553db6" />First Name:<br/><input type="text" name="meno" maxlength="20"/>
<br/>Last Name:<br/><input type="text" name="text" maxlength="20000"/>
<br/></form>
<form id="form2">
<input type="hidden" name="d_token" value="d0cb19bc6b0d162a11431213976206b8" />
Phone Number:<br/><input type="text" name="meno" maxlength="20"/>
<br/>Address:<br/><input type="text" name="text" maxlength="20000"/>
<br/></form>
<input type="submit" name="submit" onclick="submitAction()" />
Javascript
submitAction() {
$.post('forum_add_111438076.xhtml', $('#form1').serialize())
$.post('forum_add_111438075.xhtml', $('#form2').serialize())
}
It's not exaclty possible to submit two forms at once to two different places.
The best thing you can do, if you require seperate processing, is to use your receiving page to gather the secondary form post, and send that along to the secondary processing page. PHP using CURL is perfect for something like that.
If you use the get or an ajax function it will allow you to know when the first or second form is completed. Using the get you would use .done if you use ajax you will use the .success Once your first form has completed the submission, you can then submit your other form as shown below.
//Submit your First form
$.get("postOne").done(function(){
//When your first form is completed you can then submit your second form.
$.get("postTwo").done(function(){
});
});
How do I sort out multiple submit buttons, I am trying to run a javascript call "pull()" when user submit play button and i want to run php call "score.php" when user submit save button.
<form id="slotbox" name="slotbox" onsubmit="pull(); return false;">
<input class="Playbutton" id="PlayButton" type="submit" name="play" value="Play" />
<form action="score.php" method="POST">
<p>score<input name="money" type="text" /></p>
<input id="save" name="save" type="button" value="save"/>
</form>
</form>
What do i need to add/modify the code to make it work.Any advice will be grateful.
If you have multiple submit buttons, you can use the formaction attribute of the buttons to override the form's action tag:
<form id="slotbox" name="slotbox" >
<input class="Playbutton" id="PlayButton" type="submit" onclick="pull(); return false;" name="play" value="Play" />
<p>score<input name="money" type="text" /></p>
<input id="save" name="save" type="submit" formaction="score.php" value="save"/>
</form>
I've also removed the onsubmit attribute of the form, and moved its code to the onclick attribute of the Play button, because the onsubmit code runs before submitting to the action or formaction URLs.
I have the following snipet in a page. I cannot for the life of me figure out why the form is not submitting when clicking the button1 element. I get an error in IE syaing that this object does not support this property or method. I put the document.poform in an alert, and it alerts a form object. I get the feeling that I am missing something super obvious maybe??
<pre>
<?
var_dump($_POST);
?>
</pre>
<form action="" method="post" name="poform">
<input name="test" type="text" />
<input name="button" type="button" value="button1" onclick="document.poform.submit();" />
<input name="submit" type="submit" value="button2" />
</form>
Since you have an <input> named submit, document.poform.submit is that <input>, not the submit() method.
Use a different name.
Change type="button" to type="submit"