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>

Identifying specific button in a form

so I want to get a specific value if a button is clicked in my form, but somehow its listening on all buttons and not only the buttons in my form.
Instead of the javascript example below I also tried calling the class by
$('.modifygap').bind('click', function (e) {
but in this example the value didnt get set correctly.
Here is my html:
<button type="button" id="anotherbutton">Another</button>
<form action="editortoken_information" id="showtoken" method="POST">
<button class="btn btn-outline-secondary" type="submit" name="modifygap" id="modifygap" class="modifygap"
value="14" data-value="test">14</button>
<button class="btn btn-outline-secondary" type="submit" name="modifygap" id="modifygap" class="modifygap"
value="15" data-value="test">15</button>
</form>
And here is my javascript function:
$(document.getElementById("showtoken")).ready(function () {
$("button").click(function (e) {
e.preventDefault();
document.getElementById('tokenindex').value = this.getAttribute("data-value");
})
})
I thought by listening only on the specific id it would only detect button clicks in the form. But for some reason it is listening to all button clicks.

Use event.target.value to get the value of clicked element.
$(document).ready(() => {
$('.modifygap').bind('click', function (e) {
console.log('e', e.target.getAttribute("data-value"))
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="anotherbutton">Another</button>
<button class="btn btn-outline-secondary modifygap" type="submit" name="modifygap" id="modifygap"
value="14" data-value="test14">14</button>
<button class="btn btn-outline-secondary modifygap" type="submit" name="modifygap" id="modifygap"
value="15" data-value="test15">15</button>

html validation on button or hidden filed

wondering if anyone can help. As part of a form, i'm using a selection of buttons to capture satisfaction, rather than radio or dropdown. I'm using a jquery to capture the value of the button and adding it to a hidden field - the field the form is using to submit the information.
All works fine, however, i want to put validation, to make sure an answer is captured - but HTLM5 validation does not support buttons or hidden fields. Is there a was i can use JS to check if a button has been pressed on submit, and if not, toggle the html validator for that field?
Here the code i have so far;
<div class="form-group">
<label class="control-label required input_satisfaction" for="feedbackQuestions[56]">Please rate the venue facilities: <span class="required ">*</span></label>
<input required="required" type="hidden" name="feedbackQuestions[56]" id="feedbackQuestions_56">
<div id="feedbackQuestions_56_group" class="row">
<div class="col-xs-3"><button class="satisfactionBtn btn btn-primary btn-lg btn-block" required="required" name="Questions[56][0]" value="Excellent">Excellent</button></div>
<div class="col-xs-3"><button class="satisfactionBtn btn btn-primary btn-lg btn-block" required="required" name="Questions[56][1]" value="Good">Good</button></div>
<div class="col-xs-3"><button class="satisfactionBtn btn btn-primary btn-lg btn-block" required="required" name="Questions[56][2]" value="Satisfactory">Satisfactory</button></div>
<div class="col-xs-3"><button class="satisfactionBtn btn btn-primary btn-lg btn-block" required="required" name="Questions[56][3]" value="Poor">Poor</button></div>
</div>
<script>
$('#feedbackQuestions_56_group .satisfactionBtn').click(function (e) {
e.preventDefault();
$('#feedbackQuestions_56_group .satisfactionBtn').each(function( index ) {
$( this ).removeClass('active');
});
var thisval = $(this).val();
$('#feedbackQuestions_56').val(thisval);
$(this).addClass('active');
});
</script>
</div>
I know i need to add a trigger to the submit button futher down the page, so i can do a jquery .click() and then prevent the event until i've checked, but not sure how to actually check or how to trigger the validation.

I would actually store it as a global JS variable rather than a hidden field. you can reparse this value to the hidden field through jQuery if you want, but I don't see a use in that. Also divs are selectable in JS as well, so you do not need them to be just one or the other.
var isSelected = false;
$('#feedbackQuestions_56_group .satisfactionBtn').click(function (e) {
e.preventDefault();
$('#feedbackQuestions_56_group .satisfactionBtn').each(function (index) {
$(this).removeClass('active');
});
var thisval = this.id;
console.log("thisval: " + thisval);
$('#feedbackQuestions_56').val(thisval);
$(this).addClass('active');
isSelected = true
});
$('#onSubmit').click(function () {
console.log(isSelected);
//
// Look into ajax post command
//
if (isSelected == true) {
// ajax call here
}
else {
alert("Please select a rating")
}
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="form-group">
<label class="control-label required input_satisfaction" for="feedbackQuestions[56]">Please rate the venue facilities:
<span class="required ">*</span>
</label>
<div id="feedbackQuestions_56_group" class="row">
<div class="col-xs-3 satisfactionBtn btn btn-primary btn-lg btn-block" name="Questions[56][0]" id="Excellent">Excellent
</div>
<div class="col-xs-3 satisfactionBtn btn btn-primary btn-lg btn-block" name="Questions[56][1]" id="Good">Good
</div>
<div class="col-xs-3 satisfactionBtn btn btn-primary btn-lg btn-block" name="Questions[56][2]" id="Satisfactory">Satisfactory
</div>
<div class="col-xs-3 satisfactionBtn btn btn-primary btn-lg btn-block" name="Questions[56][3]" id="Poor">Poor
</div>
<div class=" btn btn-primary btn-lg btn-block" id="onSubmit">Submit</div>
</div>

Since that hidden field value is filled by code not user, code should validate the value(or no need to validate).
It sounds really strange that the hidden field need to be validated.
Edited
If you really need to validate hidden field, the original way is not working, but you can do it tricky by just add opacity:0 style.
Add such style make it invisible but not hidden, so the validate should work fine as usual.
But just remember you must change the type="hidden" to type="text"

How to disabled button

How can I disable button using javascript or jquery? I want to disable a button if certain action is happened. Example If the order_status is Accepted then the Accept button is disabled. I searched in internet but I dont quiet understand why my code doesn't work for me. I tried both javascript and jquery (See codes below) but nothings happen, the button didn't disable.
HERE MY CODES
<div class="form-group">
<label for="order_status" class="col-sm-2 control-label" style="width:20%;">Order Status</label>
<input type="text" class="form-control" name="order_status" id="t_order_status" style="width:80%;" placeholder="" value="" required="required" readonly>
</div>
<button type="button" input style="background-color:#4CAF50;color:white;border-color:#000000;" name="submitDelivered" id="submitDelivered" class="btn btn-success" data-toggle="modal" data-target="#myDeliverModal" onclick="deliver('<?= $_POST['order_id'] ?>')" > Delivered </button>
<button type="button" input style="background-color:#0000FF;color:white;border-color:#000000;" name="submitAccept" id="submitAccept" class="btn btn-success" data-toggle="modal" data-target="#myAcceptModal" onclick="accept('<?= $_POST['order_id'] ?>')" > Accept </button>
<button type="button" style="background-color:#FFFF00;color:black;border-color:#000000;" class="btn btn-success" data-toggle="modal" data-target="#myDropdown" onclick="send('<?= $_POST['order_id'] ?>')"> Send </button>
<button type="button" input style="background-color:#f44336;color:white;border-color:#000000;" name="submitCancel" id="submitCancel" class="btn btn-success" data-toggle="modal" data-target="#myCancelModal" onclick="cancel('<?= $_POST['order_id'] ?>')">Cancel</button>
<script>
function viewOrder(order_id, order_id, user_id, order_date, order_time, order_deliveryCharge, order_totalAmount, address, coordinates, driver_number, order_status) {
document.getElementById("t_order_id").setAttribute("value", order_id);
document.getElementsByName("ORDER_ID_MODAL_2")[0].setAttribute("value", order_id);
document.getElementById("t_user_id").setAttribute("value", user_id);
document.getElementById("t_order_date").setAttribute("value", order_date);
document.getElementById("t_order_time").setAttribute("value", order_time);
document.getElementById("t_order_deliveryCharge").setAttribute("value", order_deliveryCharge);
document.getElementById("t_order_totalAmount").setAttribute("value", order_totalAmount);
document.getElementById("t_address").setAttribute("value", address);
document.getElementById("t_coordinates").setAttribute("value", coordinates);
document.getElementById("t_drivers_number").setAttribute("value", driver_number);
document.getElementById("t_order_status").setAttribute("value", order_status);
document.getElementById("ORDER_MODAL_ACCEPT").setAttribute("value", order_id);
document.getElementById("ORDER_MODAL_DELIVER").setAttribute("value", order_id);
document.getElementById("ORDER_MODAL_CANCEL").setAttribute("value", order_id);
}
function accept() { //THIS IS MY CODE FOR JAVASCRIPT
var x = document.getElementById("order_status").value;
if(x == "Accepted"){
document.getElementById("submitAccept").disabled = true;
}
}
THIS IS MY CODE FOR JQUERY
$(document).on("click", ".submitAccept", function (e) {
$(".submitAccept").attr("disabled", true);
}
I ALSO TRIED THIS
$(function () {
($("#order_status").keyup(function (){
if ($("#order_status").val() == 'Accepted') {
('#submitAccept').prop('disabled',true);
}else{
('#submitAccept').prop('disabled', false);
}
})
)};
);
</script>
My mind is blank, Im struggling right now. I hope you understand me guys. I hope can help me guys with my problem, I needed it so badly for the transaction for our ordering system.

If you are trying to select an element by its id using JQuery you have to use # selector : see jQuery selectors.
If you are using jQuery 1.6+ use prop() instead of attr()
$(document).on("click", "#submitAccept", function () {
$(this).prop("disabled", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="form-group">
<label for="order_status" class="col-sm-2 control-label" style="width:20%;">Order Status</label>
<input type="text" class="form-control" name="order_status" id="t_order_status" style="width:80%;" placeholder="" value="" required="required" readonly>
</div>
<button type="button" input style="background-color:#0000FF;color:white;border-color:#000000;" name="submitAccept" id="submitAccept" class="btn btn-success" data-toggle="modal" data-target="#myAcceptModal" > Accept </button>

Try Below code
$(document).on("click", "#submitAccept", function (e) {
$(this).attr("disabled", true);
}

You can try like this if you want target class
<button type="button" class="accepted" >Accepted</button>
<button type="button" class="not-accepted">Not Accepted</button>
$(document).ready(function() {
$(".accepted").attr("disabled",true);
});
here is js fiddle running example

Using $(this) with css class selectors in Jquery

I have below HTML to display and download tracks . What i need is to hide Play button , Download button and the share button when user clicks share button(what i really need is to show social media buttons after hiding the default buttons) .
<form action="index.php" method="post">
<div id="53">
Track Name :- <b>Get Low</b>
<br />By :- DJ perera
<br />
<button class="playback btn btn-primary btn-sm weezy"><i class="fa fa-play"></i> Play</button>
<audio src="../members/memberfiles/16/Get Low.mp3">
Your browser does not support HTML5 audio.
</audio>
<button class="btn btn-sm btn-success weezy" type="submit" name="dwn"><i class="fa fa-download"></i> Download MP3</button>
<button class="sharer btn btn-sm btn-danger weezy" type="button"><span class="fa fa-share-alt"></span> Share</button>
<br />
<input type="hidden" value="Get Low.mp3" name="file_name">
<input type="hidden" value="bWVtYmVyZmlsZXMvMTYvR2V0IExvdy5tcDM=" name="link">
</div>
</form>
<br>
<form action="index.php" method="post">
<div id="52">
Track Name :- <b>Eclips - Hardwell</b>
<br />By :- DJ perera
<br />
<button class="playback btn btn-primary btn-sm weezy"><i class="fa fa-play"></i> Play</button>
<audio src="../members/memberfiles/16/Eclips - Hardwell.mp3">
Your browser does not support HTML5 audio.
</audio>
<button class="btn btn-sm btn-success weezy" type="submit" name="dwn"><i class="fa fa-download"></i> Download MP3</button>
<button class="sharer btn btn-sm btn-danger weezy" type="button"><span class="fa fa-share-alt"></span> Share</button>
<br />
<input type="hidden" value="Eclips - Hardwell.mp3" name="file_name">
<input type="hidden" value="bWVtYmVyZmlsZXMvMTYvRWNsaXBzIC0gSGFyZHdlbGwubXAz" name="link">
</div>
</form>
<br>
<script type="text/javascript">
$(document).ready(function(){
$('.sharer').click(function(){
$('.weezy').slideUp();
});
});
</script>
i already have above js code to hide play , download and share buttons when a user clicks share button . The Problem is since im using css class selectors , when user press Share button it hide all the play buttons , download buttons and share buttons from the webpage . what i need to achieve is that when a user click share button i need to hide only buttons that belong into that form only .
i have already tried doing this . but it won't work
<script type="text/javascript">
$(document).ready(function(){
$('.sharer').click(function(){
$(this).$('.weezy').slideUp();
});
});
</script>
and
<script type="text/javascript">
$(document).ready(function(){
$('.sharer').click(function(){
$(this).find('.weezy').slideUp();
});
});
</script>
and this
<script type="text/javascript">
$(document).ready(function(){
$('.sharer').click(function(){
$('.weezy',this).slideUp();
});
});
</script>
Kindly point out what went wrong since im new to javascript . Thanks

Use .closest() to select the closest parent form element of the clicked element. From there, select the desired element within that form.
Example Here
$('.sharer').on('click', function () {
$(this).closest('form').find('.weezy').slideUp();
});