I have a form with multiple submit buttons and I'm listening for the 'submit' event via JavaScript. I want to know which submit button or form field (if the user pressed 'Enter/Return') triggered the submit event. Is there a way to get the HTML element that the user clicked on or pressed 'Enter/Return' in?
Update since people aren't understanding me:
This is via JavaScript before the form is submitted. No server-side detection allowed. I also need to handle the form being submitted via the user pressing Enter or Return.
Code
<form action="" method="POST">
<input type="text" name="first_name">
<input type="text" name="item">
<input type="submit" value="Add item">
<input type="submit" value="Submit">
</form>
Clicking 'Add Item' or pressing Return/Enter inside name="item" will add another form field.
Final Note
As far as I can tell, there isn't a way to detect which form field triggered a form submission. If you need to prevent submitting a form that has multiple buttons and/or from Enter/Return, you'll need to use <input type="button"> and bind event handlers to the form fields you want to stop form submission from.
If you have multiple submit buttons, the way you can tell is by giving each of them a unique name attribute, like this:
<input type="submit" name="submit1" value="Submit 1"/>
<input type="submit" name="submit2" value="Submit 2"/>
<input type="submit" name="submit3" value="Submit 3"/>
The one that is focused is sent along with the form submit, so if you clicked the one with a name of "submit2", that would come through in the form POST (or GET). If enter is hit, the first button in the source (in this case submit1) is considered the default and is sent along. You could set it to display:none to use as a dummy for detecting whether enter was pressed vs actually clicking a submit button.
EDIT:
In response to your comments, to capture the enter key getting pressed in certain elements you can do this with jQuery.
Note, you'll need to give first_name and add_item id attributes, and turn add_item into a type="button" instead of type="submit".
HTML:
<form action="" method="POST">
<input type="text" name="first_name"/>
<input type="text" id="item" name="item"/>
<input type="button" id="add_item" value="Add item"/>
<input type="submit" value="Submit"/>
</form>
JS:
$("#item").keydown(function(event){
if(event.keyCode == 13) {
addFields();
event.preventDefault();
event.stopPropagation();
}
});
$("#add_item").click(function(event) {
addFields();
});
You could set the onclick event on each element you are interested and call a javascript function with a different parameter for each element clicked.
From that function you send the idendifier of the button to the server side as a parameter
Just put a different name on each submit button, whichever one was clicked will be submitted (i.e. its name/value pair) with the form. Forms have worked like this since the begining of (WWW) time.
If the form is sumitted by enter or other keypress, no the first submit button name/value pair will be submitted.
Edit
Re-reading your question, you may want to determine how the form was submitted before it is sent. A click listener on the form can remember the last submit button clicked, but in Firefox, pressing enter in an input dispatches a fake click on the first submit button so you can't detect it.
I think you can't do it reliably other than using the basic method suggested above or Jordan's hidden submit button. If you say why you need to do this, perhaps more help can be provided.
here's an option if you don't mind using jQuery:
example: http://jsfiddle.net/U4Tpw/
use something like
$('form').submit(function() {
// identify the form by getting the id attribute
handleWhichForm($(this).attr('id'));
});
Related
I want to server-render an HTML form in such a way that it is not submittable until it has been asynchronously enhanced by my JavaScript.
It looks like there's no disabled attribute for the form element (MDN).
I could add a disabled attribute to the submit button (and then later remove this with JavaScript when ready), but the user could still submit the form by focusing any input and pressing Enter.
Is there any way to prevent submission without JavaScript (short of just hiding the form entirely in the server-rendered HTML, and unhiding it with JS)?
use type="button" attribute to your submit button and then change it to type="submit"
You can simply do
onsubmit="return false"
on the form tag:
<form onsubmit="return false">
<label>input
<input type="text" name="input" name="a" />
</label>
<input type="submit" value="submit" />
</form>
Sorry, answering my own question - it turns out it's easy to make a form unsubmittable (in Chrome 69 at least) just by disabling the submit button.
When the only submit button is disabled, then even focusing a text field and pressing Enter does not submit the form.
I have the following HTML form, which allows a user to optionally save a custom label for their product.
<form action="http://domain.com/members/systems" method="post" class="mod-SystemLabel-EditForm">
<label class="mod-SystemLabel-EditLabel" for="label-623">Customer label</label>
<input type="text" value="sdff sdf sd" name="fields[customer-label]" class="mod-SystemLabel-EditInput" id="label-623">
Clear
Cancel
<input type="submit" value="Save" name="action[system-edit-label]">
<input type="hidden" value="623" name="id">
</form>
If I manually clear my text input and submit my form, Symphony CMS records the empty value as expected.
If I use jQuery to trigger the form submission as below, Symphony CMS leaves (or re-saves?) the current value as it was.
$('.mod-SystemLabel-OtherButton-clear').click(function(e) {
e.preventDefault();
$(this).siblings('.mod-SystemLabel-EditInput').val('');
//alert($(this).closest('form').serialize());
$(this).closest('form').submit();
});
If I uncomment the commented line, the alert contains:
fields%5Bcustomer-label%5D=&id=623
This serialization is the same as what is produced when I backspace the input myself, so it looks like the actual form submission should be the same as a manual input clearing and click of the submit button.
The Symphony field is not set to be required and does not have any validation rules.
Why is the end result different and how can I get the empty value to be saved, overwriting the previous product label?
The form’s submit input’s name is not passed when the form is submitted via JavaScript, and Symphony CMS uses this to trigger the appropriate event.
To get the event name passed along with the submit input, trigger a “click”.
$('.mod-SystemLabel-OtherButton-clear').click(function(e) {
e.preventDefault();
$(this).siblings('.mod-SystemLabel-EditInput').val('');
$(this).siblings('input[type=submit]').trigger('click');
});
How can I specify which submit button to submit with?
The current example just submits the first submit button, with $("form").submit(); but how can I make it so it chooses the submit button by id or name?
<html>
<script>
$("form").submit();
</script>
<form action="<?=$_SERVER['PHP_SELF']?>" method="post" />
//other inputs
<input type="submit" value="Enter" name="enter" id="enter">
<input type="submit" value="Void" name="void" id="void">
<input type="submit" value="Refund" name="refund" id="refund">
</form>
</html>
Simulate a click to that element:
$("#circle2").click();
Also, you don't need action="<?=$_SERVER['PHP_SELF']?>". Forms submit to the current page by default.
First of all, why do you want to submit the same form with 3 different buttons?
It is a bad structure. Your code also has all the 3 buttons with the "id" attribute which is included in the <input> tag twice.
Based on your question, I could figure out you would want the submit button to say different things under different conditions.
Have a single button like this :
<input type="submit" name="submit" value="Enter">
You could always change what your button says, or how it looks like with JQuery :
if(condition){
$('#submit').val('.....');
// You can also change more stuff as you want.
}
Then you would want to submit the form
$('#submit').click(function(e)){
e.preventDefault();
$('form').submit();
}
By id
You can select the element by id easily with $('#my_btn') and you can click on it using the jQuery method click().
By name (or any other attribute
Other attributes are a bit harded (but not complex)
You select the element with $('input[name=some_name]')
Examlpe using your code
Here is an example which shows how you can get elements by name and click on them, click the submit buttons to see what happens: http://jsfiddle.net/nabil_kadimi/99v93/2/
Keep in mind that the user does NOT have to click the submit nput. They could tab over to it and push enter.
So considering all ways a form can be submitted, how can you determine which one was used to submit the form inside the submit event. I have different names on the two submit elements.
Any action that triggers a submit button — be it an actual mouse click or some keyboard action — still triggers a "click" event and still causes the input to be included as a form parameter.
That is, if you see a form parameter with your input field's name and value, you know that that submit button was clicked.
edit — if the form submit happens because you hit "Enter" in a text field, the browser picks the first submit button (I think; that seems to be what Firefox does at least). (Wait; scratch that; Firefox seems to find the next "submit" input after the element that had focus when "Enter" was pressed ...)
Thus:
<form action='whatever' method='post'>
<input type='text' name='text'>
<input name='submit1' value='submit1' type='submit'>
<input name='submit2' value='submit2' type='submit'>
</form>
Hitting "Enter" in the text field would result in "submit1=submit1" being a form parameter, as would hitting "Enter" when "submit1" had focus. Tabbing to "submit2" and hitting "Enter" would result in "submit2=submit2" being among the parameters.
In either case, only one of the "submit" inputs shows up in the parameter list.
Instead of using different names, use different values, e.g:
<input type="submit" name="submit" value="Submit A">
<input type="submit" name="submit" value="Submit B">
You can also use buttons instead of inputs if you'd like the labels to be different from the values.
I have a form that has two submit buttons. I want to submit the form manually using JavaScript and have the input button used to submit the form posted along with the other form elements, as it would be if the form was submitted automatically. There's quite a lot of chatter on this subject, but I can't find an answer.
<form method="post" action="echoToScreenAndLog.jsp" id="form1">
<input id="field1" name="field1"/>
<input type="text" size="20" id="field2" name="field2"/>
<input type="submit" value="Do One" name="sub1_name" id="sub1_id"/>
<input type="submit" value="Do Two" name="sub2_name" id="sub2_id"/>
</form>
When the form is submitted above using the "Do One" button, the posted parameters are field1="xxx", field2="yyy", sub1_name="Do One".
But I want to submit the form manually...
<form method="post" action="echoToScreenAndLog.jsp" id="form1">
<input id="field1" name="field1"/>
<input type="text" size="20" id="field2" name="field2"/>
<input type="submit" value="Do One" name="sub1_name" id="sub1_id"/>
<input type="submit" value="Do Two" name="sub2_name" id="sub2_id"/>
</form>
<script type="text/javascript">
var btn = document.getElementById('sub1_id');
btn.onclick=function() {
return mySubmit(document.getElementById('form1'), ...);
}
</script>
but doing a manual submission of the form in the mySubmit function does not post the sub1_name parameter. I can understand that - I've bypassed the submission so the form is not being submitted using the buttons and therefore it makes no sense to post a parameter representing the button used to submit the form.
When I look at the elements of the form in the onclick handler, I can see both buttons. I'm not overly surprised by that either, they are elements on the form after all, but what I don't get is that if I add an element inside my onclick handler then the element I add IS posted and the two original submit buttons are not posted. Just to complete the picture, here's the code that adds the element:
<script type="text/javascript">
var btn = document.getElementById('sub1_id');
btn.onclick=function() {
var f = document.getElementById('form1');
var s = document.createElement("input");
s.type="hidden"; s.name="xsubmit_name"; s.value="Bob"; s.id="xsubmit_id";
f.appendChild(s);
// s gets posted
return mySubmit(f, ...);
}
</script>
Adding the input element could work for me, but I'm confused how the browser knows to post my added element and not the original two input elements.
Thank you.
The specification says that the first step for form submission is:
Step one: Identify the successful controls
"Successful controls" are defined as:
A successful control is "valid" for submission. Every successful control has its control name paired with its current value as part of the submitted form data set. A successful control must be defined within a FORM element and must have a control name.
However:
...
If a form contains more than one submit button, only the activated submit button is successful.
Since none of the submit buttons are activated, none are sent. Hidden input elements, on the other hand, are valid and will just be submitted along. Note that you add the hidden elements before calling mySubmit(), so at the time the above steps are executed (i.e. during submit), the hidden element is just another successful control part of the form, and thus sent.
may use
var btn = document.getElementById('sub1_id');
btn.onsubmit=function() {
return false;
}
btn.onclick=function() {
var f = document.getElementById('form1');
var s = document.createElement("input");
s.type="hidden"; s.name="xsubmit_name"; s.value="Bob"; s.id="xsubmit_id";
f.appendChild(s);
f.submit()
}