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;
})
Related
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
For now it seems to work without problems but I was wondering...Let's say you have multiple forms (each on a different page) with each and one of them a different id.
Each form has a button with and id "btnSave". In the masterpage (template) I added all links to the ajax-formhandling-scripts working like this:
$(document).ready(function() {
// ignore the submit
$("#frmNews").submit(function() {
return false;
});
// catch the click-event
$("#btnSave").on("click", function() {
// input control
// ajax-request if input was ok
}
});
Before I continue to build I want to know sure using the same button-id won't give me problems. Am I working wrong here?
Repeated id attribute values are invalid - they must be unique. Use a class instead. Also, from a design point of view you should hang all logic off the submit event of the form. Try something like this:
$(document).ready(function() {
// ignore the submit
$(".frmNews").submit(function(e) {
// input control
if (input_control_ok) {
// $.ajax()...
}
else {
e.preventDefault(); // stop form submission
}
});
});
The .btnSave button should then have the type="submit" attribute added to it, assuming it doesn't already.
I can't find any documentation that is helping me figure this out. It seems like a very straightforward thing for Parsleyjs to do.
What I want is until my form is valid, to disable the submit button - this is my default in my HTML:
<input id="new-node-form-submit" type="submit" value="done" disabled>
When the form knows it's valid, it should remove the disabled attribute from the submit button. If the form becomes invalid again as the user is filling it out, the disabled attribute should be added back.
I am trying to use the Parsley documentation to add a listener to the form and then check if the form is valid, but I can't seem to get this working. Any suggestions? This seems like a really straightforward thing that somehow I am just not getting.
$( '#new-node-form' ).parsley( 'addListener', {
var isValid = $( '#new-node-form' ).parsley ( 'validate' );
if(isValid == true) {
console.log("Your form is valid!");
}
}
Your javascript is invalid in the example you gave. The second argument to the parsley('addListener') call should be a javascript object where the properties of the object are the parsley events to add the listener to:
var $form = $('#new-node-form');
$form.parsley('addListener', {
onFieldValidate: function() {
console.log('form valid=', $form.parsley('isValid'));
}
});
The question is old and probably parsley updated its API but I can't get addListener working, here's an alternative:
$(function() {
window.Parsley.on('field:validate', function() {
var form = this.$element.closest("form"),
submit = form.find('.xbtn-submit');
if (form.parsley().isValid()) {
submit.removeAttr("disabled");
} else {
submit.attr("disabled", "disabled");
}
});
});
I have a search form (you can see the form here) that uses some javascript to check that at least one field has been completed before allowing a search to take place.
I'm not great with Javascript so please bear with me. I've managed to get the validation working (with the help of brilliant Stack Overflow users), and get the submit button to be re-enabled once the form has passed validation using the following code:
$(function(){
$('#detailed-search-form').on('submit',function(e){
e.preventDefault();
var oneFilled = checkFields($(this));
if(oneFilled) {
$(this).unbind('submit').submit()
} else {
overlay();
}
});
});
The trouble is that the first click on the submit button doesn't actually submit the form, it simply enables the button. This the needs another click before the form is submitted.
Hopefully there's a way I can get the form to not only re-enable the button when it's clicked, but also submit the form without the need for a second click?
Any help will be greatly appreciated!
Thanks in advance,
Tom
The submit handler you wrote should basically say "hey, if you didn't provide at least one field, I'll prompt you a nice green overlay, otherwise let's move on with the search" - no need to unbind anything.
$(function(){
$('#detailed-search-form').on('submit',function(e){
if( !checkFields($(this)) ) {
// if the form isn't valid, show overlay
overlay();
return false;
} else {
// else just continue with form action
return true;
}
});
});
We have a website built in .NET and jQuery. We have custom jQuery to call the load method on a processing ASP.NET page. That ajax call is fired in a click handler, e.g.
$("#Submit").click(function(){
$(a_selector).load("Process.aspx?data=" + someDataObject, null, function(){
alert("Done")});
}
return false;
);
Our issue is when we hit the #Submit button the click is fired which calls the ajax to process it. People seem to be double-clicking the button and therefore we're getting multiple results in our database from the dual clicks. Does anyone have an idea on how to prevent this issue? I considered something like disabling the button via JS but I'd like to know of other ideas.
Use the one function of jQuery. This way, the event is only ever fired once. Of course, you should also disable the button so the user knows that clicking on it is futile. In addition, show a spinner, progress bar, or change the cursor styling to indicate to the user that something is happening and the system isn't stuck.
stop propagation
$("#Submit").click(function(event){
event.stopPropagation();
if (typeof $_submitSend == "undefined")
var $_submitSend = true;
else if ($_submitSend == true)
return false;
$_submitSend = true;
$(this).attr("disabled", "disabled");
$(a_selector).load("Process.aspx?data=" + someDataObject, null, function(){
alert("Done")});
$_submitSend = false;
$(this).removeAttr("disabled");
}
);
$("#Submit").click(function(){
$(a_selector).removeClass("class").load("Process.aspx?data=" + someDataObject, null, function(){
$(this).addClass("class");
alert("Done")});
}
return false;
);
Then just add some specific class without any styling which you will use as a selector. Dont know if it will work the way you want, but it looks like simplest solution to me... :)