I have the next HTML code:
<!DOCTYPE><html><body>
<form method='post' action='/upload' enctype='multipart/form-data'>
<input type='file' name='uploadFile'/>
<input type='submit' /></form>
</body></html>
Which create a file input and submit button, which sends a POST method (/upload).
I want to create a new button (submitBig), which would send another POST method (/uploadBig).
How can I do it?
A simple workaround, Create 2 Forms:
<!DOCTYPE><html><body>
<form method='post' action='/upload' enctype='multipart/form-data'>
<input type='file' name='uploadFile'/>
<input type='submit' /></form>
<form method='post' action='/uploadBig' enctype='multipart/form-data'>
<input type='file' name='uploadFileBig'/>
<input type='submit' /></form>
</body></html>
Else you should indeed refer to Javascript.
Use JavaScript to run a different function for each button. Set the .action and do the .submit from there.
You will need to use Javascript. Essentially this will edit the Action of the form and post it on click:
$('#big-submit').click(function(e) {
e.preventDefault();
$(this).closest('form').attr('action', '/uploadBig').submit();
});
An even better solution would be to just have the one button, and then get the file size on click and post to the relevant action.
You can use jQuery or simple Javascript:
<!DOCTYPE>
<html>
<body>
<form method="post" id="theForm" action="/upload" enctype="multipart/form-data">
<input type="file" name="uploadFile" />
<input type="submit" value="normal Submit (/upload)" />
<input type="button" id="bigButton" value="big Submit (/uploadBig)" />
</form>
<script type="text/javascript">
var theForm = document.getElementById('theForm');
/* When the button is clicked */
document.getElementById('bigButton').onclick = function() {
/* Change the location */
theForm.action = '/uploadBig';
/* Submit the form */
theForm.submit();
};
</script>
</body>
</html>
You can use the HTML5 formaction attribute to do that (but you have to check it's compatibility with your requirements to use it : it only works on recent browsers).
<!DOCTYPE html>
<html>
<body>
<form method="post" action="/upload" enctype="multipart/form-data">
<input type="file" name="uploadFile"/>
<input type="submit" value="Submit" />
<input type="submit" value="Submit big" formaction="/uploadBig" />
</form>
</body>
</html>
Here One way to get around this is to handle each button's OnClick event and set the "action" for the form dynamically:
<!-- create the form -->
<form name="Form1" method="post">
<!-- Add the data entry bits -->
Your Name <input type="text" name="text1" size="10" /><br />
<!-- Add some buttons -->
<INPUT type="button" value="Button1" name=button1 onclick="return OnButton1();">
<INPUT type="button" value="Button2" name=button2 onclick="return OnButton2();">
<!-- close the form -->
</form>
Our button click handlers for Button1 and Button2 would look like the following:
<script language="Javascript">
<!--
function OnButton1()
{
document.Form1.action = "Page1.aspx"
document.Form1.target = "_blank"; // Open in a new window
document.Form1.submit(); // Submit the page
return true;
}
function OnButton2()
{
document.Form1.action = "Page2.aspx"
document.Form1.target = "_blank"; // Open in a new window
document.Form1.submit(); // Submit the page
return true;
}
-->
</script>
<noscript>You need Javascript enabled for this to work</noscript>
Where Page1.aspx should be called when Button1 is pressed, and Page2.aspx called when Button2 is pressed.
This is my form code:
<form enctype="multipart/form-data" name="upload-file" method="post" action="http://example.com/upload">
<div class="formi">
<input id="text-link-input" type="text" name="url" class="link_form" value="your link" onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;" />
<input type="submit" value="OK" class="link_but" />
</div>
<div class="upl" title="Upload"><img src="http://example.com/example.png" alt="" style="vertical-align:middle;"/>Upload
<input type="file" name="file" size="1" class="up" onchange = "document.getElementById('text-link-input').value = String(this.value).replace('C:\\fakepath\\','')"/>
</div>
</form>
Now, I want to redirect the submitter to any page of my choice after the form data has been submitted, but the action resides on another website where I cannot edit. Is it possible to redirect the user to any page after he has submitted the data to that site?
From some Googling, this is what I have found. Adding this to form code:
onSubmit=window.location='http://google.com'
This didnt work. Maybe I didnt implement it correctly? This is what I did:
<form enctype="multipart/form-data" name="upload-file" method="post" onSubmit=window.location='http://google.com' action="http://example.com/upload">
Another person says adding a hidden field should work:
<input type="hidden" name="redirect" value="http://your.host/to/file.html">
How should I implement this is my code?
Suggestions and help awaited...
Try this Javascript (jquery) code. Its an ajax request to an external URL. Use the callback function to fire any code:
<script type="text/javascript">
$(function() {
$('form').submit(function(){
$.post('http://example.com/upload', function() {
window.location = 'http://google.com';
});
return false;
});
});
</script>
I have a form that can be called from any page. It opens on top of the current page with z-index. I cannot use php in this case. The form is send to a cgi to process the values. It is necessary to put something in "redirect" if I leave it blank it don't works. In redirect is there a way to put the value to the current page whatever it is?
<Form id="formulari" method="POST" action="http://cgi.domain.com/FormMail.pl">
<p>
<input type="hidden" name="recipient" value="info#domain">
<input type="hidden" name="subject" value="IB4 correu">
<input type="hidden" name="redirect" value="TheSamePageWeAre">
</p>
<form>
<input type="text" name="name" value="name"/>
<input type="submit" value="Send"/>
</form>
Put this javascript at the end of the page.
<script type='text/javascript'>
document.getElementsByName('redirect')[0].value = window.location.pathname;
</script>
Set an id on the hidden field, for example id="redirect", and use this Javascript:
<script>
window.onload = function (){
document.getElementById('redirect').value = location
}
</script>
I tried the suggestion such as submit();, but it doesn't work for me... Can someone help.
<section class="section_bkg" id="login">
<form action="login.php" method="post" id="submit_login">
<ul>
<li>
<label class="block" for="email">Email</label>
<input type="email" name="email" id="email"/>
</li>
<li>
<label class="block" for="password">Password</label>
<input type="password" name="password" id="password"/>
</li>
<li>Log in</li>
</ul>
</form>
</section>
First give the form an id attribute so you can reference it:
<form action="login.php" method="post" id="myform">
Now you can do a Javascript-submit, using the onclick event:
Click to submit the form
Building on #dbaseman's answer. If you are using jQuery to submit the form this should help.
Html
Click to save
jQuery
// submit
$('#MySubmitButton').click(function () {
$('form').submit();
return false;
});
// OR - bypassing any unbotrusive validation
$('#MySubmitButton').click(function () {
$('form')[0].submit();
return false;
});
// using the enter key to submit the form
$('#password, #email').keypress(function (event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == 13) {
$('form').submit();
event.stopPropagation();
}
});
JavaScript provides the form object that contains the submit() method. Use the ‘id’ of the form to get the form object. For example, if the name of your form is ‘myform’, the JavaScript code for the submit call is:
document.forms["myform"].submit();
But, how to identify a form? Give an id attribute in the form tag
<form id='myform' action='handle-data.php'>
Here is the code to submit a form when a hyperlink is clicked:
<form name="myform" method="post" action="handle-data.php">
Search: <input type='text' name='query' />
Search
</form>
<script type="text/javascript">
function submitform()
{
document.myform.submit();
}
</script>
Here Answer
<form action="login.php" method="post" id="myform" name="myform">
</form>
Click to submit the form
<a href="#" onclick=
"document.getElementById('submit_login').submit(); return false">Log in</a>
But it’s really more useable and more accessible to use a submit button, so it is better to fix whatever issues you have with styling, rather than implement basic functionality this way.
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");
});