I'm struggling this submit form after clicking the submit button where the submit button is outside the form. Submit button has a click listener which will perform function and I want to submit the form inside the function of the button.
Here is my code..
HTML...
<form action="quiz_insert.php" method="POST" id="myform">
<input type="hidden" name="checking" id="myScore">
<button form="myform" id="submit">Submit Quiz</button></br>
</form>
and here is the function inside the javascript.
(function() {
function redirect() {
//JSON.stringify(checkAnswer) is generated in another function.
document.getElementById("myScore").val("MYSCORE");
document.getElementById("myform").submit();
}
const submitButton = document.getElementById("submit");
submitButton.addEventListener("click", redirect);
})();
Any help is much more appreciated.
Associate the button with the form. You can do that with the form attribute:
<button form="myform" id="submit">Submit Quiz</button>
… it would be better to just put the submit button inside the form in the first place though.
Related
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.
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>
I want to submit a form , but before submitting it , I want to invoke a button
that calls a JS function :
<input name="" type="submit" value="SEND"> // <----- submit this later
<button type="button" id="button" onClick="validateForm()">SEND THIS BEFORE</button> // <<-- call this before submitting the form
Is there a way to combine there together ?
Thanks
Try this, Wrap it around a form tag and add an onsubmit attribute.
<form onsubmit="validateForm()">
<input type="submit" value="SEND"/>
</form>
Inside your onclick function you just need to use the .submit() inside the function to send your form whenever you need it to.
You can do various things, such as:
$("#form").on("submit", function(){
// do stuff here
});
Or
$("#button").on("click", function(){
// do stuff here
$("#form").submit();
});
I'd like to submit the update form with javascript.
I made them as follows:
<form:form id="update" method="post" action="/profile/update/${uname}">
</form:form>
I add this below on top menu.
<button type="submit" class="save"></button>
I want to submit this update form through save button within top menu which is not included in form.
How can I submit this form with javascript at outside of form?
Try invoking this submitForm() function from your button.
<script type="text/javascript">
function submitForm()
{
document.update.submit();
}
</script>
Try to get the form element by id in your javascript method and add this method as onclick for your button.
<script type="text/javascript">
function submitForm()
{
document.getElementById("update").submit();
}
</script>
Change your button tag like this
<button type="submit" class="save" onClick="submitForm();"></button>
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