javascript onclick =“ return SubmitConfirmation（）;”的提交按钮不适用于chrome

Question

这在Firefox中起作用，而在chrome中不起作用。 这个问题看起来很奇怪。

我有一个提交按钮，如下所示，该按钮调用javascript函数根据一些检查进行一些确认和提示。

 <input type="submit" value="Submit" class="btn btn-default" onclick="return SubmitConfirmation();" />

Java脚本功能如下

  function SubmitConfirmation() {
        showLoading();

        var total = 0;
        $(".table-success").each(function () {
            total += parseFloat($("input[id$='price']", this).val());
        });

        if (total > 50000)
            alert("Please attach details!");

        var _userConfirm = confirm('Do you want to continue?');

        // if the below 'if statement' is not there, everything works as expected.
        if (_userConfirm != true)
            hideLoading();

        return _userConfirm;

    }


    function showLoading()
    {
        $("#divProcessing").show();
        $("input[type=submit]").attr("disabled", "disabled");
    }
    function hideLoading()
    {
        $("#divProcessing").hide();
        $("input[type=submit]").removeAttr("disabled");
    }

在mozilla中，以上脚本可以正常运行。 但是在chrome中，如果我有第二个if检查，它将无法工作。 我无法弄清楚这里出了什么问题。

函数“ SubmitConfirmation”将返回true / false。 如果为true，则应提交。 在chrome中，函数返回true，但是提交没有发生。

if (_userConfirm != true)
//tried to use 
if(!_userConfirm)

我正在使用Chrome 66.0.3359.139（正式版）（64位）。 有任何错误吗？ ：s

Answer 1

你这样做onclick一个按钮-它应该是onsubmit形式，没有进一步的变化

<form onsubmit="return SubmitConfirmation();">

实时示例： https ： //jsfiddle.net/y8d3t5cb/2/

或在两种浏览器中尝试以下方法。

 function SubmitConfirmation() { showLoading(); var total = 0; $(".table-success").each(function () { total += parseFloat($("input[id$='price']", this).val()); }); if (total > 50000) alert("Please attach details!"); var _userConfirm = confirm('Do you want to continue?'); // if the below 'if statement' is not there, everything works as expected. if (_userConfirm != true) hideLoading(); return _userConfirm; } function showLoading() { $("#divProcessing").show(); $("input[type=submit]").attr("disabled", "disabled"); } function hideLoading() { $("#divProcessing").hide(); $("input[type=submit]").removeAttr("disabled"); } 

 #divProcessing{ display:none } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form onsubmit="return SubmitConfirmation();"> <table class="table-success"> <tr> <td><input id="some_price"></td> </tr> </table> <input type="submit" value="Submit" class="btn btn-default" /> </form> <div id="divProcessing"> Processing </div> 

Answer 2

您最好使用element.addEventListener()因为在大多数情况下它更加可靠https://www.w3schools.com/jsref/met_element_addeventlistener.asp

 document.querySelector('#my-submit').addEventListener('click', function(event){ if(SubmitConfirmation()){ return; }else{ event.preventDefault(); return; } }) function SubmitConfirmation() { showLoading(); var total = 0; $(".table-success").each(function () { total += parseFloat($("input[id$='price']", this).val()); }); if (total > 50000) alert("Please attach details!"); var _userConfirm = confirm('Do you want to continue?'); // if the below 'if statement' is not there, everything works as expected. if (_userConfirm != true) hideLoading(); return _userConfirm; } function showLoading() { $("#divProcessing").show(); $("input[type=submit]").attr("disabled", "disabled"); } function hideLoading() { $("#divProcessing").hide(); $("input[type=submit]").removeAttr("disabled"); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input type="submit" id="my-submit" value="submit"> </form> 

Answer 3

在Chrome中，在showLoading()调用之前触发了confirm 。 因此，这里的窍门是将您的确认代码移到setTimeout()函数中以节省时间。

顺便说一句，你并不需要return的onclick="return SubmitConfirmation();"

 function SubmitConfirmation() { showLoading(); var total = 0; $(".table-success").each(function () { total += parseFloat($("input[id$='price']", this).val()); }); if (total > 50000) alert("Please attach details!"); setTimeout(function() { var _userConfirm = confirm('Do you want to continue?'); // if the below 'if statement' is not there, everything works as expected. if (!_userConfirm) { hideLoading(); } return _userConfirm; }, 200); } function showLoading() { $("#divProcessing").show(); $("input[type=submit]").attr("disabled", "disabled"); } function hideLoading() { $("#divProcessing").hide(); $("input[type=submit]").removeAttr("disabled"); } 

 #divProcessing { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="submit" value="Submit" class="btn btn-default" onclick="SubmitConfirmation();" /> <div id="divProcessing">Loading...</div>