Develop Reference

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

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

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.

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>

On 'Cancel' confirm() still allows form to submit

function next() {
return confirm('Are you sure you want to Foo');
}
<form method="GET" action="/foo" onsubmit="next()">
<input type="hidden" name="delete" value={{$foo} />
<button class="btn btn-warning" type="submit"> Foo</button>
</form>
I am trying to give the user the option to verify that they want to submit the form. Currently the above code shows the popup confirm box, but the form will submit regardless if 'ok' or 'cancel' is clicked.
My understanding of 'confirm()' was that if 'cancel' was clicked the form submission would be stopped.
How does Confirm() work, and how is it best implemented?

You need to precede the next() with a return in your HTML:
function next() {
return confirm('Are you sure you want to Foo');
}
<form method="GET" action="/foo" onsubmit="return next()">
<input type="hidden" name="delete" value={{$foo} />
<button class="btn btn-warning" type="submit"> Foo</button>
</form>
To stop submission, the onsubmit handler needs to return false, which you missed. confirm() returns false when the modal is dismissed.

How to disable submit button after click single time

I want to disable submit button once it has clicked for send.this is my submit button code
<button title="<?PHP echo getTranslatedString('LBL_SAVE_ALT'); ?>" accessKey="S" class="btn btn-primary" value="<?PHP echo getTranslatedString('LBL_SAVE_LAPTOP'); ?>" id="formSave" type="submit" name="button" onclick="return checkform();">
Save detail
and this is onclick function code
function checkform() {
var incvfr = $("#invoice").val();
var inseridf = $("#invserial").val();
if (incvfr == 1) {
if (inseridf == '') {
alert("Please enter invoice number");
return false;
}
} else {
document.save.submit();
document.getElementById('formSave').setAttribute("disabled", "disabled");
}
}
when i disable submit button then form not send for save just disable button how to do it.
when i use disable code after save.submit(); then form submit but save button not disable

Try one() method in jQuery, it will run once for an element and might simplify your code.
jQuery Solution:
$(function(){
$('#formSave').one('click', function() {
$(this).attr('disabled','disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input title="" accessKey="S" class="btn btn-primary" value="Save detail" id="formSave" type="submit" name="button" onclick="">
JavaScript Solution:
Use setAttribute() method.
function disable(){
document.getElementById('formSave').setAttribute("disabled", "disabled");
}
<input title="" accessKey="S" class="btn btn-primary" value="Save detail" id="formSave" type="submit" name="button" onclick="disable()">

As I can see that you re using jQuery so when you are saving after that you can use jQuery hide function to hide your button by passing button id
function checkform(){
var incvfr=$("#invoice").val();
var inseridf=$("#invserial").val();
if(incvfr== 1) {
if(inseridf==''){
alert("Please enter invoice number");
return false;
}
} else {
document.save.submit();
$("#formSave").hide();
}
}

You can disable submit button using
$("#formSave").attr('disabled',true);
or
$("#formSave").prop('disabled',true);

add property disable
$("#formSave").prop('disabled',true);
if you want revert it use
$("#formSave").prop('disabled',false);

Event on ok cancel button in JavaScript

I am stuck with a small issue.
<input class="btn btn-home" type="submit" name="discard" id="discard" onclick="return confirm('Are you sure you want to discard changes?')" alt="Discard" value="Discard Changes"/>
$('document').ready(function(){
var subm = "";
$('input[type="submit"]').click(function(e) {
subm = e.target.id;
if(subm == 'discard')
window.location = "http://www.weblink.com/manager.php";
})
});
When user click on button a confirmation box will appear with ok cancel. When user click on ok it will redirect to other page and if user click on cancel then it will stay on this page.
Problem is it is redirecting if user click on cancel. I don't want to redirect the page if cancel button clicked.

Two problems here:
You're trying to combine inline and external JS, which is always a bit messy
You're not suppressing the native behaviour of submit buttons, which is to submit a form (which I assume you have in your HTML, even though it's not shown). In fact, you don't even need the button to be of type submit.
HTML:
<button class="btn btn-home" name="discard" id="discard">Discard Changes</button>
JS:
$('#discard').on('click', function(evt) {
evt.preventDefault(); //don't submit the form, which a button naturally does
if (confirm('Are you sure you want to discard changes?'))
location.href = 'http://www.weblink.com/manager.php'; //redirect only on confirm
});

Put confirm dialog inside onsubmit listener instead. No need to use click listener.
<form onsubmit="return confirm('whatever your confirmation message')">
<input class="btn btn-home" type="submit" name="discard" value="Discard Changes"/>
</form>

You need to remove the inline script,
and the modification to the code should be something like the below -
$('document').ready(function()
{
var subm = "";
$('input[type="submit"]').click(function(e) {
var isConfirmed = confirm('Are you sure you want to discard changes?');
if(isConfirmed){
subm = e.target.id;
if(subm == 'discard'){
window.location = "http://www.weblink.com/manager.php";
}
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="btn btn-home" type="submit" name="discard" id="discard" alt="Discard" value="Discard Changes"/>

How to submit a form using JQuery depending on which option a user chooses

I've looked around at a few different questions with regards to this topic and no breakthroughts. What I'm trying to do is when the user clicks on the submit button I show 3 buttons on the screen and if the user clicks the third button the form submits. Otherwise I prevent the form from submitting.
However I'm having trouble implementing this. Currently I'm doing it this way and from my research i saw the very obvious mistake I was making with calling e.preventDefault() as soon as the form is submitted which prevents it from being able to be submit.
Hopefully in my code you will see what I'm trying to do. Show the three options before the form is submit and only submit if the third option is selected.
HTML:
<form action="some_url" method="post">
<input type="text" value="" id="fname" />
<input type="submit" value="Submit" />
</form>
<br/>
<div id="option-box">
<span id="option-a">Option A</span>
<span id="option-b">Option B</span>
<span id="option-c">Option C</span>
</div>
JQuery:
$('form').submit(function (e) {
e.preventDefault();
$('#option-box').show();
$('#option-a').click(function () {
alert('option a');
//Do something else
});
$('#option-b').click(function () {
alert('option b');
//Do something else
});
$('#option-c').click(function () {
alert('option c - SUBMIT');
$('form').submit();
});
});
#option-box {
display: none;
}
#option-box span {
background:green;
color: white;
display: block;
cursor: pointer;
padding:5px;
margin: 10px 0;
text-align:center;
max-width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form action="some_url" method="post">
<input type="text" value="" id="fname" />
<input type="submit" value="Submit" />
</form>
<br/>
<div id="option-box">
<span id="option-a">Option A</span>
<span id="option-b">Option B</span>
<span id="option-c">Option C</span>
</div>
Here is a fiddle of my current code:
https://jsfiddle.net/javacadabra/rb553ttw/1/

You need to prevent submitting the form to start
$('form').submit(function (e) {
e.preventDefault(); //<-- Need this
//... other code
});
Adding event handlers inside another action can also lead to issues. Submit more than once, you will have more event handlers attached. So you need to remove previous events. You can remove them with off
$('#option-a').off("click").on("click", function () { /* other code */ });
Lastly you should not need to cancel the default action of the buttons since they should not do anything.
And if you want to submit the form, you probably want to unbind the submit method or call it from DOM directly.
$('form').off("submit").submit();
or
$('form')[0].submit();

Take note of what the last selection was, and preventDefault based on that selection:
var selectedOption = "";
$('form').submit(function (e) {
$('#option-box').show();
if (selectedOption != "option-c") {
e.preventDefault();
}
});
$('#option-box').on('click', 'span', function () {
selectedOption = $(this).attr("id");
});
JSFiddle: https://jsfiddle.net/TrueBlueAussie/rb553ttw/4/

There are a few ways I can think of for the solution.
1. Remove type="submit"
Here instead of making <button type="submit"> you can make it <button type="button"> which does not submit the form unless you specify it in your script on click event listener $('form').submit()
2. Activate button on choosing option
Here your submit button is initially disabled. You can call the function using onClick event on the option or in the script and remove the disabled property of the button
3. Apply form action url on choosing option
Similar to 2nd option, here you will set the action url when the user selects a particular option using the script. In case user selects any other option and clicks on submit, no action will be performed