I've been struggling to reset a form within a dialog window upon close. My form is using jQuery validate and I've tried to use the documented resetForm() function, but no luck.
Below are two attempts on how I am trying to achieve clearing the form upon the user hitting "Close". Neither are working.
Here's the jsFiddle: http://jsfiddle.net/FjT7T/6/
$("#myDialog").dialog({
autoOpen: false,
close: function(event, ui) {
// Attempt to reset the form using JQuery validates resetForm(), not working.
var validator = $("#myForm").validate();
validator.resetForm();
// Attempt to reset the form and remove the error classes, not working either.
$(this).closest("form")[0].reset().removeClass("error");
}
});
Have you tried plain javascript reset?
document.getElementById('myForm').reset();
Or even jQuery, but with the form's id:
$("#myForm").reset();
And to remove the class, why note use the #id
$("#myForm").removeClass("error");
Related
I need to disable or place a loading image over the form once the submit has been validated. Either one works for me. I have found numerous ways to disable the submit button after you click once, but this does not take in account for validation errors.
I've tried to look this up in many different ways but I can't seem to find something that works.
I am using the default prototype form Magento uses on my current form.
This is what I currently have:
var contactForm = new VarienForm('productcontactForm', true);
contactForm.submit = function(){
if (this.validator.validate()) {
$('#productcontactForm').submit(function(){
$('input[type=submit]', this).attr('enabled', 'enabled');
});
} else {
$('#productcontactForm').submit(function(){
$('input[type=submit]', this).attr('disabled', 'disabled');
});
}
}.bind(contactForm);
I'm sorry, I don't run Magento, but I do see a problem. There is no such thing as an 'enabled' attribute in html, javascript or jquery. To enable an input use:
<..selector..>.removeAttr('disabled');
So to disable an input you add the 'disabled' attribute and to enable it again you remove that attribute.
I'm using Twitter Boostraps component collapse to reveal some fields which is done by clicking in another field. However, if I click the same field again the other fields get hidden again (i.e toggling).
What I want is to disable the toggling so that the fields won't hide when clicking the field a second time. Could this be done easily with some built-in methods or do I need to dive deep into the js file to change it myself?
You should be able to do something as simple as..
$('#myDiv').on('hide.bs.collapse', function (e) {
preventDefault(e);
})
This handles the Bootstrap 3 hide.bs.collapse event, and prevents the DIV from being hidden again.
Demo: http://bootply.com/75650
The solution is actually pretty simple and the one marked as correct comes pretty close, here is how you can disable the toggle mechanism:
$('#myDiv').on('hide.bs.collapse', function (e) {
return isMyDivEnabled(); // true or false
}).on('show.bs.collapse', function (e) {
return isMyDivEnabled(); // true or false
});
Cheers
Chris
I'm using jQuery Validate in a form within a jQuery dialog. When the user closes the dialog I wish to clear all form fields and reset the fields which have error feedback displayed.
It is correctly resetting the fields to blank, but the error feedback is not being cleared properly.
Here's my dialog code.
// Attach dialog
$("#myDialog").dialog({
autoOpen: false,
modal: true,
close: function(){
$('#myDialog')[0].reset(); // This works in resetting the actual form values
$("#myDialog").validate().resetForm(); // Not working :(
}
});
Is the form id myDialog?
If so, I would change the structure to be:
<div id="myDialog>
<form id="myForm">
//inputs, etc...
</form>
</div>
So then your dialog call would look like:
$("#myDialog").dialog({
autoOpen: false,
modal: true,
close: function(){
//$('#myForm')[0].reset(); // This works in resetting the actual form values
$("#myForm").validate().resetForm(); // Not working :(
}
});
I think you are running into collisions with having jQuery UI act on the #myDialog in conjunction with it being the form you are trying to validate.
Another option is to destroy the dialog on close, and always recreate it on open.
If they are still not clearing, changing close to beforeClose works, so they are cleared before the dialog is closed and moved on the DOM.
Currently I'm using JQuery UI's datepicker range, and I've added some more javascript that should submit the form on the page when different form elements change.
This works on the drop down I've added, as well as the date picker input boxes if I enter dates manually and then click away.
However, if I click an input field for the datepicker, and the date chooser pops up, the form will not submit after choosing a date..
Its as if the input field didn't know a change occured..?
http://api.jquery.com/change/
here is the code I'm using:
$(document).ready(function() {
$('#from').change(function() {
document.myform.submit();
});
});
$(document).ready(function() {
$('#to').change(function() {
document.myform.submit();
});
});
Using the datepicker UI events, I've added the following code for testing but it isn't working.. any ideas?
$(document).ready(function() {
$('#from').datepicker({
onClose: function() { alert('Yo yo!') }
});
});
The jQuery UI DatePicker has custom events, particularly the onSelect event, click the event's tab and it's at the bottom of the docs:
http://jqueryui.com/demos/datepicker/
Double check there are no JavaScript errors above the code you quoted.
If there are errors then the JavaScript code below these errors will not execute properly.
That is probably why the code you added to test did not work either.
The correct answer is here: jQuery datepicker, onSelect won't work
I hope it should be on focus . on click of date picker the focus will be in the text box where you have to show the date.
so the event should be .focus()
http://api.jquery.com/focus/
http://api.jquery.com/focusout/
Ok, I am using umbraco forum module, and on the comment form it uses jquery validate plugin.
The problem is that I have added a search button on the same page using a UserControl, the search submit button triggers the comment form submission validation.
I have done some research, and added the 'cancel' css class to the button. This bypass the first validation issue, however, it still fall into the 'submitHandler'. Have read the source code and find a way to detect whether the search button triggers the submission. however, there is not a nice way to bypass the handler.
I am currently using a ugly way to do it: create javascript errors! I would like to know a nicer way to do the job. Many thanks!
Btw, I am currently using:
submitHandler: function (form) {
$(form).find(':hidden').each(function () {
var name = $(this).attr('name');
if (name && name.indexOf('btnSearch') === name.length - 'btnSearch'.length) {
// this is a dirty hack to avoid the validate plugin to work for the button
eval("var error = 1 2 ''");
}
});
// original code from umbraco ignored here....
}
...............
there is similar question here:
jQuery Validation plugin: disable validation for specified submit buttons
(it is a little bit different, as the submitHandler is used in this one...)
Use ignore and set the selector to whatever you need it to be.
$("#myform").validate({
ignore: ".ignore"
})