I have an form with dropdown. whenever i select the drop down once i click save itself it appear it do some action. I want to as auto save when you change the dropdown values.
Here is the fiddle:
http://jsfiddle.net/GGtTw/
jQuery('select[name="dropdown"]').change(function() {
alert(jQuery(this).val());
});
jQuery('#submit').click(function() {
alert('you click submit button');
});
I want once you select the dropdown it automatically submit the values means it automatically click save without noticing to the user.
Any suggestion would be great.
Thanks
Use trigger to simulate a click event for the given object
jQuery('select[name="dropdown"]').change(function() {
jQuery('#submit').trigger('click');
});
jQuery('#submit').click(function() {
alert('you click submit button');
});
just do
$( "#submit" ).trigger( "click" );
Another Approach:
jQuery('select[name="dropdown"]').change(function() {
save();
});
jQuery('#submit').click(function() {
save();
});
function save()
{
alert('Save');
}
Make an ajax call to save from inside your drop down change event. Unless you want to perform a form submit, in that case trigger the click function on the submit like so
jQuery('#submit').trigger('click');
jQuery ajax()
Related
I have a short form, you can see it here http://jsfiddle.net/azxpckg5/1/
and I have a problem - the way to reproduce it is to click the save button. Then there will appear another button called submit. when user clicks it - it disappears and it's fine. But when user repeats this procedure (clicks save again and submit again - he can see that the last click was repeated twice. I believe the error might be somewhere here:
submitHandler: function (form) {
alert("here!");
$(".overlay-boxify2").toggleClass("open");
$('#submitcForm').click(function() {
//
$(".overlay-boxify2").toggleClass("open");
alert("hegdsgsd");
});
return false;
}
but to be honest I don't know how to fix it and what can be the issue. Can you help me with that?
The issue is because you're attaching another click event handler to the #submitcForm button on every submission of the form (which happens when #saveBtn is clicked. Move the click handler outside of the validate() call and your code will work as you require.
$('#invoiceForm').validate({
// settings...
});
$('#submitcForm').click(function () {
$(".overlay-boxify2").toggleClass("open");
});
Updated fiddle
Use .off() to prevent attaching multiple click eventListener on your button
submitHandler: function (form) {
alert("here!");
$(".overlay-boxify2").toggleClass("open");
$('#submitcForm').off().click(function() { // see the use of .off()
$(".overlay-boxify2").toggleClass("open");
alert("hegdsgsd");
});
return false;
}
See more about .off()
I have a regular form, when the submit button is clicked I want to hide the submit button, and if any form values change after submitting it'll auto submit again.
I'm using the following code and it works, but each time I update the form data and the form is automatically submit, in the JS console I can see it's being submit many many times, and the number increases each time it auto submits. e.g. first auto submit posted once, second auto submit posted 4 times, third auto submit posted 8 times and then the form starts getting really slow due to this.
jQuery(function($) {
$(document).on("click",'#bookingbutton', function() {
$( "#bookingbutton" ).css( "display", "none" );
$( ".bookroom1" ).addClass( "bookroom1-submit" );
$(".bookroom1-submit").change(function() {
$("#bookingbutton").click();
});
});
});
That is because each time you call $("#bookingbutton").click() you are registering again a change listener in .bookroom1-submit.
Try replacing
$(".bookroom1-submit").change(function() {
$("#bookingbutton").click();
});
With
$(".bookroom1-submit").off('change').on('change', function() {
$("#bookingbutton").click();
});
That should do it.
EDIT
Some further explanation on the problem:
Submit button is clicked.
It adds a class to the button and registers a change listener.
Next time, when an input changes, you are triggering a click on the button, which will cause 1. and 2. to happen again. Now you will have 2 listeners for change.
it will continue to grow exponentially.
Another alternative is, instead of $("#bookingbutton").click(); use $("#your-form-id").trigger('submit');
Use jquery off and then one:
jQuery(function ($) {
$(document).off("click", '#bookingbutton').one
("click", '#bookingbutton', function () {
$("#bookingbutton").css("display", "none");
$(".bookroom1").addClass("bookroom1-submit");
$(".bookroom1-submit").change(function () {
$("#bookingbutton").click();
});
});
});
I'm trying to prevent users from clicking the button on the page twice, so what I've been doing is hiding that button with jQuery after it's been clicked once. But is there a way instead of hiding that button to disable with jQuery that button after it was clicked once?
I've tried
$(document).ready(function () {
$('#onClickHideButton').click(function () {
$(this).prop('disabled', true);
});
});
but the problem that I'm having with this function is that as soon as the button is clicked it it becomes disabled before it get the chance to submit the form, so the form never gets submitted.
Why not disable the button when the form is submitted, since that's what you actually want to do...
$('#myForm').on('submit', function () {
$('#myButton').prop('disabled', true);
});
Instead of using a submit button, just use a simple button and send manually the form submit.
<input type="button" id="onClickHideButton" value="Submit"/>
$('#onClickHideButton').click(function () {
$(this).prop('disabled', true);
$('#myform').submit();
});
or you could disable the button when the form is submitted
$('#myform').on('submit', function(e) {
$('#onClickHideButton').prop('disabled',true);
});
I have a file upload system, after the upload button is clicked, the file is then uploaded through AJAX. While the file is uploaded I want to disable the click function that is on the "Select Images" button.
Currently this is the click function on the file-selection button:
$(document).ready(function() {
$("#file-button").click(function() {
$('#file').trigger('click');
});
});
That works fine, but I want to disable the click function in the progress phase of the XmlHttpRequest, and then re-enable the click function when I get a 200 response from the server. I have tried bind() and unbind() and it works fine in Chrome, but in firefox, during the upload, the button cannot be clicked, which is what I want, and then after I get a response from the server the button is re-enabled, but in firefox two file-selection dialogue windows open at the same time. This is because of the function above, and me binding the function again using bind(). Does anyone have any suggestions on how to enable, then disable the button without re-entering the code (function) of the click event.
Something like this would be preferable:
$('#file-button').disable();
$('#file-button').enable();
I have tried the on() and off() and they do not seem to work either.
SOLUTION -- thanks to Eric
I changed my initial click function to the following:
$(document).ready(function() {
$("#file-button").click(function() {
if ( $('#file-button').attr('disabled') == "disabled" ) {
return false;
}
else {
$('#file').trigger('click');
}
});
});
And I set the following to disable the button
$('#file-button').attr('disabled','disabled');
And this to re-enable it:
$('#file-button').removeAttr('disabled');
Disable the button using jQuery $.prop() function:
$("input[type=submit]").prop('disabled', true);
Add a conditional to the click handler to check if the button is disabled:
$("#file-button").click(function() {
if (!$(this).is(':disabled')) {
$('#file').trigger('click');
}
});
Later on re-enable the button:
$("input[type=submit]").prop('disabled', false);
Or you might be able to use the submit event instead of click, if there is a form involved:
$("#whatever-your-form-is").on('submit', function() {
$('#file').trigger('click');
});
Try Attr jQuery function.
$('#file-button').attr('disabled','disabled');
$('#file-button').removeAttr('disabled');
Tested Code
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#file-button").click(function(e)
{
e.preventDefault();
$(this).attr('disabled','disabled');
return false;
});
});
</script>
<input type="button" id="file-button" value="ClickMe" />
You have to refer input button in order to disable button ,
Something like below
$("input[type=submit]").prob('disabled', true);
$("inpur[type=submit]").prob('disabled', false);
For some weird reason i'm getting my confirm box coming up twice. here is my code:
$(".DeleteComment").live("click", function(){
var CommentID = $(this).attr("rel");
var confirm
if (!confirm('Are you sure you want to permanently delete this comment?')){
return false;
}else{
$(this).html("loading").css("color", "#999");
//AJAX HERE
return false;
}
});
Do you load any content dynamically (via ajax)? It could be the case that the click event is bound to the same element twice resulting in the double confirmation.
It happens when we bind event on the elements which are loaded dynamically via AJAX
So for example we are loading some dynamic html content (e.g. dynamic content in modal) on click of the edit form button,
And in that content if we have binded click event on some button e.g. delete button, then every time we click on edit form button, it binds the click event to delete button every time,
And if you have set confirm box on click event of delete button then, it will ask you as many time as it was binded for that click event means here if we have clicked edit form button 5 times then it will asks for your confirmation 5 times.
So for solving that issue you can unbind the event every time before binding event to dynamically loaded element as following :
$(document).off('click', '.DeleteComment').on('click', '.DeleteComment', function () {
if (confirm('Are you sure you want to permanently delete this comment?')){
//Delete process
return true;
}
return false;
}
Or Another way to solve this problem is to add your script in main page, means static page not in dynamically loaded one.
try this:
$_blockDelete = false;
$(".DeleteComment").live("click", function(event){
event.preventDefault();
//event.stopPropagation(); // it is not necessary
if (!$_blockDelete)
{
$_blockDelete =true;
var rconfirm = confirm('Are you sure you want to permanently delete this comment?');
if (rconfirm)
{
$(this).html("loading").css("color", "#999");
var CommentID = $(this).attr("rel");
//AJAX HERE
//return the value "false" the variable "$_blockDelete" once again ajax response
}
}
});
Did you try removing that not-used var confirm?