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>

How to get data from attributes then disable buttons accordingly

I have run a bit of problem with our user interface, here's my code:
I have a button here inside a
<button class="btn btn-info" type="button" id="btnSubmit" data-btn="{{ row[1] }}" data-id="{{ row[2] }}" data-toggle="modal" data-target="#myModal" contenteditable="false" disabled='disabled'> Pay</button>
I have been using row[2] from another function and it worked, so this time i used row[1] to evaluate data. The condition is that
when the row[1] of that row is empty the button would be disabled and would be colored to btn btn-danger and the text would be
made to "Paid" however thorugh my attempts I only made everything disabled or perhaps the last entry only as disabled. Here's my latest attempt:
<script type="text/javascript">
$(document).ready(function() {
var button = document.getElementById('btnSubmit');
var id = button.dataset.id;
$('#btnSubmit').attr('data-btn').onkeyup(function() {
if($(this).val() != '') {
$('#btnSubmit').prop('disabled', true);
}
else{
$('#btnSubmit').prop('disabled', false);
}
});
});
</script>
And its disabling all buttons. I just want the bytton to be enabled when its empty and disabled if its empty, and again as Ive said would be colored to btn btn-danger and the text would be made to "Paid" how do I do this in this case?
I've read the documentations and everything but it didn't work for some reasons. I also tried having an invisible input and getting its id but no luck. Please help

Okay... Assuming that data-bnt is the target element to check on keyup.
(I don't know what data-id is for...)
And that the target must not be empty to enable the submit button.
Then try this:
$(document).ready(function() {
var button = $('#btnSubmit');
var target = $('#'+button.data('btn'));
target.on("keyup",function(){
button.prop('disabled', ($(this).val() == '') ? true : false );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="targetID">
<button
class="btn btn-info"
type="button"
id="btnSubmit"
data-btn="targetID"
data-toggle="modal"
data-target="#myModal"
contenteditable="false"
disabled='disabled'> Pay</button>

Disable/enable button using jquery

I have a button that will disable if a certain condition occurs. Its like when the order_status is Accepted then the button for Accept is disabled. Its same in the other buttons when the order_status is Pending then the Send button is disabled. How can I achieve that?
Whats happening right now is I can disable the button for ASD but when I change the #asd to #submitAccept it didn't disable the Accept button, how that's possible?
But for now, help me how can I achieve when the order_status is Accepted the Button for Accept is disabled. I hope you can help me guys with my prob, I don't know what to do. Really appreciate any help from you guys, Thanks!
Heres my code right now.
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);
$(document).on("click", "#asd", function () { // MY JQUERY
if ($("#t_order_status").val() == "Accepted") {
$("#asd").prop("disabled", true);
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/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:#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>
<button type="button" name="asd" id="asd" class="btn btn-primary" onclick="asd"> ASD </button>

Use the .disabled method and set it to true.
window.onload = function() {
if(document.getElementById("t_order_status").value == "Accepted") {
document.getElementById("asd").disabled = true;
}
}

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

How can I create an onclick event that records two different values in an input field?

I am trying to create an onclick event where when you press two different buttons with different values they are added to the input field. For example, the input value would appear as: "13577002, 13577003" when both buttons are clicked. Can this be done?
< script >
function myFunction(name) {
document.getElementById("peep").value = name;
} < /script>
<html>
<body>
<table>
<tr>
<td><a onclick="myFunction('13577002')" data-toggle="modal" data-target="#myReserve" href="# style=" font-size:10px " class="btn btn-special-sm btn-color btn-xs ">RESERVE NOW</a></td>
<td><a onclick="myFunction( '13577003') " data-toggle="modal " data-target="#myReserve " href="# style="font-size:10px" class="btn btn-special-sm btn-color btn-xs">RESERVE NOW</a>
</td>
</tr>
</table>
<form>
<label>SKU:
<input type="text" name="sku" id="peep"></input>
</label>
</form>
</body>
</html>

To prevent unwanted additions, you could do something like this:
function myFunction(name) {
field=document.getElementById("peep");
if(field.value!='' && field.value.split(',').length<2 && field.value!=name) {
console.log(field.value.split(','));
field.value+=', '+name;
}
else if(field.value=='') {
field.value=name;
}
}
Demo: http://jsfiddle.net/7mjv2sp2/3/
Actually one more additional condition is needed, too, so user can't enter more that two values, and they must be different... :)

Just use a boolean flag to determine if something is already stored in there, and then concatenate appropriately
if(peepFlag)
document.getElementById("peep").value += ", " + name;
else {
document.getElementById("peep").value = name;
peepFlag = true;
}
If you don't anticipate ever needing to do anything else with it, you really don't even need the flag or if statements. But, I'll keep them for the sake of thoroughness

Try this:
<script>
function myFunction(name) {
document.getElementById("peep").value += (',' + name);
}
</script>

Hi man check this solution: http://jsfiddle.net/leojavier/apbuuhch/1/
<table>
<tr>
<td>
<a data-source="13577002" data-toggle="modal" data-target="#myReserve" href="javascript:void(0)" style="font-size:10px" class="btn btn-special-sm btn-color btn-xs">
RESERVE NOW
</a>
</td>
<td>
<a data-source="13577003" data-toggle="modal" data-target="#myReserve" href="javascript:void(0)" style="font-size:10px" class="btn btn-special-sm btn-color btn-xs">
RESERVE NOW
</a>
</td>
</tr>
</table>
<form>
<label>SKU:
<input type="text" name="sku" id="peep"></input>
</label>
</form>
js
$('a').on('click',function(){
$("#peep").val($(this).data('source'));
});