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.
Related
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'm having some problems with the enter key triggering a refresh of the page whenever there is input in a form.
The following code does not refresh the page if enter is pressed and if there is no text inputted in the text area (#input) but will refresh the page if enter is pressed and there is input in #input OR if the cursor is in the text area. I'm not sure what's triggering it, as #submit is a regular button.
<div id="forms" class="container">
<form>
Enter your verb here in plain (dictionary) form:
<input type="text" class="input-sm" id="input"></input>
<div class="radio">
<label>
<input type="radio" name="input-method" value="Hiragana" checked />Radio 1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="input-method" value="Romaji" />Radio 2
</label>
</div>
<input type="button" class="btn btn-default" id="submit" value="Submit">
</input
</form>
</div>
I'm trying to jquery to solve the problem, but need help in that regard. Any suggestions would be appreciated!
you can either add following script at the end of body
<script>
$("form").submit(function (e) {
e.preventDefault();
alert("call some function here");
});
</script>
or you can just put your form tag like this
<form onsubmit="return false">
either way you will then have to write an onClick="SOMEFUNCTION()" to the input
also there is an error with an extra /button tag...remove that and instead use
<input type="button" class="btn btn-default" id="submit" value="Conjugate" />
note the ending slash
simply change your html:
<div id="forms" class="container">
<form action="javascript:void(-1)">
Enter your verb here in plain (dictionary) form:
....
jsfiddle here - works like charm
you have syntax error in your html codes:
<input type="button" class="btn btn-default" id="submit" value="Submit">
</button>
change it to this:
<button type="button" class="btn btn-default" id="submit" value="Submit">
</button>
Also, you need using Javascript/jquery to submit your form to prevent refreshing your entire page
place :
e.preventDefault();
inside the keypress function
I have multiple buttons with different functionality, but each button behaves as submit button. I want to give different behavior for each of the button created.
<form action="/createUpdate">
<!--here i have form elements like textbox , checkboxes etc --!>
<button name="buttonName" id="submitButton1" value="create">create</button>
<button name="buttonName" id="submitButton2" value="Update">Update</button>
</form>
If you change the buttons to input type=submit, only the pressed button will be sent.
For example:
<form action="/createUpdate">
<!--here i have form elements like textbox , checkboxes etc -->
<input type="submit" name="buttonName" id="submitButton1" value="create" />
<input type="submit" name="buttonName" id="submitButton2" value="Update" />
</form>
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 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?