We Keep Coding

Any attributes to ensure an HTML form can't be submitted?

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.

Why is Symphony CMS not saving the empty input value as such when submitting form via jQuery?

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 do you determine which submit was used to submit a form with jQuery?

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.

How do I detect how a form was submitted via JavaScript?

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'));
});

How to trigger onclick function when user inputs keywords? Jquery

I have an input box
<input type="text" name="search" id="search" />
<img src="icon.png" alt="" id="doSearch" />
I use Jquery and I have onclick event for "doSearch". So when I enter some words like "ab" .. and click on "icon" It sends an ajax request to php file and gets results back appended to dom.
$('#doSearch').click(function() {
$(".showResults").show("fast");
var input_text = $('input[name="search"]').val(); //retrieve text
$.ajax({
method: "get" ...
... some more lines
}) etc etc
I am wondering how can I trigger onclick function automatically, when some characters are entered in the input box so that users dont have to click on image icon to get the results. Also, how I can set focus on the image icon when I press tab key while in the input box.
Thanks a lot for your help.
EDIT:
I have some other input boxes in the same form as well. So this input acts as somewhat similar to stack overflow tags input.

Something like that?
$('#doSearch').keyPress(function(e){
if($(this).val()=='??') $('#doSearch').trigger('click')
});

The proper way to do it would be to do this:
<form id='search'>
<input type="text" name="search" id="search" />
<input type="image" src="icon.png" />
</form>
That way the image will be the submit button of the form, and whenever a user presses enter the form's submit event will be fired and you can do what you want.
This is how you could do the jQuery:
$('#search').submit(function() {
// do what you were doing
return false; // prevent form submission
});
This will also have the upside of being friendly to people with Javascript disabled, as you could then check in the server if it is not an AJAX request and perhaps display the full page with the requested content instead. I am pretty sure this will also make it so that TAB goes to the image as well.