[英]confirm cancel button not stopping JavaScript
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.
它有一个返回确认 javascript。如果用户点击确定,它工作正常,但如果他们点击取消,它仍然通过连续滚动微调器触发。
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.以下是询问者的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>
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.你也可以这样写你的代码,而不是调用 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>
change h1
of the spinner to your spinner,将微调器的
h1
更改为您的微调器,
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>
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.如果您使用的是引导程序(我假设这是 class btn btn-danger),则最佳做法是使用按钮元素。 And you can use show hide function.
你可以使用 show hide function。
I hope this can help you.我希望这可以帮助你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.