I have a form with a submit input and I need that when the button gets clicked, my script do some Ajax actions. Also I need to disable that button during the Ajax request. So I need a jQuery command to avoid real form submit when input is clicked. I tried to use this:
$('input.searchplease').click(function () {
$(this).attr('disabled', 'disabled');
alert('Yep');
//Do Ajax
});
This didn't worked. I mean, the alert shown correctly but form is submitted. So what is your suggestion?
Try this:
$('input.searchplease').click(function (e) {
$(this).attr('disabled', 'disabled');
alert('Yep');
//Do Ajax
e.preventDefault();
});
$('input.searchplease').click(function () {
alert('yep');
return false;
});
This should work
You can do this:
$('form').submit(function(){
... ajax things
return false;
});
I would rather not disable the button (and then enable it), unless I have to.
try this way :
$("#id-of-your-form").submit(function() {
$("#id-of-your-submit-input").attr("disabled", true);
// do-ajax
// you can use jquery's ajax complete handler to enable the submit button again
return false;
});
I think this will do the trick:
$('form').submit(function(event) {
event.preventDefault();
$('#submit-button-ID').attr('disabled', 'disabled');
$.ajax({
...,
success: function() {
$('#submit-button-ID').removeAttr('disabled');
}
});
});
Related
I'm trying to create a function in javascript that gets an alert to show up when you click the submit button. I managed to get the alert to show but it only pops up when you open the page but doesn't work when you click the submit button.
heres the function i created in javascript
function orderTics(){
//creates alert
var orderTotal=35;
alert("Your order total is $"+orderTotal);
}
I called the function in html like this:
<script>
orderTics();
</script>
I'm still very much a beginner so any and all tips will be greatly appreciated
You can use the below.
$("#FormSelector").on("submit", function() {
//Your code goes here
});
You could use the on submit function like this:
$("form.class-name").on("submit", function() {
alert("I've been submitted.");
});
Vanilla JS onsubmit event:
document.querySelector("form.class-name").addEventListener("submit", function() {
alert("I've been submitted.");
}, false);
You can also use the event.preventDefault(); method to prevent the form from going to another page, like this:
$("form.class-name").on("submit", function(event) {
even.preventDefault();
alert("Do stuff");
});
Vanilla JS onsubmit event with event.preventDefault(); method:
document.querySelector("form.class-name").addEventListener("submit", function(event) {
event.preventDefault();
alert("I've been submitted.");
}, false);
NOTE: when you use the event.preventDefault(); method the form won't redirect to the target page, even if you click the ok button in the alert box.
Finally you can just use the click event on the submit button, like this:
$("button.submit-button-class").on("click", function() {
alert("I've been clicked!");
});
Vanilla JS onclick event:
document.querySelector("button.submit-button-class").addEventListener("click", function() {
alert("I've been clicked!");
}, false);
Call your function like this:
<input type="button" value="myButton" onclick="orderTopics();">
I have the following codes, saveBt, should not submit when user selects cancel on confirm however it seems it still submits cause I have onClickTopics, I need this onclicktopics to reload a struts jquery grid. Any workarounds?
$("#saveBt").click(function(event){
event.preventDefault();
if($('#Form').valid()){
if (confirm("Are you sure ?")) {
return true;
} else {
return false;
}
}
});
<sj:a id="saveBt" onClickTopics="reloadGrid" name="saveChannel" value="saveChannel">Save</sj:a>
UPDATE: Need onClicks to reload grid via :
<sj:a id="saveBt" onClickTopics="reloadGrid" name="save" value="save">Save</sj:a>
<sjg:grid id="gridTable" reloadTopics="reloadGrid" resizable="true"
autowidth="true">
try this, delegate method.
$(document).on('click','#saveBt', function(event){
event.preventDefault();
if($('#Form').valid()){
if (confirm("Are you sure ?")) {
return true;
} else {
return false;
}
}
})
Reload the grid after the click event fire.That is inside the binding method. Then call the event.preventDefault after you reload the grid.
The point is not to bubble the event after the grid reload. If it's that what you mean.
Ended up with:
function validator() {
if (confirm("Are you sure you want to save?")) {
$("#Form").submit();
$("#refresh_gridTable").click();
}
}
<sj:a id="saveBt" onclick="return validator();">Save</sj:a>
Struts jquery Grid creates a refresh button via setting : navigatorRefresh="true" just had to click it after submit.
What's the best way to prevent a double-click on a link with jQuery?
I have a link that triggers an ajax call and when that ajax call returns it shows a message.
The problem is if I double-click, or click it twice before the ajax call returns, I wind up with two messages on the page when I really want just one.
I need like a disabled attribute on a button. But that doesn't work on links.
$('a').on('click', function(e){
e.preventDefault();
//do ajax call
});
You can use data- attributes, something like this:
$('a').on('click', function () {
var $this = $(this);
var alreadyClicked = $this.data('clicked');
if (alreadyClicked) {
return false;
}
$this.data('clicked', true);
$.ajax({
//some options
success: function (data) { //or complete
//stuff
$this.data('clicked', false);
}
})
});
I came with next simple jquery plugin:
(function($) {
$.fn.oneclick = function() {
$(this).one('click', function() {
$(this).click(function() { return false; });
});
};
// auto discover one-click elements
$(function() { $('[data-oneclick]').oneclick(); });
}(jQuery || Zepto));
// Then apply to selected elements
$('a.oneclick').oneclick();
Or just add custom data atribute in html:
<a data-oneclick href="/">One click</a>
You need async:false
By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false.
$.ajax({
async: false,
success: function (data) {
//your message here
}
})
you can use a dummy class for this.
$('a#anchorID').bind('click',function(){
if($(this).hasClass('alreadyClicked')){
return false;
}else{
$(this).addClass('alreadyClicked);
$/ajax({
success: function(){$('a#anchorID').removeClass('alreadyClicked');},
error: function(){$('a#anchorID').removeClass('alreadyClicked');}
});
}});
Check this example. You can disable the button via CSS attribute after the first click (and remove this attribute after an ajax request or with a setTimeout) or use the jQuery.one() function to remove the trigger after the first click (without disabling the button)
var normal_button = $('#normal'),
one_button = $('#one'),
disabled_button = $('#disabled'),
result = $('#result');
normal_button.on('click', function () {
result.removeClass('hide').append(normal_button.html()+'<br/>');
});
one_button.one('click', function () {
result.removeClass('hide').append(one_button.html()+'<br/>');
});
disabled_button.on('click', function () {
disabled_button.attr('disabled', true);
setTimeout(function () {
result.removeClass('hide').append(disabled_button.html()+'<br/>');
}, 2000);
});
Although there are some good solutions offered, the method I ended up using was to just use a <button class="link"> that I can set the disabled attribute on.
Sometimes simplest solution is best.
You can disable click event on that link second time by using Jquery
$(this).unbind('click');
See this jsfiddle for reference
Demo
You can disable your links (for instance, href="#" ), and use a click event instead, binded to the link using the jQuery one() function.
Bind all the links with class "button" and try this:
$("a.button").click(function() { $(this).attr("disabled", "disabled"); });
$(document).click(function(evt) {
if ($(evt.target).is("a[disabled]"))
return false;
});
I am trying to implement some Jquery that basically says "If this text field is filled in then disable the submit button so that the form cannot be delivered/submitted"
So far I have come up with this, but it is not working
$(document).ready(function(){
$this = $("#inputValue");
if($this.val().length>0){
$('input[type=submit]').attr('disabled', 'disabled');
}
});
When i fill in the form and include text within the field I am not supposed to the form still gets submitted, what am i doing wrong?
Thanks
Your code only runs once on runtime. After that, it doesn't get checked again.
$(document).ready(function (){
$("#inputValue").on('change', function (){
if($(this).val().length > 0){
$('input[type=submit]').attr('disabled', 'disabled');
} else {
$('input[type=submit]').removeAttr('disabled');
}
});
});
Or, as #thomasfedb suggested:
$(document).ready(function (){
$('#inputValue').on('change', function() {
$("input[type=submit]").prop('disabled', $(this).val().length > 0);
});
});
I'd suggest you to bind a keyup event to do the check every time when user enters something to #inputValue field:
$(document).ready(function() {
$("#inputValue").on("keyup", function() {
$("input[type=submit]").prop("disabled", !!$.trim(this.value).length);
}).trigger("keyup");
});
Since you're using a hidden field it might be better to bind the change event:
$('#inputValue').on('change', function() {
$('input[type="submit"]').prop('disabled', this.value.length > 0);
}).change();
Try using this code.
$('input[type=submit]').attr("disabled", true);
First sorry for my bad English.
I would like to show a confirmation layer (id="confirmwin") before submitting a form (id="form"). There is another button (id="yes") to submit the form.
I tried this:
Layer:
<div id="confirmwin" style="display:none">
Are you sure to submit?<br>
Yes No
</div>
JavaScript:
$(document).ready(function(){
$("#yes").click( function() {
$("#form").off("submit").submit();
});
$("#form").on("submit", function() {
$('#confirmwin').show();
return false;
});
});
Sometimes (not always) it looks like it's in an endless loop.
Perhaps the #yes click event's off event goes wrong.
Have you tried removing the .submit() while turning it off?
$("#form").off("submit").submit();
shouldn't it be..
$("#form").off("submit") //if
and only if confirmed proceed to do..
$("#form").submit(); //then you can /off() but I don't see the need to
One solution would be to pass extra parameters while triggering the submit event.
You can read more about event data in the jQuery API here.
$("#yes").click( function() {
$("#form").trigger("submit", [true]);
});
$("#form").on("submit", function(e, blnConfirmed) {
// If it's not confirmed yet, show the overlay.
if (!blnConfirmed) {
$('#confirmwin').show();
return false;
} // else it actually IS confirmed, do a real submit
});
You should test this code first. It's just an example.
It is easy:
Just add an global var:
var ignoreConfirm = false;
so it will look like:
$("#yes").click( function() {
ignoreConfirm = true;
$("#form").off("submit").submit();
});
$("#form").on("submit", function() {
if(!ignoreConfirm){
$('#confirmwin').show();
return false;
}
});
simples as this
<form id="xpto" name="" action="" ... onsubmit="return callJavascriptFunctionConfirm();">
//bla bla bla here
</form>
function callJavascriptFunctionConfirm(){
//do the logic here
if (yes)
return true;
else
return false;
}
}