I have two submit buttons in a form. How do I determine which one was hit serverside?
Solution 1:
Give each input a different value and keep the same name:
<input type="submit" name="action" value="Update" />
<input type="submit" name="action" value="Delete" />
Then in the code check to see which was triggered:
if ($_POST['action'] == 'Update') {
//action for update here
} else if ($_POST['action'] == 'Delete') {
//action for delete
} else {
//invalid action!
}
The problem with that is you tie your logic to the user-visible text within the input.
Solution 2:
Give each one a unique name and check the $_POST for the existence of that input:
<input type="submit" name="update_button" value="Update" />
<input type="submit" name="delete_button" value="Delete" />
And in the code:
if (isset($_POST['update_button'])) {
//update action
} else if (isset($_POST['delete_button'])) {
//delete action
} else {
//no button pressed
}
If you give each one a name, the clicked one will be sent through as any other input.
<input type="submit" name="button_1" value="Click me">
There’s a new HTML5 approach to this, the formaction attribute:
<button type="submit" formaction="/action_one">First action</button>
<button type="submit" formaction="/action_two">Second action</button>
Apparently this does not work in Internet Explorer 9 and earlier, but for other browsers you should be fine (see: w3schools.com HTML <button> formaction Attribute).
Personally, I generally use JavaScript to submit forms remotely (for faster perceived feedback) with this approach as backup. Between the two, the only people not covered are Internet Explorer before version 9 with JavaScript disabled.
Of course, this may be inappropriate if you’re basically taking the same action server-side regardless of which button was pushed, but often if there are two user-side actions available then they will map to two server-side actions as well.
As noted by Pascal_dher in the comments, this attribute is also available on the <input> tag as well.
An even better solution consists of using button tags to submit the form:
<form>
...
<button type="submit" name="action" value="update">Update</button>
<button type="submit" name="action" value="delete">Delete</button>
</form>
The HTML inside the button (e.g. ..>Update<.. is what is seen by the user; because there is HTML provided, the value is not user-visible; it is only sent to server. This way there is no inconvenience with internationalization and multiple display languages (in the former solution, the label of the button is also the value sent to the server).
This is extremely easy to test:
<form action="" method="get">
<input type="submit" name="sb" value="One">
<input type="submit" name="sb" value="Two">
<input type="submit" name="sb" value="Three">
</form>
Just put that in an HTML page, click the buttons, and look at the URL.
Use the formaction HTML attribute (5th line):
<form action="/action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<button type="submit">Submit</button><br>
<button type="submit" formaction="/action_page2.php">Submit to another page</button>
</form>
<form>
<input type="submit" value="Submit to a" formaction="/submit/a">
<input type="submit" value="submit to b" formaction="/submit/b">
</form>
The best way to deal with multiple submit buttons is using a switch case in the server script
<form action="demo_form.php" method="get">
Choose your favorite subject:
<button name="subject" type="submit" value="html">HTML</button>
<button name="subject" type="submit" value="css">CSS</button>
<button name="subject" type="submit" value="javascript">JavaScript</button>
<button name="subject" type="submit" value="jquery">jQuery</button>
</form>
Server code/server script - where you are submitting the form:
File demo_form.php
<?php
switch($_REQUEST['subject']) {
case 'html': // Action for HTML here
break;
case 'css': // Action for CSS here
break;
case 'javascript': // Action for JavaScript here
break;
case 'jquery': // Action for jQuery here
break;
}
?>
Source: W3Schools.com
Maybe the suggested solutions here worked in 2009, but I’ve tested all of this upvoted answers and nobody is working in any browsers.
The only solution I found working was this (but it's a bit ugly to use I think):
<form method="post" name="form">
<input type="submit" value="dosomething" onclick="javascript: form.action='actionurl1';"/>
<input type="submit" value="dosomethingelse" onclick="javascript: form.action='actionurl2';"/>
</form>
You formaction for multiple submit buttons in one form
example:
<input type="submit" name="" class="btn action_bg btn-sm loadGif" value="Add Address" title="" formaction="/addAddress">
<input type="submit" name="" class="btn action_bg btn-sm loadGif" value="update Address" title="" formaction="/updateAddress">
An HTML example to send a different form action on different button clicks:
<form action="/login" method="POST">
<input type="text" name="username" value="your_username" />
<input type="password" name="password" value="your_password" />
<button type="submit">Login</button>
<button type="submit" formaction="/users" formmethod="POST">Add User</button>
</form>
The same form is being used to add a new user and login user.
Define name as array.
<form action='' method=POST>
(...) some input fields (...)
<input type=submit name=submit[save] value=Save>
<input type=submit name=submit[delete] value=Delete>
</form>
Example server code (PHP):
if (isset($_POST["submit"])) {
$sub = $_POST["submit"];
if (isset($sub["save"])) {
// Save something;
} elseif (isset($sub["delete"])) {
// Delete something
}
}
elseif very important, because both will be parsed if not.
Since you didn't specify what server-side scripting method you're using, I'll give you an example that works for Python, using CherryPy (although it may be useful for other contexts, too):
<button type="submit" name="register">Create a new account</button>
<button type="submit" name="login">Log into your account</button>
Rather than using the value to determine which button was pressed, you can use the name (with the <button> tag instead of <input>). That way, if your buttons happen to have the same text, it won't cause problems. The names of all form items, including buttons, are sent as part of the URL.
In CherryPy, each of those is an argument for a method that does the server-side code. So, if your method just has **kwargs for its parameter list (instead of tediously typing out every single name of each form item) then you can check to see which button was pressed like this:
if "register" in kwargs:
pass # Do the register code
elif "login" in kwargs:
pass # Do the login code
<form method="post">
<input type="hidden" name="id" value="'.$id.'" readonly="readonly"/>'; // Any value to post PHP
<input type='submit' name='update' value='update' formAction='updateCars.php'/>
<input type='submit' name='delete' value='delete' formAction='sqlDelete.php'/>
</form>
I think you should be able to read the name/value in your GET array. I think that the button that wasn't clicked won't appear in that list.
You can also do it like this (I think it's very convenient if you have N inputs).
<input type="submit" name="row[456]" value="something">
<input type="submit" name="row[123]" value="something">
<input type="submit" name="row[789]" value="something">
A common use case would be using different ids from a database for each button, so you could later know in the server which row was clicked.
In the server side (PHP in this example) you can read "row" as an array to get the id.
$_POST['row'] will be an array with just one element, in the form [ id => value ] (for example: [ '123' => 'something' ]).
So, in order to get the clicked id, you do:
$index = key($_POST['row']);
key
As a note, if you have multiple submit buttons and you hit return (ENTER key), on the keyboard the default button value would be of the first button on the DOM.
Example:
<form>
<input type="text" name="foo" value="bar">
<button type="submit" name="operation" value="val-1">Operation #1</button>
<button type="submit" name="operation" value="val-2">Operation #2</button>
</form>
If you hit ENTER on this form, the following parameters will be sent:
foo=bar&operation=val-1
The updated answer is to use the button with formaction and formtarget
In this example, the first button launches a different url /preview in a new tab. The other three use the action specified in the form tag.
<button type='submit' class='large' id='btnpreview' name='btnsubmit' value='Preview' formaction='/preview' formtarget='blank' >Preview</button>
<button type='submit' class='large' id='btnsave' name='btnsubmit' value='Save' >Save</button>
<button type='submit' class='large' id='btnreset' name='btnsubmit' value='Reset' >Reset</button>
<button type='submit' class='large' id='btncancel' name='btnsubmit' value='Cancel' >Cancel</button>
Full documentation is here
In HTML5, you can use formaction & formmethod attributes in the input field
<form action="/addimage" method="POST">
<button>Add image</button>
<button formaction="/home" formmethod="get">Cancel</button>
<button formaction="/logout" formmethod="post">Logout</button>
</form>
You can also use a href attribute and send a get with the value appended for each button. But the form wouldn't be required then
href="/SubmitForm?action=delete"
href="/SubmitForm?action=save"
You can present the buttons like this:
<input type="submit" name="typeBtn" value="BUY">
<input type="submit" name="typeBtn" value="SELL">
And then in the code you can get the value using:
if request.method == 'POST':
#valUnits = request.POST.get('unitsInput','')
#valPrice = request.POST.get('priceInput','')
valType = request.POST.get('typeBtn','')
(valUnits and valPrice are some other values I extract from the form that I left in for illustration)
Since you didn't specify what server-side scripting method you're using, I'll give you an example that works for PHP
<?php
if(isset($_POST["loginForm"]))
{
print_r ($_POST); // FOR Showing POST DATA
}
elseif(isset($_POST["registrationForm"]))
{
print_r ($_POST);
}
elseif(isset($_POST["saveForm"]))
{
print_r ($_POST);
}
else{
}
?>
<html>
<head>
</head>
<body>
<fieldset>
<legend>FORM-1 with 2 buttons</legend>
<form method="post" >
<input type="text" name="loginname" value ="ABC" >
<!--Always use type="password" for password -->
<input type="text" name="loginpassword" value ="abc123" >
<input type="submit" name="loginForm" value="Login"><!--SUBMIT Button 1 -->
<input type="submit" name="saveForm" value="Save"> <!--SUBMIT Button 2 -->
</form>
</fieldset>
<fieldset>
<legend>FORM-2 with 1 button</legend>
<form method="post" >
<input type="text" name="registrationname" value ="XYZ" >
<!--Always use type="password" for password -->
<input type="text" name="registrationpassword" value ="xyz123" >
<input type="submit" name="registrationForm" value="Register"> <!--SUBMIT Button 3 -->
</form>
</fieldset>
</body>
</html>
Forms
When click on Login -> loginForm
When click on Save -> saveForm
When click on Register -> registrationForm
Simple. You can change the action of form on different submit buttons click.
Try this in document.Ready:
$(".acceptOffer").click(function () {
$("form").attr("action", "/Managers/SubdomainTransactions");
});
$(".declineOffer").click(function () {
$("form").attr("action", "/Sales/SubdomainTransactions");
});
Related
I have form, with two buttons:
<form action="/Book/Crud" method="post">
<input type="text" name="bookInput" />
<button type="submit">Save</button>
<button type="submit">Save and exit</button>
</form>
How can I pass to my controller, or, whatever, additional value, which depends on button?
<button type="submit" ?????? >Save</button> What should be here?
I am using Asp.Net Core, with this controller:
public IActionResult Crud(string bookInput)
{
//removed code for brevity
}
You can use jquery to solve the issue:
cshtml
<form action="/Book/Crud" method="post">
<input type="text" name="bookInput" />
<button type="submit" name="Submit">Save</button>
<button type="submit" name="SubmitAndExit">Save and exit</button>
</form>
jquery
$("form").submit(function () {
var btn = $(this).find("input[type=submit]:focus" );
var btnName = btn.attr('name');
var input = $("<input>")
.attr("name", "btnName").val(btnName);
$(this).append(input);
return true;
});
The answer of Bobby Jack is correct. I will elaborate on this answer in order to show how to access this input from within the controller. If you would use the following HTML:
<form action="/Book/Crud" method="post">
<input type="text" name="bookInput" />
<button name="action" value="save" type="submit">Save</button>
<button name="action" value="save-exit" type="submit">Save and exit</button>
</form>
You could reach the values: 'save' and 'save-exit' by defining another parameter in the controller like this:
// The parameter 'action' is what will contain the values specified in the button.
public IActionResult Crud(string bookInput, string action)
{
// Implementation
}
The name of the parameter needs to correspond to the value in the 'name' attribute of the form button (in this case 'action'). When the button is clicked, ASP.net will automatically assign the value of the 'value' attribute to the controller parameter. Or more specifically the controller parameter 'action' will have a value of 'save' or 'save-exit' retrieved from the attribute 'value'.
<form action="/Book/Crud" method="post">
<input type="text" name="bookInput" />
<button name="action" value="save" type="submit">Save</button>
<button name="action" value="save-exit" type="submit">Save and exit</button>
</form>
Like other inputs, the button can have a name and value attribute which will be submitted to your backend on submit. Only the button that was clicked will send its value. You need to use whatever mechanism you're using to access the POSTed variable named action (in this example). Then just switch on whether it's equal to save or save-exit and perform the relevant function.
add different names
<button type="submit" name="save">Save</button>
<button type="submit" name="saveExit">Save and exit</button>
Example from VB.net:
<asp:Button id="cmdKeyphraseAdd" runat="server" Text="Add Keyphrase" onclick="cmdKeyphraseAdd_Click"></asp:Button>
This one is possible to make with JavaScript, but I'm curious about pure HTML solution. What's my point of this question:
I have a form:
<form action...>
<input type... />
<label for...>...</label>
and other elements for basic form...
<button type="submit">Send</button>
<button type="submit" target="hidden-form">Remove</button>
</form>
And somewhere else I have this another form:
<form id="hidden-form" action...>
<input type="hidden"... />
</form>
So my point is, that pressing button "Remove" will post form #hidden-form. Is something like that possible? I tried that attribute target, but no help.
You can use <button>'s form attribute:
<button type="submit" form="hidden-form">Remove</button>
<form id="hidden-form" action...>
I think you want something like this, using jQuery it is possible try it:
$("#remove").click(function(){
$('#hidden-form').submit();
});
<form action...>
<input type... />
<label for...>...</label>
and other elements for basic form...
<button type="submit">Send</button>
<button type="submit" id="remove" onClick="document.forms['hidden-form'].submit();
">Remove</button>
</form>
<form id="hidden-form" action...>
<input type="hidden"... />
</form>
ok this is it... i need to submit a form where the user enters a info in a input box but the value has other text aswell.
for example: user - enters 123 value is - www.helloneed123help.com submit
the 123 from the url is what the user entered
this is code i have:
<form name="postcode" method="post" action="location.html">
<input type="text" name="post" id="post" required="required" maxlength="8" />
<input type="submit" name="submit" value="submit" class="submit" />
</form>
any ideas? sheraz
No jQuery needed, straight JavaScript.
Add the following directly after the form HTML:
<script>
document.forms.postcode.onsubmit = function(){
this.post.value = 'www.helloneed' + this.post.value + 'help.com';
alert(this.post.value);
}
</script>
Fiddle:
http://jsfiddle.net/iambriansreed/ZeKUq/
Just add 'onclick' event in input tag and write javascript code there.
<input type="submit" name="submit" value="submit" class="submit" onclick="post.value='www.helloneed' + post.value + 'help.com';" />
You could try prepending & appending text to the value of the inputbox.
e.g. onsubmit="$('#post').val('http://www.helloneed' + $('#post').val() + 'help.com');
This may work:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<form name="postcode" method="post" action="location.html" onsubmit="$('#post').val('http://www.helloneed' + $('#post').val() + 'help.com'); return false">
<input type="text" name="post" id="post" required="required" maxlength="8" />
<input type="submit" name="submit" value="submit" class="submit" />
</form>
(After your first test, I would remove the return false text)
Andrew
It is not possible to do this in HTML. Such issues should be handled server-side.
It’s easy to do this in JavaScript, as outlined in iambriansreed’s answer, but it’s equally simple and much more robust to do it server-side. In a case like this, there isn’t even any need to do it client-side as well; it would just complicate things, as the server-side code would have no direct way of knowing what it gets (direct user input vs. input modified by client−side JavaScript when enabled).
I have a search form
<form id="search" method="GET">
<input type="text" name="q" id="q" />
<input type="submit" value="search" name="submit" id="submit" />
</form>
and when I submit it it adds ?q=&submit=submit to the URL is there a way that I can keep it from appending submit=submit but still pass the q=?
If you remove the name attribute from your <input type="submit" /> then that should get rid of submit=submit from the querystring (a quick test in Firefox / Firebug confirmed this). For example:
<input type="submit" value="search" />
Try using a button:
<button type="submit">Submit Form</button>
Would using post instead of get be out of the question because that wouldn't show anything in the url.
Change the button's name to name=''
Change the button type from:
type="submit"
To:
type="button"
i.e.
<button type="button">Login</button>
You could just use an anchor instead of a form input:
<script type="text/javascript">
function submitForm() {
document.getElementById('search').submit();
}
</script>
<form id="search" method="GET">
<input type="text" name="q" id="q" />
Submit
</form>
Or, you could add an onsubmit to the form, and use javascript to disable the input field, which should keep it from showing in the URL.
No. You would need to remove the input.
I have a table, and at the end of each row, there is a button so the user can delete that row. I'm doing it like this:
<td><button type=submit name=delete value=1>delete</button>
<td><button type=submit name=delete value=2>delete</button>
<td><button type=submit name=delete value=3>delete</button>
<td><button type=submit name=delete value=4>delete</button>
But this doesn't work in IE, the form sends delete instead of value.
I've also tried:
<td><input type=submit name=delete value=1>
<td><input type=submit name=delete value=2>
<td><input type=submit name=delete value=3>
<td><input type=submit name=delete value=4>
But then the button text is a number instead of the word delete.
Is there anyway I can add a bunch of submit buttons to a form that all say delete but perform different actions? I can't use separate forms since forms can't nest.
Unrelated to your question: always put double quotes around your attribute values.
Internet Explorer 6 and 7 both have buggy form handling support, especially with button elements:
The innerText of a button element is submitted, instead of the value (if set).
All button elements are successful, so all name/value pairs are submitted. This means if #1 would have worked correctly, it would delete all items :(
If the type attribute is not set on the button, it won't default to submit. So you have to add type="submit" to every button.
Possible ways to overcome this problem could be:
1) Create multiple forms with a hidden field containing the value:
<form action=".../delete" method="post">
<input type="hidden" name="id" value="1" />
<button type="submit">Delete</button>
</form>
<form action=".../delete" method="post">
<input type="hidden" name="id" value="2" />
<button type="submit">Delete</button>
</form>
2) Add the id inside the button, so you can parse it on the server side:
<button type="submit" value="1">Delete <span>1</span></button>
CSS:
button span {
display: none;
}
C#:
int id;
if (!Int32.TryParse(this.Request.Form["delete"], out id)
{
// Get the value between the `span`s
}
3) Use JavaScript to submit the value instead of the innerText and only successful buttons:
IE8.js
There is no 'best' answer, it just depends on the situation.
How about some JavaScript and a hidden form field?
<input type="hidden" name="deleteID" value="" />
<script type="text/javascript">
function deleteID(theid)
{
theFormName.deleteID = theid;
theFormName.submit();
}
</script>
And for the buttons:
<td><input type="button" name="delete" value="Delete" onclick="javascript:deleteID(1);" /></td>
<td><input type="button" name="delete" value="Delete" onclick="javascript:deleteID(2);" /></td>
<td><input type="button" name="delete" value="Delete" onclick="javascript:deleteID(3);" /></td>
<td><input type="button" name="delete" value="Delete" onclick="javascript:deleteID(4);" /></td>
And in the server side script, you can check if deleteID is set and delete as necessary.
In this case I wouldn't go with multiple submit buttons. It'd be better to set a hidden input to the value you want (using Javascript) when the buttons are clicked. Then the javascript can call myform.submit()
Why not just use a link?
You can also change the name for each button, but the link is better, I believe, as you are not really submitting a form, but doing an action.
Use links if you can
<td><a href='delete.php?id=1'>delete</a></td>
If you insist on using forms use this one
<td>
<form action='delete.php'>
<input type='hidden' name='id' value='2'>
<input type='button' value='delete'>
</form>
</td>
Personnally, I try to avoid any javascript for that kind of problem.
Thanks to the Label tag that triggers any form element with an ID attribute.
<label for="action_delete" class="button-submit"><input type="submit" id="action_delete" name="action" value="delete" /> Delete this item</label>
Then use CSS to style the label as a button
label.button-submit{ cursor: pointer; ... }
label.button-submit input{ position: absolute; top: -999%; }
Cheers!