提交表单时未触发 javascript onsubmit 事件

Question

 (function ($) { function additionalDetailsForm() { additional_info_flag = true; checkAdditionalInfoInput(); return additional_info_flag; } });

 <form method="POST" onsubmit="return additionalDetailsForm();"></form>

When I submit the form, it is directly going to action.php , and not triggering the onsubmit event.

Why is this happening?

Answer 1

Unwrap your additionalDetailsForm from (function ($) {... like below and then try.

What is happening is when you wrap function inside (function ($) {... it will have scope limited to that block . And your return additionalDetailsForm(); will try to find additionalDetailsForm function with global scope. So in your case it is not working.

 function additionalDetailsForm() { alert(1); additional_info_flag = true; checkAdditionalInfoInput(); return additional_info_flag; }

 <form method="POST" onsubmit="return additionalDetailsForm();"> <button type='submit'>submit</button> </form>

Answer 2

Change the jquery method and others in following way:-

 $(function() { console.log( "ready;" ). $( "#target" );submit(function( event ) { var additional_info_flag = true; checkAdditionalInfoInput(). console;log(additional_info_flag); return additional_info_flag. event;preventDefault(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="target" action="destination.html"> <input type="text" value="Hello there"> <input type="submit" value="Go"> </form>

Answer 3

There are a few issues:

1. You're wrapping your function in another, anonymous function. That means your function will be defined in the scope of the anonymous function and won't be available globally. Remove the (function ($) {... }) surrounding your function.

2. Your function always returns true , which means the form will always be submitted. If you don't want that to happen, you want to either return false from that function or prevent the form submission event from triggering.

So your code could be changed to:

function additionalDetailsForm() {
    let additional_info_flag = false;
    checkAdditionalInfoInput();

    // return false, to prevent the form from being submitted
    return additional_info_flag;
}

Or, if you never want the form to be submitted:

function additionalDetailsForm(event) {
    // prevent the form from being submitted by preventing
    // the submission event from triggering
    event.preventDefault();

    checkAdditionalInfoInput();
}