代码之家 › 专栏 › 技术社区 › Sin

javascript onclick=“return SubmitConfirmation();”提交按钮在chrome中不起作用

google-chrome jquery javascript

Sin · 技术社区 · 6 年前

这在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,则应提交。在chrome中,函数返回true,但提交没有发生。

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

即时通讯使用Chrome,66.0.3359.139(官方版本)(64位)。有虫子吗?:s

3 回复 | 直到 6 年前

Jamiec 6 年前

你在这么做 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>

-1

Bellian 6 年前

你最好使用 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>

-2

Sakata Gintoki 6 年前

在Chrome中 confirm 被解雇前 showLoading() 使命感所以这里的诀窍是将确认代码移动到 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>