确认取消按钮不停止 JavaScript

Question

我有一个在单击提交按钮时触发的脚本。 它有一个返回确认 javascript。如果用户点击确定，它工作正常，但如果他们点击取消，它仍然通过连续滚动微调器触发。

请帮忙。

下面是代码片段：

<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

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

 $('#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更改为您的微调器，

在这里试试小提琴

Answer 2

这是另一种选择：

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

 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>

Answer 3

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

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

如果您使用的是引导程序（我假设这是 class btn btn-danger），则最佳做法是使用按钮元素。 你可以使用 show hide function。

我希望这可以帮助你。