確認取消按鈕不停止 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。

我希望這可以幫助你。