确认取消按钮不停止 JavaScript

Question

我有一个在单击提交按钮时触发的脚本。 它有一个返回确认javascript。如果用户点击OK，它可以正常工作，但是如果他们点击CANCEL，它仍然会通过滚动微调器来触发。

请帮忙。

下面是sn-p的代码：

<script>
    //submit search, display loading message
    $('#searchbtn').click(function () {
           
        $('.spinner').css('display', 'block');

    });
</script>
<input type="submit" value="Search" id="searchbtn" class="btn btn-primary btn-block" onclick=" return confirm('Are you sure to proceed')" />

以下是供提问者使用的 HTML。

    <p>
            @using (Html.BeginForm("AllLoanProcessed", "Transactions", new { area = "Transactions" }, FormMethod.Get , new { id = "formID" }))
            {

                <b>Search By:</b>
                @Html.RadioButton("searchBy", "Account_Number", true) <text>Account Number</text>
                @Html.RadioButton("searchBy", "Surname") <text> Surname </text> <br />
                @Html.TextBox("search", null, new { placeholder = "Search Value", @class = "form-control" })
                <br />
                <input type="submit" value="Search" id="searchbtn" class="btn btn-primary btn-block"   />

            }
    </p>

Answer 1

你也可以这样写你的代码，而不是调用两次点击事件，你可以一次调用它，试试我下面的代码，这可能会对你有所帮助。

$('#searchbtn').click(function () {
  var x = confirm("Are you sure to proceed"); //confirm text
  if (x == true) {  //checking wheather user clicked ok or cancel
   $( "form" ).submit();
   $('.spinner').css('display', 'block');  //if clicked ok spinner shown
  } else {  //else if clicked cancel spinner is hidden
    $('.spinner').css('display', 'none'); 
     return false //stops further process
  }
})

.spinner{
  display:none;
}

<form action="javascript:alert( 'success!' );">
<input type="text"/>
<input type="button" value="Search" id="searchbtn" class="btn btn-primary btn-block" />

</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<h1 class="spinner">
my spinner
</h1>

将微调器的h1 更改为您的微调器，

在这里试试fiddle

Answer 2

您需要添加更多代码，这还不够，但我想这可能会对您有所帮助：

    $('#searchbtn').click(function () {
        $('.spinner').show();
        //start code to search
        
        setInterval(function() {
        
        //finish code to search
        $('.spinner').hide();
        
        }, 5000);

    });

    $('#cancelbtn').click(function () {

        $('.spinner').hide();

    });

.spinner{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="spinner"> This is a spinner</div>

<button type="button" class="btn btn-danger btn-block" id="cancelbtn">Cancel</button>

<button type="button" class="btn btn-primary btn-block" id="searchbtn">Search</button>

如果您使用引导程序（我认为这是由 btn btn-danger 类），最佳做法是使用按钮元素。您可以使用显示隐藏功能。

希望对你有帮助。

Answer 3

这是另一种选择：

我们根据用户在确认框中点击的内容手动提交表单

function showSpinner(confirmed) {
    if (confirmed) {
        $('.spinner').css('display', 'block');
        $('#formID').submit();
    }
} 

.spinner{ display: none; }

<input type="button" value="Search" id="searchbtn" class="btn btn-primary btn-block" onclick="showSpinner( confirm('Are you sure to proceed') )" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<h1 class="spinner">My spinner</h1>