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.
Related
<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).
I'm trying to to make php execute different code based on the form input and html form does not seem to be entering php. I'm not sure what the problem with my code is
HTML:
<div class="card-container">
<div class="form-holder">
<form name="signupform" action="./php/signup.php" method="POST">
<div class="idinput">
<p> Enter your username: </p>
<input type="text" id="user_id" name="user_id" placeholder="User ID">
<br>
<div id="user_id_error"></div>
</div>
<div class="submitbtn">
<input type="button" id="submit" name="submit" value="Sign Up" onclick="validateForm()">
</div>
validateForm() function just checks if the input is valid
Clicking the submit button does not do anything.
You are using type button which is not used for submitting the form, inside function validateForm() you need to submit the form OR you can use type submit.
<input type="submit" id="submit" name="submit" value="Sign Up"/>
I'm trying to make a HTML form that on submit does a google search with JS.
This is the HTML:
<form name="form">
<input type="text" name="search" id="searchBox" onkeyup="changeLogo()" autofocus>
<input type="submit" id="button" value="Submit" onclick="googleSearch()">
</form>
And the JS function:
function googleSearch() {
var searchText = document.getElementById("searchBox").value;
window.location.href = "http://google.com/";
}
The Google URL isn't right but it isn't redirecting at all.. I put alert(searchText) in the function and the alert showed so not really sure what's going on.
If you use button type as 'submit', it will submit your form.
So you can change your button from
<input type="submit" id="button" value="Submit" onclick="googleSearch()">`
to
<input type="button" id="button" value="Submit" onclick="googleSearch()">
It will work.
because the page refreshed when you click submit button before excuting localtion.href line
try change with your code like below
<form name="form" onsubmit="return false">
....
</form>
Your form is submitted which might be the issue. Change the type="submit" to type="button" this will make sure the form is not submitted on click of this button
I have a few buttons and a submit button. (Making simple) My idea is to receive the value of the clicked button using a php and display it only when submit. Here I face a problem that button click itself redirects to the page and displays the value (means it is not waiting for the submit button to press). I followed a javascript provided here. But didn’t work. Any method to achieve this?
<form action="calculate.php" method="POST">
<button type="" name="btn" style="background-color:#7F77AE" value="Alf">x1</button>
<button type="" name="btn" style="background-color:#7F77AE" value="ABI">y1</button>
<button type="" name="btn" style="background-color:#7F77AE" value="APE">z1</button>
<input type="submit" value="Submit">
php part is as simple as,
$button = $_POST['btn'];
echo $button;
Define the plain button's type as "button"
<form action="calculate.php" method="POST">
<button type="button" name="btn" style="background-color:#7F77AE" value="Alf">x1</button>
<button type="button" name="btn" style="background-color:#7F77AE" value="ABI">y1</button>
<button type="button" name="btn" style="background-color:#7F77AE" value="APE">z1</button>
<input type="submit" value="Submit">
EDIT: If you absolutely need to use buttons here you can do something like this:
<script>
function select(val){
document.getElementById("btnValueStore").value = val;
}
</script>
<form action="calculate.php" method="POST">
<button type="button" style="background-color:#7F77AE" onClick="select('Alf')">x1</button>
<button type="button" style="background-color:#7F77AE" onClick="select('ABI')">y1</button>
<button type="button" style="background-color:#7F77AE" onClick="select('APE')">z1</button>
<input type="hidden" value="" name="btn" id="btnValueStore">
<input type="submit" value="Submit">
</form>
First you define a hidden input to hold the value of the last pressed button.
The select function changes the value of the hidden input field to whatever value you pass it.
For each of your buttons set the "onClick" property to call the select function with the corresponding button's value.
Note: This particular implementation allows only 1 button to have been "selected" (the last one you clicked) - for the ability to "select" more than one button you will need multiple hidden input fields.
I am trying to submit the data for this form, which has 3 different buttons:
<form action="/game.php?village=8404&screen=market&mode=own_offer&action=modify_offers&h=85fd1491" method="post">
<input class="btn btn-cancel" type="submit" value="Delete" name="delete">
<input type="text" size="2" name="mod_count" value="1" onkeydown="return no_enter(event)">
<input class="btn" type="submit" value="Increase" name="increase">
<input class="btn" type="submit" value="Reduce" name="decrease">
</form>
I would like to either submit the data in the same manner of "increase" or click that submit button. Ideally, I wouldn't have to replicate the URL which appears after the form action= as this varies from page to page.
When the form has a definite id, I've been using:
$('#thisFormId input[type=submit]').click();
But can't work out.
So how I can do that in this instance?
If I understand the questions:
$("input[name=increase]").click();
will trigger the click event of the Increase button and submit the form, which is what you want?