newbie looking for help adding/understanding dynamic form fields
Hello,
I'm new to jQuery, and I think I understand the basics but I could use some help understanding the finer points.
I'm working on a form using the validator plug-in, and I want to include a section where a user can dynamically add more rows to the form to add additional info, similar to the "jQuery validation plug-in - dynamic forms demo" at http://jquery.bassistance.de/validate/demo/dynamic-totals.html
However, I don't want the validation to happen until the user clicks submit at the end of the form.
The demo code looks like this:
<script type="text/javascript">
// only for demo purposes
$.validator.setDefaults({
submitHandler: function() {
alert("submitted!");
}
});
$.validator.messages.max = jQuery.format("Your totals musn't exceed {0}!");
$.validator.addMethod("quantity", function(value, element) {
return !this.optional(element) && !this.optional($(element).parent().prev().children("select")[0]);
}, "Please select both the item and its amount.");
$().ready(function() {
$("#orderform").validate({
errorPlacement: function(error, element) {
error.appendTo( element.parent().next() );
},
highlight: function(element, errorClass) {
$(element).addClass(errorClass).parent().prev().children("select").addClass(errorClass);
}
});
var template = jQuery.format($("#template").val());
function addRow() {
$(template(i++)).appendTo("#orderitems tbody");
}
var i = 1;
// start with one row
addRow();
// add more rows on click
$("#add").click(addRow);
// check keyup on quantity inputs to update totals field
$("#orderform").delegate("keyup", "input.quantity", function(event) {
var totals = 0;
$("#orderitems input.quantity").each(function() {
totals += +this.value;
});
$("#totals").attr("value", totals).valid();
});
});
</script>
I've been able to modify this code to create the dynamic section I want (using divs instead of tables). This is just a subsection of the larger form:
http://www.marietta.edu/~webadmin/test_stuff/jQuery/dynamic5.html
here's my code:
<script type="text/javascript">
$.validator.addMethod("quantity", function(value, element) {
return !this.optional(element) && !this.optional($(element).parent().prev().children("select")[0]);
}, "Please select both the item and its amount.");
$().ready(function() {
$("#residenceform").validate({
errorPlacement: function(error, element) {
error.appendTo( element.parent().next() );
},
highlight: function(element, errorClass) {
$(element).addClass(errorClass).parent().prev().children("select").addClass(errorClass);
}
});
var template = jQuery.format($("#template").val());
function addRow() {
$(template(i++)).appendTo("#bigfield #residenceitems");
}
var i = 1;
// start with one row
addRow();
// add more rows on click
$("#add").click(addRow);
// check keyup on quantity inputs to update totals field
$("#residenceform").delegate("keyup", "input.quantity", function(event) {
var totals = 0;
$("#residenceitems input.quantity").each(function() {
totals += +this.value;
});
$("#totals").attr("value", totals).valid();
});
});
</script>
I know there's a lot more in there than I need, and the validation is being called when you click the "Add another residency" button and I don't want it to, but I'm not sure how to strip that out without breaking it.
My problem is there's a lot happening here that I don't understand, and if someone could help explain, or suggest an alternate method for dynamically adding the div contents without calling the validation, I'd be most grateful.
Thanks,
-chris