confirm cancel button not stopping JavaScript

Question

I have a script that trigger when the submit button is clicked. It has a return confirm javascript. If the user clicks OK, it works fine, but if they click CANCEL, it still triggers by rolling the spinner continuously.

Please help.

Below is the code snippet:

<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')" />

The below is the HTML for those asking.

    <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

you can write your code like this too, instead of calling click event 2 times you can call it at once, try my below code, this may help you.

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

change h1 of the spinner to your spinner,

try it here fiddle

Answer 2

Here is another option:

We manually submit the form based on what the user clicks in the confirmation box

 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

you need to put more code, this is not enough, but I guess this may help you:

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

if you're using bootstrap (I assume this by the class btn btn-danger) the best practice is using an button element. And you can use show hide function.

I hope this can help you.