Question

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

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

提交表单时，它将直接进入 action.php ，而不触发onsubmit事件。

为什么会这样？

Answer 1

从additionalDetailsForm展开(function ($) { ...，如下所示，然后尝试。

发生的事情是，当您将function包装在(function ($) { ...内时，其作用域将限于该block。而您的return additionalDetailsForm();将尝试查找 additionalDetailsForm函数具有全局范围。因此，在您的情况下，它不起作用。

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

通过以下方式更改jquery方法和其他方法：-

     $(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

有几个问题：

您正在将函数包装在另一个匿名函数中。这意味着您的函数将在匿名函数的范围内定义，并且不会在全局范围内可用。删除功能周围的(function ($) { ... })。
您的函数始终返回true，这意味着将始终提交表单。如果您不希望发生这种情况，则想从该函数返回false或阻止触发表单提交事件。

因此您的代码可以更改为：

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

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

或者，如果您从不希望提交表单：

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

    checkAdditionalInfoInput();
}

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

3 个答案: