Develop Reference

Why does my button click twice in jquery if I put it in submitHandler?

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

Avoid multiple form submit in html

I'm facing a sort of dummy problem.
On my site there is an order form (simple html form) and I noticed that I get double commands from time to time.
I realized that if I clicked repeatedly few times the submit button (before the action page is loaded) I got as many commands as I have clicked.
So I wonder if there are simple solution to make form submission asyncronous?
Thanks
P.S. I added JQuery UI dialog on submit "wait please..." but I get still double commands.
UPDATE
As GeoffAtkins proposed I will:
disable submit after dialog is shown
make use of unique form's token (as it is already added by Symfony) Do not use Symfony token as unique form token as it is always the same for current session. Use just random or something like that.

I would consider doing this (jQuery since you said you used that)
$(function() {
$("#formId").on("submit",function() {
$("#submitBut").hide();
$("#pleaseWait").show();
});
});
if you submit the form and reload the page.
If you Ajax the order, then do
$(function() {
$("#formId").on("submit",function(e) {
e.preventDefault();
var $theForm = $(this);
$("#submitBut").hide();
$("#pleaseWait").show();
$.post($(this).attr("action"),$(this).serialize(),function() {
$theForm.reset();
$("#submitBut").show(); // assuming you want the user to order more stuff
$("#pleaseWait").hide();
});
});
});
NOTE that disabling the submit button on click of the submit button may stop the submission all together (at least in Chrome): https://jsfiddle.net/mplungjan/xc6uc46m/

Just disable the button on click, something like:
$("#my-button-id").on("click", function() {
$(this).attr("disabled", "disabled");
});

var bool = true;
function onclick()
{
if(bool)
{
//do stuff
bool = false;
}
else
{
//ignore
}
}

You could disable the button on the form when it is clicked, and then continue to perform the action. You would probably change the text to say "loading..." or some such.
You may also want to re-enable the button on fail or complete of the ajax request.
I've done this many times similar to this: https://stackoverflow.com/a/19220576/89211

On submit function is not called

At the end of the document I have:
<script>
$("#submitEvent").click(function() {
$("#eventForm").submit();
});
$(document).ready(function() {
$('#eventForm').submit(function() {
console.log("I am on submit");
}); });
</script>
Now submitEvent is button which is not within a form so and the reason for having on .click event.
When button is pressed the form submit is triggered correctly:
<form id="eventForm" action="${contextPath}/dashboard/event/new"
method="post">
Now I expect another event to be fired when submit is fired which actually is ignored for some reason. Instead of console.log I am not surprisingly going to use ajax, but even console.log does not print anything so the event is not triggered..
Update, did as you suggested still nothing :-) :
$(document).ready(function() {
$("#submitEvent").click(function() {
$("#eventForm").submit();
});
$('#eventForm').submit(function() {
console.log("I am on submit");
});
});

If your reason for saying the form submit handler isn't being called is that you don't see the output in the console, remember that submitting a form completely tears down and replaces the page. You probably don't have time to see the log message before the console gets cleared.
In a comment, you said:
Hm, so how can I check if ajax will be called.
You can check by setting a breakpoint on your console.log statement and seeing if the breakpoint gets hit. Or if you want to debug 1990's-style, use an alert.
But note that doing ajax from within a form submit handler, if the form's result will replace the page, is unreliable. (If the form's result won't replace the page, you're probably fine.) This is because ajax is asynchronous, meaning your submit handler could start it, but it wouldn't have time to finish before being cancelled by the teardown.

Try this...
$(document).ready(function() {
$("#submitEvent").click(function() {
$("#eventForm").submit();
});
$('#eventForm').submit(function(e) {
e.preventDefault();
console.log("I am on submit");
});
});
It will stop the form submitting so you can see, for now, if the event is actually being triggered or not.
It may simply be that the form being submitted is reloading the page before you see the console output.

You just need to move your code inside the ready function
<script>
$(document).ready(function() {
$("#submitEvent").click(function() {
// run ajjax code here
});
$('#eventForm').submit(function(e) {
e.preventDefault(); // stops the page from submiting
console.log("I am on submit");
});
});
</script>
I updated the code, you don't need to submit the form. just run ajax on click.

jQuery on submit only fires once

I've got a form that is loaded dynamically, with a textarea that I must check for spam before submitting. So I wrote something like this:
$(document).ready(function(){
$('form').live('submit',function(){
if ( $('form textarea').val().match(/https?:\/\/|www\.|\.com/) ) {
return false;
}
return true;
})
});
And it works fine, the first time. However, if I click on the submit button again, the form is submitted without going through the validation. There are some related questions in SO already, but I've tried their answers and can't seem to make it work. I tried for example attaching the listener to the document rather than the form, and using the on method rather than live, but with no luck yet. Any help is appreciated!

The form in $('form textarea') may not be the same form that triggered the submit event, to use the form that triggered the event use this
$('form').live('submit',function(){
if ( $('textarea', this).val().match(/https?:\/\/|www\.|\.com/) ) {
return false;
}
return true;
})

How to stop default href action

I have code in the below format in my JSP.
sumbit
On pressing the link my form gets submitted. However, I need to block the default a href behaviour and just need to call the submit function.The submit function submits the form
I have tried catching the click event on a HREF by jQuery and then firing e.preventDefault(). Following the same, I have picked up the HREF attribute, and then done an eval() to fire the function.
However, I have not been able to stop the default HREF functionality, and a new page is always saved in browser cache.
I also don't have the freedom to manually go in and change the code. Please suggest.
UPDATE
The issue with the code is:
submit
is one of the example of HREF being used in JSP. There may be different type of functions being called, using the above format:
I had used the below jQuery:
$("a[href^=\'javascript\']").live('click',function(e)
{
e.preventdefault();
eval($(this).attr('href'));
return false;
});
However, this does not stop the default HREF functionality. What am I missing?

As you mentioned in your question, you cannot manually change the markup.
So, I think, this is what you really want.
<form id='myform' action=''>
</form>
submit​
​
JS:
function submit() {
document.getElementById('myform').submit();
}
jQuery(function() {
$('a').click(function() {
var href = $(this).attr('href').replace('javascript:','');
console.log(href);
alert('hi');
eval(href);
return false;
});
});​
​
Demo
Update:
You can avoid eval(href), by using window[href]();
See this Demo

Try:
sumbit