Two submit buttons in one form
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">
Multiple submit buttons in an HTML form
I'm just doing the trick of float
ing the buttons to the right.
This way the Prev
button is left of the Next
button, but the Next
comes first in the HTML structure:
.f {
float: right;
}
.clr {
clear: both;
}
<form action="action" method="get">
<input type="text" name="abc">
<div id="buttons">
<input type="submit" class="f" name="next" value="Next">
<input type="submit" class="f" name="prev" value="Prev">
<div class="clr"></div><!-- This div prevents later elements from floating with the buttons. Keeps them 'inside' div#buttons -->
</div>
</form>
use many submit buttons in the same form
It won't work the way you've written it. Only the submit button you send will be included in request.form
, you'll get an error if you try to use the name of one of the other buttons.
Also, request.form.get
is a function, not a dictionary. You can use request.form.get("Histogram")
-- this will return the value of the Histogram
button if it was used, otherwise it will return None
.
Instead of giving the buttons different names, use the same name but different values.
<form id="package_form" action="" method="post">
<div class="panel-body">
<input type ="submit" name="action" value="Download">
</div>
<div class="panel-body">
<input type ="submit" name="action" value="Histogram">
</div>
<div class="panel-body">
<input type ="submit" name="action" value="Search">
</div>
</form>
Then your Python code can be:
if request.form['action'] == 'Download':
...
elif request.form['action'] == 'Histogram':
...
elif request.form['action'] == 'Search':
...
else:
... // Report bad parameter
HTML form with two submit buttons and two target attributes
It is more appropriate to approach this problem with the mentality that a form will have a default action tied to one submit button, and then an alternative action bound to a plain button. The difference here is that whichever one goes under the submit will be the one used when a user submits the form by pressing enter, while the other one will only be fired when a user explicitly clicks on the button.
Anyhow, with that in mind, this should do it:
<form id='myform' action='jquery.php' method='GET'>
<input type='submit' id='btn1' value='Normal Submit'>
<input type='button' id='btn2' value='New Window'>
</form>
With this javascript:
var form = document.getElementById('myform');
form.onsubmit = function() {
form.target = '_self';
};
document.getElementById('btn2').onclick = function() {
form.target = '_blank';
form.submit();
}
Approaches that bind code to the submit button's click event will not work on IE.
One form with two submit buttons and different actions for each button
Refer this :
Multiple submit buttons php different actions
Put this script in your page :
<script>
function submitForm(action)
{
document.getElementById('columnarForm').action = action;
document.getElementById('columnarForm').submit();
}
</script>
Modify your input code :
<input type="image" name="camper" onclick="submitForm('formindb_hoh_1.php')" value="camper" src="../images/apps/camperBtn.png" class="submit_button" />
<input type="image" name="medical" onclick="submitForm('formindb_hoh_2.php')" value="medical" src="../images/apps/medicalBtn.png"class="submit_button" />
Multiple submit buttons on HTML form – designate one button as default
My suggestion is don't fight this behaviour. You can effectively alter the order using floats. For example:
<p id="buttons">
<input type="submit" name="next" value="Next">
<input type="submit" name="prev" value="Previous">
</p>
with:
#buttons { overflow: hidden; }
#buttons input { float: right; }
will effectively reverse the order and thus the "Next" button will be the value triggered by hitting enter.
This kind of technique will cover many circumstances without having to resort to more hacky JavaScript methods.
Form with multiple submit buttons or multiple forms
You don't need a separate form for each article, you don't need a hidden input, and you don't need JavaScript. Just use a button instead of an input like the other answer suggested. Any of those buttons will submit the form if they're clicked, and $_POST['id']
will have the value of the button that was clicked.
<button>
is different than <input>
because it's not a self-closing tag. With an <input>
, the value is the button text. But with a <button>
, you can give it a value, and then put the text you want it to have between the tags.
Here's an example based on your code.
<form method="POST" action="{{url('/deleteArticle')}}">
{{ csrf_field() }}
@foreach($articles as $a)
<div class="test">
<div class="name"><?= $a['name_a'] ?></div>
<button type="submit" class="del cross" name="id" value='<?= $a['id_a'] ?>' >X</button>
</div>
@endforeach
</form>
Unrelated to the question, I also fixed the repeated csrf_field and merged the two classes on the button.
Two submit buttons in one form. Can event in submit function know which one?
You can maintain the form, just add additional events to setup which button called the submit.
var form_config = {button: null};
$("#submit1").click(function(){ form_config.button = 'submit1'; });
$("#submit2").click(function(){ form_config.button = 'submit2'; });
$('#testform').submit(function(e) { console.log(e); e.preventDefault();
var submiturl;
if (form_config.button === 'submit1') { submiturl = '../sendToFactory.cshtml'; } else if (form_config.button === 'submit2') { submiturl = '../sendOverseas.cshtml'; } $("#hi").val(submiturl);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><form id="testform"> <input type="text" id="hi" name="hi" /> <input type="text" id="bye" name="bye" />
<button type="submit" id="submit1">Use Me</button> <button type="submit" id="submit2">No, Use Me </button></form>
Enter key action when multiple submit buttons exist on a single form
After doing some more research I realized I asked the wrong question. However, it's not letting me delete the question, so I'm posting the answer to my actual question here.
My question should have been, "When multiple inputs exist in a single form, how does the browser determine which one is chosen when hitting the enter key?"
The answer is, when the enter key is hit, the first input of type="submit" is chosen. However, IE will skip any submit buttons that are hidden with display:none
.
I found the answer here:
Multiple submit buttons on HTML form – designate one button as default
My fix was to set the submit button to position: absolute; left: -1000%
rather than display:none
. I got that solution from @bobince on the linked answer, however, left:-100%
did not push it completely off the page for me so I changed it to left:-1000%
.
Related Topics
Equal Height Children of Flex Items
Should I Use ≪I≫ Tag For Icons Instead of ≪Span≫
"X-Ua-Compatible" Content="Ie=9; Ie=8; Ie=7; Ie=Edge"
How to Use the "Required" Attribute With a "Radio" Input Field
Base64 Encoded Images in Email Signatures
Force to Open "Save As..." Popup Open At Text Link Click For Pdf in Html
How to Wrap Text Around a Bottom-Right Div
Does Opacity:0 Have Exactly the Same Effect as Visibility:Hidden
How to Use Colspan and Rowspan in HTML Tables
Inputting a Default Image in Case the Src Attribute of an HTML ≪Img≫ Is Not Valid
How to Keep Indent For Second Line in Ordered Lists Via Css
Single VS Double Quotes (' VS ")
How to Use Content-Disposition For Force a File to Download to the Hard Drive
How to Trigger Autofill in Google Chrome
Keep the Middle Item Centered When Side Items Have Different Widths