подтвердить кнопка отмены не останавливается 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

Вот еще один вариант:

Мы вручную отправляем форму на основе того, что пользователь нажимает в окне подтверждения.

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 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>

если вы используете bootstrap (я предполагаю, что это класс btn btn-dangerous), лучше всего использовать элемент кнопки. И вы можете использовать функцию show hide.

Надеюсь, это вам поможет.

Answer 3

вы также можете написать свой код таким образом, вместо того, чтобы вызывать событие щелчка 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 счетчика на ваш счетчик,

попробуйте здесь скрипку