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中，如果我有第二个检查，它将无法工作。我无法弄清楚这里有什么问题。

功能＆＃39; SubmitConfirmation＆＃39;将返回true / false。如果是真的，它应该提交。在chrome中，函数返回true，但提交没有发生。

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

我正在使用Chrome，66.0.3359.139（官方版本）（64位）。任何Bug？：■

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中，confirm在showLoading()来电之前被解雇了。因此，这里的诀窍是将您的确认代码移到setTimeout()函数中以缩短时间。

顺便说一下，return

中你不需要onclick="return SubmitConfirmation();"

＆＃13;

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");
    }

＆＃13;

#divProcessing {
  display: none;
}

＆＃13;

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

＆＃13;

javascript onclick =＆＃34; return SubmitConfirmation（）;＆＃34;提交按钮不在chrome中工作

3 个答案: