I have the following HTML/JS/jQuery Code. This code represents a login form that is presented modally to the user to allow them to login. The problem is, when I hit enter, the form does not seem to execute the "onsubmit" event. When I click the button as the bottom of the form (which has virtually the same code as the onsubmit event), it works perfectly. I am wondering if anyone can tell me why this form isn't submitting..? Any assistance would be appreciated.
jQuery Code to Show Login Modal:
showDivAndFocus('loginModal','loginaccount');
function showDivAndFocus(v,t){
if (api)
if (api.isOpened)
api.close();
api = $('#'+v).overlay({
mask: {color: '#000000'},
top:'0px',
api: true,
autoScrollToActive: false,
autoScrollOffset: 0
}).load();
document.getElementById(t).focus();
}
HTML Code
<div class="modal" id="loginModal">
<h2>User Login</h2>
<br />
<form action="javascript:void(0);" onsubmit="return(doLogin());" name="loginForm" id="loginForm">
<table width="95%" cellpadding="4" cellspacing="4">
<tr>
<td class="regw" align="left"><b>Account Number:</b></td>
<td class="regw" align="left"><input type="text" maxlength="10" size="10" name="loginaccount" id="loginaccount" /></td>
</tr>
<tr>
<td class="regw" align="left"><b>Username:</b></td>
<td class="regw" align="left"><input type="text" maxlength="20" size="20" name="loginusername" id="loginusername" /></td>
</tr>
<tr>
<td class="regw" align="left"><b>Password:</b></td>
<td class="regw" align="left"><input type="password" maxlength="20" size="20" name="loginpassword" id="loginpassword" /></td>
</tr>
<tr>
<td class="regw" align="left"><b>Remember Me:</b></td>
<td class="regw" align="left"><input type="checkbox" name="loginremember" id="loginremember" /></td>
</tr>
<tr><td colspan="2">
<div>
<center>
<table><tr><td width="50" valign="middle">
<div id="loginLoading" style="height:24px;width:24px;"></div>
</td><td>
<button onclick="doLogin();" type="button" class="ok">Submit</button>
</td><td>
<button onclick="api.close();" type="button" class="cancel">Cancel</button>
</td><td width="50"> </td></tr></table>
</center>
</div>
</td></tr>
</table>
</form>
</div>
AJAX Call
function doLogin(){
var ajax = getXmlObject();
var f = getFormVariables();
var url= '/login.php?f=' + encodeURIComponent(f);
if (ajax.readyState == 4 || ajax.readyState == 0) {
ajax.open("POST", url, true);
ajax.onreadystatechange = function () {
if (ajax.readyState == 4) {
var a = ajax.responseText;
if (a=="OK"){...} else {...}
}
};
ajax.send(null);
}
return false;
}
I was struggling with this same issue; one of my forms was submitting when pressing "enter" in the text fields with no problem; another, similar, form on the same page wouldn't submit at all, for the life of me.
Neither field had a submit button, and neither was using javascript to do any submission.
What I found, is that when there is only a single text field in a form, pressing 'enter' in the text field will automatically submit; but if there is more than one (regular (i.e. single-line) text input) field, it does nothing, unless there is also some kind of 'submit' button.
Apparently this is part of the HTML 2.0 specification:
When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.
An old, but apparently still valid, and interesting, further discussion here.
... evidently meant as a convenient way to submit simple queries, but reducing the risk, on a complex form, of prematurely submitting it while trying to fill it in. Numerous browser implementers (e.g Netscape, Opera, various versions of Lynx,...) followed this advice, though it seems with slightly different interpretations.
I made a JSFiddle to demonstrate. As far as I can tell (lazily just testing with Chrome), the form will submit on "Enter" if there's only one text field, or if there's a submit button, even if it's hidden.
(EDIT: I later found that it also does seem work if there are other input fields which are not a regular, single-line text input ... e.g., textareas, selects, etc. -- thanks to #user3292788 for that information. Updated the JSFiddle to reflect this).
<h2>Form with one text field only, no submit button</h2>
<p>Seems to submit automatically when pressing 'enter' in the first text field</p>
<form action="" method="post">
<div>
<label for="pt-search-input">Search</label>
<div>
<input name="term" type="text" placeholder="Example: budapest amsterdam" /> cancel</div>
</div>
</form>
<h2>Form with two text fields, no submit button</h2>
<p>Won't submit when pressing 'enter' in the forms ...</p>
<form action="" method="post">
<div>
<label for="pt-search-input">Search</label>
<div>
<input name="term" type="text" placeholder="Example: budapest amsterdam" />
<input name="term2" type="text" placeholder="Example: budapest amsterdam" /> cancel</div>
</div>
</form>
<h2>Form with two text fields and a submit button ...</h2>
<p>Now it submits with 'enter' key</p>
<form action="" method="post">
<div>
<label for="pt-search-input">Search</label>
<div>
<input name="term" type="text" placeholder="Example: budapest amsterdam" />
<input name="term2" type="text" placeholder="Example: budapest amsterdam" /> cancel
<input type="submit" />
</div>
</div>
</form>
<h2>Form with two text fields and a HIDDEN submit button ...</h2>
<p>Seems to work, even with submit hidden ...</p>
<form action="" method="post">
<div>
<label for="pt-search-input">Search</label>
<div>
<input name="term" type="text" placeholder="Example: budapest amsterdam" />
<input name="term2" type="text" placeholder="Example: budapest amsterdam" /> cancel
<input type="submit" />
</div>
</div>
</form>
<h2>Form with no action or method attribute, HIDDEN submit button ...</h2>
<p>Even this seems to work.</p>
<form>
<div>
<label for="search-input">Search</label>
<div>
<input name="term" type="text" placeholder="Example: budapest amsterdam" />
<input name="term2" type="text" placeholder="Example: budapest amsterdam" /> cancel
<input type="submit" />
</div>
</div>
</form>
<h2>Form with multiple fields, but only one text input, no submit button.</h2>
<p>This seems to work as well.</p>
<form action="" method="post">
<p><input type="text" ></p>
<textarea name="" id="" cols="30" rows="10"></textarea>
<p>
<select name="" id="">
<option value="">Value</option>
</select>
</p>
</form>
You have two choices:
Create an event handler for the enter button and add it to your bindings.
Use an <input type=submit> in the form somewhere, which is what gets the automatic Enter Key behavior you're after.
It can also come from a javascript bind to a <button> in your form. For exemple, if you have
<button id='button'>Reset</button>
<span id="textToReset">some info</span>
<script type="text/javascript">
$('#button').bind('click', function(){
$('#textToReset').text('');
return false;
})
</script>
Your Enter button will be caught somewhere by the return falseand your form won't submit under Enter key. The correct way is to specify that the <button> ACT as a button. This way :
<button id='button' type="button">Reset</button>
and drop the return false you've putted there to prevent that button from submitting a form. ;-)
For the sake of learning, <button> type is by default submit. If you want them to act as control for your form, you must specify the type="button" or type="reset" See w3.org about it
Just in case someone makes the same mistake as me and also comes here looking for an answer:
If you have two (or more) submit buttons1 in your form, hitting enter will only trigger the first submit and not the second.
1 as indicated by #paul-daoust in his comment on the answer of #g-d-d-c: Both <input type=submit> and <button type=submit> will work as a submit button
If you have correct input-submit-button but use (click) event on that button, it will not trigger it on enter. It will submit form but not trigger click event on button, obviously. Putting functionality to form itself and it's submit event will make it work.
I also want to add, that if you have nested <form>'s, then only <input> directly in form will fire submit on enter, input's in nested forms does not work.
<form submit="onSubmit">
<input type="text" name="submits-on-enter" />
<form submit="onSubmitNested">
<input type="text" name="DOES-NOT-submit-on-enter" />
</form>
<button type="submit">SAVE</button>
</form>
Also, make sure there is one and only one submit button in the form.
i.e. a single
<input type="submit">
statement
This is applicable even if you are hiding or showing it using JavaScript.
If for some reason you have multiple submit buttons in your form, the only available approach is to listen to submit events using JavaScript.
When you have more than one button specified in your form, if they dont have the attribute type specified but they have a tabindex with higher precedece, the first of those buttons will be triggered them before thebutton[type=submit]. Therefore, you should add the type=button to such buttons. Ex.:
<!-- inputs -->
<button type="button">action 1</button>
<button type="button">action 2</button>
<button type="submit">Submit form</button> <!-- With "Enter" this one will be triggered-->
There's another reason that's not mentioned in the other answers.
In Google Chrome (but not iOS Safari, etc.) it triggers the click event on buttons and inputs that have type="submit", and if any handler on that event calls preventDefault() (or return false; in jQuery) then it actually cancels the form submit!!
So when you press <Return> while focused in an input element, that's inside a form that has a such a button, please go to the developer console and check out all the Event Listeners. Remove them one by one, and try to press <Return>. If this fixes the issue, you know which event handler messed it up for you.
Took me an hour of debugging to realize this!!
Related
Type="Submit" and type="Button" in element input. How are they different? When I use type="button" then it submits successfully but type="Submit" does not? why is that?
<form class="crush-form">
<div>
<input class="name" type="text" name="name" required />
<label for="">Name</label>
</div>
<div>
<input class="address" type="text" name="address" required />
<label for="">Address</label>
</div>
<div class="lol">
<input
type="submit"
onclick="SubmitClickHandle()"
name="huhu"
value="ggg"
/>
<button onclick="closeDialog()">Close Dialog</button>
</div>
</form>
You have a JavaScript function SubmitClickHandle() that performs the form submission. If you use type="submit", then the form also submits using the default method, which reloads the page and cancels the SubmitClickHandle() code.
You should use type="button" when you've provided your own JavaScript to submit the form, and you don't need the default submission.
If you want to use type="submit", the onclick code should end with return false to prevent the default action:
<button type="submit" onclick="SubmitClickHandle(); return false">
Submit buttons trigger the submission of a form (and when they do, their name and value are included in the submitted form data).
Button buttons don't.
When I use type="button" then it submits successfully but type="Submit" does not? why is that?
Presumably, because your idea of "submits successfully" doesn't involve performing a normal form submission but instead means "Executes the SubmitClickHandle() function without leaving the page".
I have a html form with input fields that require a value before submission and to achieve this I am using the required attribute in html5 Which is shown in the snippet below with the header Form One.
The problem is I'd like to add a confirm pop-up message after the delete button is clicked -- asking if the user wants to continue.
I have done this in the snippet shown below with the header Form Two but the problem is, the required attribute is not showing when the input field is empty and submitted.
The form gets submitted before the required method is triggered. Anyone has any ideas to solve this html5 incompetence?
THANKS
<h2>Form One </h2>
<form method="post" action="example.com" id="delete_page">
Name : <input type="name" required><br>
<input type="button" value="Cancel">
<input type="submit" value="Delete">
</form>
<hr>
<h2>Form Two </h2>
<form method="post" action="example.com" id="delete_page">
Name : <input type="name" required><br>
<input type="button" value="Cancel">
<input type="submit" onclick="confirm('Are you sure you want to submit')" value="Delete">
</form>
Try using onsubmit on your <form> rather than the button.
<h2>Form Two </h2>
<form method="post" action="example.com" id="delete_page"
onsubmit="return confirm('Are you sure you want to submit?')">
Name : <input type="name" required><br>
<input type="button" value="Cancel">
<input type="submit" value="Delete">
</form>
Browser form validation only kicks in on a submit event.
This will also prevent your form from submitting if the user chooses to "Cancel" the popup.
I have an HTML form that has a submit button. I want this button to be disabled when it is clicked. But I also want the form to get submitted.
I am not using ajax request to submit the form. The PHP script that handles the form takes a long time. So some users just click it after a few seconds and the form gets submitted twice which leads to two rows with the same data in the database.
Here's what I tried so far
<form method="POST" action="xyz.php">
<input type="text" name="fields[]" />
<input type="text" name="fields[]" />
<input type="text" name="fields[]" />
<input type="text" name="fields[]" />
<input type="submit" onclick="$(this).attr('disabled', true);" value="Submit" />
</form>
The onclick event on submit button disables the button but it also don't let the form to be submitted. But I want the form to be submitted and also want the button to be disabled.
You May try the below code
onclick="this.disabled=true;this.form.submit();this.value='Submiting...';"
If you're using jQuery, then here's a fully-jQuery, unobtrusively handled version which would work.
If you were to give your form an ID, you could make it handle that form specifically - this example will handle all forms on your page.
$(function() {
$("form").submit(function(event) {
$(this).find('input[type="submit"]').prop("disabled", true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="xyz.php">
<input type="text" name="fields[]" />
<input type="text" name="fields[]" />
<input type="text" name="fields[]" />
<input type="text" name="fields[]" />
<input type="submit" value="Submit" />
</form>
Note that you should use .prop() rather than .attr() to set properties such as "disabled"
(see http://api.jquery.com/attr/).
I'm trying to find the simplest, non-expert-coder solution to displaying a search query.
I have a search form where onclick of the submit button it displays the form value underneath. This is the code:
<input type="text" name="searchfield" id="searchfield" value="" />
<input type="submit" name="submit" id="submitSearch" value="Submit" onclick="document.getElementById('output').innerHTML = document.getElementById('searchfield').value" />
<div id="output"></div>
The page reloads on submit rather than going to another page.
Is there a simple way to manipulate my code do display the value in the output div automatically upon page load, rather than onclick?
So whatever was placed in the search box will automatically be displayed once the page loads after refresh or submit. If nothing was entered, then nothing will show.
There are many ways to achieve this, but this would do the job:
<input type="text" name="searchfield" id="searchfield" value="" />
<button onclick="document.getElementById('output').innerHTML = document.getElementById('searchfield').value">Submit</button>
<div id="output"></div>
And using PHP,
<input type="text" name="searchfield" id="searchfield" value="" />
<input type="submit" name="submit" id="submitSearch" value="Submit" />
<div id="output">
<?php
if($_GET['searchfield'])
echo $_GET['searchfield'];
?>
</div>
I am making an HTML5 page with multiple forms. Each input box has its own submit button to convert the temperature unit into another (Celsius to Kelvin, etc.). What tags or attributes do I need to make the submit button focus when its input box is focused or typed in by the user?
Javascript (made from coffeescript) is used in this file. There is no CSS.
You can use javascript for this
write onfocus="hilight(form_number);" on each input box.
and in your function you can hilight the button
<form name="form1">
<input type="text" onfocus="hilight(1)" />
<input type="submit" id="btn_1" class="button" />
</form>
<form name="form2">
<input type="text" onfocus="hilight(2)" />
<input type="submit" id="btn_2" class="button" />
</form>
<form name="form1">
<input type="text" onfocus="hilight(3)" />
<input type="submit" id="btn_3" class="button" />
</form>
<script>
function hilight(opt)
{
document.getElementById('btn_'+opt).style('','');//you can add any styles to button here
}
</script>
Have you tried using the onblur event of the input box to set the focus to the respective submit?