My form is :
<script type="text/javascript">
method1(){form.action='first'}
method2(){form.action='second'}</script>
<form if="formID">
<s:submit onclick="method1();" name="upload"/>
<s:textfield name="search" />
<s:submit onclick="method2()"/>
When i press enter key form is submitting with action 'first' . The control is directly going to method1 and submitting. When i press enter key i want control has to go to method2 and form should submit with action 'second'.
How do i can do it?
You can detect which key has been hit.
<s:submit onkeypress="return method2(event)"/>
<script>
function method2(e) {
if (e.keyCode == 13) {
form.action='second';
form.submit();
}
return false;
}
</script>
Or you can use 2 forms, with 2 different submit buttons. But I guess you have more fields that in your code snippet.
Basically you should have only one submit button per form. If you want method2() to call for enter key, you may do a tweak like as, Define first submit as button and leave second submit as submit.
Related
I am working on something little app for sign-in automation.
It is like filling in the sign-in id, password inputs, and then pressing enter to submit.
I tried click(), submit() on the button element, but it's not working.
All I want is just fire the enter key event after filling the inputs, but many source codes are about get the keyboard event which I don't need to.
Is it impossible that press enter key event??
Try this code:
var element = document.getElementById(/* Element */);
element.addEventListener("keydown", fuction(e) {
if(e.key == "Enter") {
// Do something
}
});
You can use HTML form for this. Just wrap your inputs inside form and set onsubmit event. After you fill up the email and pass, enter will trigger the onsubmit.
Here is a simple example:
<form onsubmit="myFunction()">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
function myFunction() {
alert("The form was submitted");
}
</script>
Hope this helps.
Can we run a js function on a submit button and php on the same button. I have a submit button that sends form data to a database using php, but I want a second action (JavaScript function) to take place once the button is clicked as well. Is that possible?
You can add onclick() event to submit button. it will execute before submitting the form.
var buttonClick = () => {
alert("Do what you want to do!"); // Add your second work here
}
<form action="yourfile.php">
<input type="submit" onclick="buttonClick();">
</form>
The correct method is to call the javascript function on the onsubmit attribute in the form with a return state. Thus the form will wait until the JavaScript returns true before proceeding with submit.
The HTML
<form action="something.php" onsubmit="return someJsFunction()">
<!-- form elements -->
<input type="submit" value="submit">
</form>
The JavaScript
function someJsFunction(){
//your validations or code
if(condition == false){
return false; // This will prevent the Form from submitting and lets
// you show error message or do some actions
}else{
return true; // this will submit the form and handle the control to php.
}
}
You can do this with the jQuery submit callback for this
$("form").submit(function(){
alert("Submitted");
});
see. https://www.w3schools.com/jquery/event_submit.asp
We are currently building an application using Dojo Mobile and there are several areas where we have input fields and submit buttons. These input fields and submit buttons do are not in a form, and we just use onclick events to "submit" the values in the fields to be utilized in the javascript. Is there a way to make it so that when we press "enter", or, in the case of mobile applications, when the user presses "search" or "go" on their soft keyboard, it will trigger that particular button? We could potentially have multiple submit buttons on the same page.
...
<div>
<input dojoType="dijit.form.TextBox" />
<button dojoType="dijit.form.Button" type="submit">
Filter
</button>
<div>
...
Place your related fields in a form. Register an "onsubmit" event handler and make it the same as your "onclick" handler for the button. When you return from the event handler, you should either return false or you should call event.preventDefault(). This will prevent the form from being submitted (via POST) to the server.
solution in JQuery:
//when you a key on an input
$("input").keyup(function (e) {
//if it is enter
if (e.keyCode == 13) {
//look for the next submit button a trigger a click
$(this).next("button[type='submit']").click();
}
});
I'm not a dojo-coder but the documentation seems quite good:
http://dojotoolkit.org/documentation/tutorials/1.6/key_events/
http://dojotoolkit.org/api/1.6/dojo/keys/ENTER
see here for related answer:
Enter key press event in JavaScript
http://dojo-toolkit.33424.n3.nabble.com/want-enter-key-in-ValidationTextBox-to-submit-the-form-td977303.html
Overriding the Default Form Submit Action
You can override the default submit action on a form. It's semantically wise to keep your forms within <form> tags, even when you want to override the default behavior, and do what you want, as the strong, independent black woman that you are.
jsFiddle
HTML:
<form id="myForm">
<input type="text" />
<button type="submit">Submit</button>
</form>
JavaScript:
var myForm = document.getElementById('myForm');
myForm.addEventListener('submit',function(event){
alert('submit pressed -- do as you please');
event.preventDefault(); // cancels form submission
});
//Chase.
I am building a site which uses jQUery validation plugin and want things validated before submitting the form. My code looks like follows
<form>
<input type="button" value="Submit the Form" onclick="validateAndSubmit()" />
</form>
<script language="javascript">
function validateAndSubmit(){
//do some validation and then submit
}
</script>
In Firefox, this works perfectly. In Chrome, when I hit enter anywhere in the page, the form submit is triggered and validation doesn't work either. Is there something to avoid this ? Shouldn't the browser not submit a form when we hit an enter if there is no submit button?
use this syntax:
<form onsubmit="return validateAndSubmit()">
...
if you need to catch the return-key maybe you can handle it by binding an keydown event to the input and perform some action on keyCode #13
Try this method:
<form onsubmit="return validateAndSubmit(this);">
<input type="submit" value="Submit the Form"/>
</form>
<script language="javascript">
function validateAndSubmit(form_obj){
if(some_variable == 'correct_value') {
form_obj.submit();
return true;
} else {
alert('Wrong value');
return false;
}
//do some validation and then submit
}
</script>
I'm not sure if there's a standard regarding this or not.
Regardless, you can save yourself the trouble altogether by simply adopting a stronger strategy: implement the validation as an onsubmit action on the form, rather than an onclick action for the button. I almost never use buttons in forms; having to do so for yours would only throw me off, and that's not good for users.
So anyway. Form onsubmit is the way to go. And I'd appreciate it if you used unobtrusive Javascript instead of the HTML attributes :)
<form>
<input type="text" name="sometext">
<input type="button" value="Send" onClick="sendsometext(this.form);">
</form>
How would that be without using the submit button (I don't want it at all), just submitting the form by pressing the Enter key.
EDITED: I don't want to submit the form at all. I just want to type some text in the input field and call the function by the Enter key. Can I do this without JS?
<form>
<input type="text" name="sometext">
<input type="button" value="Send" onClick="this.form.submit">
</form>
Or, from the sendsometext function:
function sendsometext(form){
form.submit();
}
To run the function when the form submits (when the user presses Enter), try the following:
<form onsubmit="sendsometext(this)">
<input type="text" name="sometext">
</form>
If you return false from sendsometext, then the form will not submit.
Edit (Again)
Apparently you don't want to submit the form, all you want to do is let the function process the data and then do something with it. If your sendsometext function returns false, then the form should not submit:
function sendsometext(form){
//do something with the form;
return false;
}
and then the html code:
<form onsubmit="return sendsometext(this)">
<input type="text" name="sometext">
</form>
If this does not work, then please specify what browser you are using, and what happens. Also post a demo page with how you have implemented it. You cannot sumbmit the form to JavaScript without the use of JavaScript (that does not make sense).
Actually, I think you are looking for form.onsubmit
<form onSubmit="sendsometext(this.form);">
<input type="text" name="sometext">
<input type="submit" value="Send">
</form>
I wonder if the OP is missing the basic information that the browser automatically submits the form when you press Enter in any text field inside the form. That's why you can use the onsubmit handler if you want to invoke a method in response to the Enter key, per Marius' and Wogan's answers.
This is how you would create a Javascript function that acts on the the enter key being pressed to submit the form, instead of pressing the submit button.
Edit: On the code below where you see document.forms[0].submit() //submit the form ... You can change this line to point towards your function. That would stop the submission process and instead call your function when you press enter.
From http://jennifermadden.com/javascript/stringEnterKeyDetector.html
<input type="text" onKeyPress="checkEnter(event)">
function checkEnter(e){ //e is event object passed from function invocation
var characterCode;
if(e && e.which){ //if which property of event object is supported (NN4)
e = e
characterCode = e.which //character code is contained in NN4's which property
}
else{
e = event
characterCode = e.keyCode //character code is contained in IE's keyCode property
}
if(characterCode == 13){ //if generated character code is equal to ascii 13 (if enter key)
document.forms[0].submit() //submit the form
return false
}
else{
return true
}
}