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>
Related
I think I'm going a little mad.
I have a working re-captcha div and submit button:
<div class="g-recaptcha" data-sitekey="LALALALALAL" data-callback="enableBtn"></div>
<br />
<button id="getJSON" type="button" class="btn btn-primary">Save Form</button>
The Save Form button is disabled on page load.
I have the following function:
<script>
function enableBtn(){
var submit = document.getElementById('getJSON');
if (submit.disabled) {
document.getElementById("getJSON").disabled = false;
} else {
document.getElementById("getJSON").disabled = true;
}
}
</script>
The callback works fine for the initial enabling of the button on successful recaptcha response, but when the recaptcha times out the button doesn't get disabled.
As I said, I think I'm going a little mad.
I think that you can use data-expired-callback attribute.
<div class="g-recaptcha" data-sitekey="LALALALALAL" data-callback="enableBtn" data-expired-callback="enableBtn"></div>
<br />
<button id="getJSON" type="button" class="btn btn-primary">Save Form</button>
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>
I have run into a problem with our javascript. I have two buttons. When a certain input has a value, we hide the button, otherwise, we show it.
Here are the buttons we want to hide and show:
<button class="btn btn-info" style="visibility: hidden;" type="button" id="button1" data-id="{{receiptno}}" data-toggle="modal" data-target="#myModal" contenteditable="false">Pay</button>
<form action="/payments/report/{{receiptno}}.pdf" method=post>
<input type=hidden value="{{receiptno}}" name="row_print"></input>
<button class="btn btn-danger" style="visibility: hidden;" type="submit" id="anotherbutton1" name="delete">
<span class="glyphicon glyphicon-print"></span> Print Receipt
</button>
</form>
We are getting our value here. If it's '' we show the pay button, else we show the print receipt button:
<input style="visibility: hidden;" id="referto" value="{{paymentmethod}}">
Here's our javascript:
<script type="text/javascript">
$(document).ready(function() {
console.log($("#referto").val());
if ( $("#referto").val() == '') {
document.getElementById('button1').style.visibility = 'visible';
}
else {
document.getElementById('anotherbutton1').style.visibility = 'visible';
}
});
</script>
I'm really not sure why this isn't working. Any help is appreciated. Thank you!
Can you please try this and see if it works?
if ( $("#referto").val()) {
It covers a lot of cases, like empty strings, nulls, etc.
It works fine it seems. I have tested it as below. Perhaps your value="{{paymentmethod}}" is not really returning nothing, but some whitespace. Check what is being returned from that value. Good luck.
$(document).ready(function() {
console.log($("#referto").val());
if ($("#referto").val() == '' || $("#referto").val() == ' ') {
document.getElementById('button1').style.visibility = 'visible';
} else {
document.getElementById('anotherbutton1').style.visibility = 'visible';
}
$("#referto").on("change keydown keyup", function(){
document.getElementById('anotherbutton1').style.visibility = 'hidden';
document.getElementById('button1').style.visibility = 'hidden';
if ($("#referto").val() == '' || $("#referto").val() == ' ') {
document.getElementById('button1').style.visibility = 'visible';
} else {
document.getElementById('anotherbutton1').style.visibility = 'visible';
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I have run into a problem with our javascript, let's say I have two buttons here I when a certain input has a value we hide the button, otherwise show it Here's our buttons that we want to hide and show:
<button class="btn btn-info" style="visibility: hidden;" type="button" id="button1" data-id="{{receiptno}}" data-toggle="modal" data-target="#myModal" contenteditable="false">Pay</button>
<form action="" method=post>
<input type=hidden value="" name="row_print">
<button class="btn btn-danger" style="visibility: hidden;" type="submit" id="anotherbutton1" name="delete"><span class="glyphicon glyphicon-print"></span> Print Receipt</button>
</form>
We are getting our values here, if its '' we show the pay button if it's not '' we show the print receipt button:
<input style="visibility: block;" id="referto" value="">
I have a form which has two Options, Submit and Overwrite.
It looks like this:
[ INPUT FIELD ]
[Submit] [Overwrite]
The Overwrite Button only appears when the value already is in the Database.
The HTML Code is:
<input type="text" name="target" id="target">
<button id="submit" name="submit" type="submit" class="btn btn-primary"> Submit </button>
<button id="overwrite" name="overwrite" type="submit" class="btn btn-primary"> Overwrite </button>
The JS Code is:
if(!problem){
data = "submit=save";
jQuery('#overwrite').click(function(){
$(this).toggleClass('selected');
if( $(this).hasClass('selected') ){
data+="&overwrite=on";
console.log( "overwrite=on" );
}
});
sendToBean(href, data);
jQuery.each(langs, function(i, lang){
sendToBean(href, data);
});
}
}
If I only have the Submit button, it works.
If I only have the Overwrite button, it works.
But if I have both, the Overwrite button wont work anymore.
Does anyone have a solution to this problem?
put retrun false in the anonymous callback function will do the trick. since you declare that the button is a submit button
if(!problem){
data = "submit=save";
jQuery('#overwrite').click(function(){
$(this).toggleClass('selected');
if( $(this).hasClass('selected') ){
data+="&overwrite=on";
console.log( "overwrite=on" );
}
return false;
});
sendToBean(href, data);
jQuery.each(langs, function(i, lang){
sendToBean(href, data);
});
}
}
When you click the submit button the page will be refreshed and the overwrite will return to the initial format and the selected will disappear, Try to change the input type to button :
<button id="overwrite" name="overwrite" type="button" class="btn btn-primary"> Overwrite </button>
Hope this helps.
Remove <input type=""> for Overwrite button you may use <button>
Overwrite
<input type="text" name="target" id="target">
<input type="submit" id="btnSubmit" name="btnSubmit" class="btn btn-primary" value="submit"/>
<input type="submit" id="btnOverwrite" name="btnOverwrite" class="btn btn-primary" value="Overwrite"/>
$(document).ready(function(){
$("#btnOverwrite").unbind("click").bind("click",function(e){
e.preventDefault();
alert("overwrite called");
});
$("#btnSubmit").unbind("click").bind("click",function(e){
e.preventDefault();
alert("submit called");
})
});
Review fiddle
https://jsfiddle.net/dipakchavda2912/rwdakvyg/
I've checked similar questions here, but none of them seemed to solve my problem.
I'm trying to add data-loading-text to my submit button, but with no luck so far.
I'm using Bootstrap 4!
Here is my HTML:
<button type="submit" id="submit" class="btn btn-primary btn-lg mt-2" data-loading-text="Sending...">Submit message!</button>
This was the last jquery code I tried:
$(function() {
$(".btn").click(function(){
$(this).submit('loading').delay(1000).queue(function() {
// $(this).button('reset');
});
});
});
Thanks
Try this.
<!DOCTYPE html>
<html>
<head>
<style></style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
function MyCustomFunction(){
$("#submit").text("Loading...");
$(this).submit('loading').delay(1000).queue(function () {
// $(this).button('reset');
});
}
</script>
</head>
<body>
<button type="submit" onclick="MyCustomFunction()" id="submit" class="btn btn-primary btn-lg mt-2" data-loading-text="Sending...">Submit message!</button>
</body>
</html>
In case of Submit button the only possible way is to bind a custom function on click and change the action attribute to event handler.
I think this is the most easy way to get the result you need:
HTML:
<button type="submit" class="btn btn-primary btn-lg btn-block" data-loading-text="Your order is being processed...">Order now</button>
JAVASCRIPT / JQUERY:
$(".btn").on('click', function () {
var dataLoadingText = $(this).attr("data-loading-text");
if (typeof dataLoadingText !== typeof undefined && dataLoadingText !== false) {
console.log(dataLoadingText);
$(this).text(dataLoadingText).addClass("disabled");
}
});