When I submit the form with Enter, it works without any problems. I can successfully log in. When I submit the form with a button, it logs in successfully on Firefox, but not on Chrome. The problem is, it repeats the function twice and sends a different hashed password. How can I make it to work on Chrome too?
Button:
<div id="submit" name="submit" value="login" class="ui fluid large pink submit button" onclick="submitForm();">Login</div>
Form:
<form id="form" autocomplete="off" class="ui large form" id = "form" name="form" method="post" action="php/verify.php" onsubmit="submitForm();">
I added onsubmit="submitForm();" to form, to call the function even when I submit the form with Enter.
Javascript function:
function submitForm(){
var form = document.getElementById("form");
var pwd = document.getElementById('pwd');
var hash = new jsSHA("SHA-256", "TEXT", {numRounds: 1});
hash.update(pwd.value);
var hash = hash.getHash("HEX");
var password = document.createElement("input");
password.name="password";
password.type="hidden";
password.id = "password";
password.value = hash;
alert(password.value);
form.appendChild(password);
form.submit();
pwd.value = "";
}
In your onsubmit handler, you're submitting the form:
form.submit();
If you do that, the handler has to return false, which means you need
<form ... onsubmit="submitForm(); return false;">
Otherwise you will submit the form manually, then the browser will submit it a second time, since onsubmit didn't return false;
You have two submits:
onsubmit="submitForm();" and onclick="submitForm();"
remove one of them
I can see two possible causes:
1- You have two handlers installed: onSubmit and onClick. Instead, leave the onSubmit handler and use a button with submit type:
<form onsubmit="submitForm()">
<input type="submit"> <!-- this is equivalent to pressing enter -->
<button type="submit"></button> <!-- also equivalent -->
</form>
2- If you're going to manually submit the form in the event handler, you should stop the default behavior from taking place, which could account for the 2nd (unprocessed) submit:
function submitForm(event) {
event.preventDefault()
}
Remove onsubmit="submitForm(); from the <form> tag and create the <input type="submit" onclick="submitForm();> inside the <form> tag.
You can use an input control (type=submit) instead of a div for the login button.
That is something like this:
<input type="submit" value="Login" class="ui fluid large pink submit button"/>
So the onsubmit call will be enough.
Related
I'm trying to set a element to disable after clicking (after submitting the data). The issue is, when I use the javascript to disable on click, the button is disabled, but does does not submit the information.
function disableButton(btn) {
document.getElementById(btn.id).disabled = true;
alert("Button has been disabled.");
}
<center><button type="submit" id="btn1" name="Submit" onclick="disableButton(this)">Submit</button></center>
Does anyone know how to fix this? I'm not very experienced. I've had it work with the a form, but not as a element.
Thanks.
Try to delay the disabling with a timeout 0. This should disable the button at the end of script's lifecycle, allowing the form to post before :
function disableButton(btn) {
setTimeout( () => {
btn.disabled = true;
}) // No need to set a duration for the timeout
}
<form>
<button type="submit"
onclick="disableButton(this)"
action="/test">Submit</button></form>
Now if you check your console, you see a GET request being made.
Also, <center> is deprecated and not supported in HTML5.
Why don't you try putting the disable function on the form?
Here's the code and site if you are:
** https://www.the-art-of-web.com/javascript/doublesubmit/ **
<form method="POST" action="..." onsubmit="myButton.disabled = true; return true;">
<input type="submit" name="myButton" value="Submit"> </form>
Also, try to use onsubmit.
If you are using js validation you can use this
<form method="POST" action="..." onsubmit="return checkForm(this);">
...
<input type="submit" name="myButton" value="Submit">
</form>
<script type="text/javascript">
function checkForm(form)
{
//
// validate form fields
//
form.myButton.disabled = true;
return true;
}
</script>
If you use addEventListener, you won't have this problem See below for an explanation and examples. Also note that this is a Chrome/Safari specific bug from what I have tested.
What you were doing disables the button during the processing of the click. When the browser checks if it should submit the form, it doesn't (though I haven't found something that says it should in the standard).
If you handle it in the submit event of the form, the check on whether the button was disabled has already passed.
Disables using onclick so you still see it here in this example.
<form>
<button type="submit" action="/test" onclick="this.disabled = true">Submit</button>
</form>
Disables it in the onsubmit handler, so it disappears here in this example.
<form onsubmit="this.querySelector('button').disabled = true">
<button type="submit" action="/test">Submit</button>
</form>
However, as I worked on a version without inline handlers, I realized the (seemingly incorrect) behavior cannot be reproduced when done that way.
I would suggest you use JS event handlers and you should handle the submit event since it is more accurate semantically (and even using addEventListener does not fix the problem in Safari).
function queryRegister(query, eventName, handler) {
document.querySelector(query).addEventListener(eventName, handler);
}
queryRegister("#click-handler-form button", "click", (e) => {
e.target.disabled = true;
});
queryRegister("#submit-handler-form", "submit", (e) => {
e.target.querySelector("button").disabled = true;
});
Both submit without inline handlers
<hr />
button.onclick
<form id="click-handler-form">
<button type="submit" action="/test">Submit</button>
</form>
form.onsubmit
<form id="submit-handler-form">
<button type="submit" action="/test">Submit</button>
</form>
If <button type="submit"> tag is not inside <form></form> there is nothing to submit. <button type="submit"> submits only it's parent <form>
Try to submit the form with Javascript.
function disableButton(btn) {
document.getElementById(btn.id).disabled = true;
document.getElementById('formId').submit();
alert("Button has been disabled.");
}
I'm trying to manipulate form submission with couple of submit buttons using jQuery. The code goes like this:
<form id="cf" action="" method="POST" target="">
<button id="preview">Preview</button>
<button name="submit" id="submit">Save</button>
</form>
<script>
$("#preview").on("click",function(e) {
$(this).attr('name','submit');
e.preventDefault();
$("#cf").attr({
'action':'/preview/',
'target':'_blank'
}).submit();
});
</script>
Changing attribute values seemed to work when "Preview" button is clicked, but it doesn't submit. What's wrong with the code?
Every form has a submit function attached to it, it's referenced as form.submit.
When you name something inside the form submit it too is attached to the form, and it overwrites the native form.submit so the form can no longer be submitted with the submit function.
Rename the button to anything other than submit, and remove the line that sets the name to submit
<form id="cf" action="" method="POST" target="">
<button id="preview">Preview</button>
<button name="my_submit" id="my_submit">Save</button>
</form>
<script>
$("#preview").on("click",function(e) {
e.preventDefault();
$("#cf").attr({
'action':'/preview/',
'target':'_blank'
}).submit();
});
</script>
Hey I am trying to use a form to submit data via JavaScript but it keeps refreshing the page when I don't want it to.
My form is like this:
<form name="myForm" method="post">
<input type="text" name="name"/>
<input type="submit" name="add" value="Add Resource" onclick="insert(); return false;"/>
</form>
My JS function has:
function insert(e){
e.preventDefault();
var name = document.myForm.name;
console.log(name);
}
I was told prevent default is how you stop the default action of the form but it still happens for me. How do I fix it ?
You're not passing in e though. Instead, it would be better to bind to the form with JavaScript rather than using an attribute:
document.querySelector('[name=myForm]').addEventListener('submit', function (e) {
e.preventDefault();
});
You could also bind to the click event of the submit input
I have two submit buttons on the same form in JSP page, one of each appear in the form depending on the case.
The problem is that one of the submit buttons submit the form, and the other does not .
here's the HTML form
<form name="stdActivationForm" id="stdActivationForm" action="ParentManagementServlet" method="post" onsubmit="return validateStudentActivationForm()">
<input class="${isActivated? 'hideDiv':'showDiv'}" type="submit" value="confirm" name="submit" onclick="submitForm('add')"/>
<input class="${parent != null? 'showDiv':'hideDiv'}" type="submit" value="update" name="submit" onclick="submitForm('update')"/>
</form>
and here's the javascript function
function submitForm(btnName)
{
var form = document.getElementById("stdActivationForm");
if (btnName =='add')
document.form.submit();
else if(btnName =='update')
document.form.submit();
}
I think your JavaScript function needs to return true.
Alternatively you can just remove the onclick reference and it should work with just type="submit".
Good luck.
Get rid of the onclick. You don't need it here. The type="submit" already submits the form. Your concrete problem is likely caused because the onsubmit of the <form> has returned false.
Try changing the input type of the buttons to "button" and the method to:
function submitForm(btnName)
{
// skip validation for updates, remove btnName =='add' && when it is working
if (btnName =='add' && !validateStudentActivationForm())
{
return;
}
document.forms["stdActivationForm"].submit();
}
Both buttons are currently submitting to the same Servlet anyway.
<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
}
}