Develop Reference

how to submit form inside the javascript function?

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.

Submit calls function two times

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.

How to create link triggering submit event?

I have the following piece of code:
<form name="ProjectButtonBar_deleteProject_LF_3" action="" method="post">
<a class="buttontext" href="javascript:document.ProjectButtonBar_deleteProject_LF_3.submit()">...</a>
As you can see, clicking the link causes "hard" submit of the form. Instead of this, I would like to trigger submit event. It is so, because in another file there is a code executed in reaction to submit event. With the code shown in this example, this code is being ignored. I can't change the href attribute by hand, beause whole "a" tag is generated by framework.
How should I do this using jQuery? I suppose I have to modify href somehow, but how? Or maybe there is another solution?

Instead of triggering the click event on the submit button, use jQuery to trigger the submit action on the form.
$('form').trigger('submit');
This will trigger any event that's been attached to the form via .on('submit')

Using jquery you can do it easily:
<form name="ProjectButtonBar_deleteProject_LF_3" id="form1" action="" method="post">
<input type="submit" id="btnSubmit"/>
</form>
<a class="buttontext">...</a>
$('.buttontext').on('click',function(e){
e.preventDefault();
$('input#btnSubmit').click();
});
or submit form programmatically:
$('.buttontext').on('click',function(e){
e.preventDefault();
$('form#form1').submit();
});

Spring framework form submit with javascript

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>

Prevent form from refreshing the page

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