(validate) will not submit to server
I have a form which uses the calculate and validate plugins. It also allows the user to dynamically add/remove rows of form elements (each with unique ID/name attributes). If I put $("#reproform").validate(); at the top of the $(document).ready function block, the validation works -- but the submit button never submits the form. If I put the validate() at the bottom of the function block, the submit button submits the form but the validation doesn't work.
At one point I had a custom validation rule which I thought might be the culprit but I commented it out and the behavior is the same.
- <script type="text/javascript" src="http://library.nau.edu/scripts/jQuery/jquery.js"></script>
<script type="text/javascript" src="http://library.nau.edu/scripts/jQuery/plugins/jquery.calculation.js"></script>
<script type="text/javascript" src="http://library.nau.edu/scripts/jQuery/plugins/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#reproform").validate(); // this needs to be near the top of the script otherwise the validation will not work
rowcount = 0;
function addrow(destination) {
rowcount++;
clonecopy = $("#row0").clone(true); // 'true' forces jQuery to clone the events/handlers as well as objects
clonecopy.attr("class","iterable");
// update numerical suffixes
clonecopy.attr("id","row_"+rowcount);
clonecopy.find("input[name^='itemid']").attr("name","itemid_"+rowcount);
clonecopy.find("input[name^='cost']").attr("name","cost_"+rowcount);
clonecopy.find("select[name^='quantity']").attr("name","quantity_"+rowcount);
clonecopy.find("select[id^='services']").attr("id","services_"+rowcount);
clonecopy.find("select[name^='services']").attr("name","services_"+rowcount);
clonecopy.insertAfter(destination);
recalc();
}
addrow($("#row0")); // create the first visible row at page load
$(".addrow").click(function() {
parent_row = $(this).parent("td").parent("tr");
addrow(parent_row);
});
$(".removerow").click(function(){
if ($("tr.iterable").length > 1) { // disable delete on only row
parent_row = $(this).parent("td").parent("tr");
parent_row.remove();
recalc();
}
});
$(".calcserv").change (function() { // this is triggered either by the quantity or processing services dropdown
parent_row = $(this).parent("td").parent("tr");
callnum = parent_row.find("input[name^='itemid']");
if (callnum.val()) {
quant = parent_row.find("select[name^='quantity']").val(); // get quantity
eachcost = parent_row.find("select[id^='services']").val().split("_")[1]; // split price off value
parent_row.find("input[name^='cost_']").attr("value",(quant*eachcost)); // update cost field value
recalc();
} else {
alert ('you must enter a Local Call Number first!');
parent_row.find("select[name^='quantity']").attr("name","quantity_"+rowcount).val(0);
parent_row.find("select[id^='services']").attr("id","services_"+rowcount).val(0);
}
});
$(".callnum").keyup (function() {
parent_row = $(this).parent("td").parent("tr");
if ($(this).val() == '') {
parent_row.find("select[id^='services']").attr('disabled', true);
parent_row.find("select[name^='quantity']").attr('disabled', true);
} else {
parent_row.find("select[id^='services']").removeAttr('disabled');
parent_row.find("select[name^='quantity']").removeAttr('disabled');
}
});
$("#rush_fee").click (function() {
$("#rushfee").val($("#rush_fee").is(':checked')?$("#subcost").val():'0'); // add rush fee of 100% if rush checkbox checked
recalc();
});
$("#shipping_option").change (function() {
shipcost = $("#shipping_option").val().split("_")[1];
$("#shipping_cost").val(shipcost);
$("#fedid").css({'visibility': ($("#shipping_option").val() == 'supfdx_0')?'visible':'hidden' }); // hide/show fedex id entry
recalc();
});
function recalc() {
$("#subcost").val($("input[name^='cost_']").sum()); // subtotal rows
totalcost = parseInt($("#subcost").val()) + parseInt($("#rushfee").val()) + parseInt($("#shipping_cost").val()); // total costs
$("#totalcost").val(totalcost);
updaterows();
}
function updaterows() { //embed a list of row numbers in a hidden element so that form processor knows what to expect
$("#orderrows").val($("#reproform").find("tr[id^='row_']").map(function() { return this.id.split("_")[1]}).get().join(','));
}
});
</script>