submit function does not trigger onsubmit return function?

Question

I think I have a misunderstanding of the onsubmit attribute. I thought that every submission, like a <input type="submit" ...>, <button></button> or any javascript form.submit() trigger the onsubmit="return function();" after the submit. In other words, I will never see the "last triggered" log.

Example:

function triggerFirst() {
 console.log("first triggered");
 myForm.submit(); 
}
function triggerLast() {
 console.log("last triggered");
 return true;
}

<form id="myForm" onsubmit="return triggerLast();">
 <input type="button" onclick="triggerFirst();" value="trigger">
</form>

This example will never trigger the onsubmit, why? I thought onsubmit means if someone submits? Is that false?

• adeneo: Probably because submit() is not defined is an error
• Algore87: My mistake. I have added an id to access the form through it explicitly. But no other behavior.

Answer 1

It works.

UPDATED: Place the 2nd function inside first.

function triggerFirst() {
 alert('wow'); 
triggerLast() 
}
function triggerLast() {
alert('wowpsubmit');
 return true;
}

<form id="myForm" onsubmit='return triggerLast();'>
 <input type="button" onclick="triggerFirst();" value="trigger" >
</form>

• Algore87: add a myForm.submit(); into your triggerFirst() function and add an alter('wow') to your triggerLast(). Then you dont see the second 'wow', so it doesn't work. My example is not the best, I mean you do something in triggerFirst and only on some cases you want to triggerLast() as a second validation. Your example will never trigger triggerLast() because input does not submit automatically or?
• Algore87: that will work for this example, but its a workaround. I thought the form.submit() will explicity call the onsubmit="return function();". But it seems that only <input type="submit" ...> or <button onclick="first();"></button>will call it. But then you dont have the connection between the two functions.
• Herman Nz: sorry, I still don't get what you mean
• Algore87: no problem, probably I explained it vague. see @Rupert 's answer at the bottom. He is exactly doing what I mean, but if I run it, then the submit() function will submit the form, without checking the onsubmit="return function()".

Answer 2

An HTML form does not require javascript to work. Refer the code below:

<form action="action_page.php">
 First name:<br>
 <input type="text" name="firstname" value="Mickey"><br>
 Last name:<br>
 <input type="text" name="lastname" value="Mouse"><br><br>
 <input type="submit" value="Submit">
</form>

The <form action="action_page.php"> declaration is run once the form is submitted.

The <input type="submit" value="Submit"> is a built in type that triggers the form action to run.

See more here

Answer 3

In your triggerFirst function the inner function call to submit does nothing. That submit function is not defined. I think here you want to make the function submit so below I passed a reference to the form into the triggerFirst function. This should clarify things for you. Open the console to view the output.

function triggerFirst(form) {
 console.log('triggerFirst')
 console.log(form);
 form.submit();
}
function triggerLast() {
 console.log('triggerLast')
 return true;
}

<form onsubmit="return triggerLast();">
 <input type="button" onclick="triggerFirst(this.form);" value="trigger">
</form>

• Algore87: thats exactly what I try to do, but I will never see the triggerLast log :-/. If i debug it, the form will submit after form.submit() and never steps into the triggerLast()