function called by onsubmit never reached

Question

Probably a daft oversight but I have an HTML form similar to this:

<form onsubmit="updateProfile();">
    <input type="submit" value="Update Account">

    ..
    ...

</form>

And:

function updateProfile() {

    // never gets here

};

I set a breakpoint in the updateProfile() function but when I click the Update Account button it never gets there.

Can anyone give me a likely explanation?

Answer 1

A form without an action attribute is not a form, according to standards - and will actually cause a page reload in some browsers.

To avoid this behavior update from

<form onsubmit="updateProfile();">

to

<form onsubmit="updateProfile(); return false;">

Answer 2

<form id="myForm">
    <input type="submit">
</form>

then in javascript you can do this

$('#myForm').on('submit', function(event){
    event.preventDefault();
    updateProfile();
});

and don't forget to import jquery library :)

Answer 3

It seems i cannot reproduce your issue, look here is it similar?

codepen http://codepen.io/icrosil/pen/bdXyPL

Answer 4

<form onsubmit="updateProfile(event);">
<input type="submit" value="Update Account">

..
...

</form>

function updateProfile(e) {
e.preventDefault();
 alert("it gets here buddy");

};

Answer 5

可能是单击处理程序在文档中的某个位置处于活动状态，捕获单击事件，阻止发生默认操作（返回false或使用event.preventDefault() ），因此submit事件永远不会从表单中触发。