My jquery validation script is below. When i click the submit button it does not submit the form data to mysql. The submit button is called submit. If I remove the jquery validation script it submits to mysql so it is an issue with the validation script.
Jquery Validation script:
$(function() {
function validate(id) {
var enabled = ($("input[name='attendance" + id + "']:checked").val() == 'Yes');
if (enabled) {
//Please select option is selected
if ($("#food" + id)[0].selectedIndex == 0 || $("#drink" + id)[0].selectedIndex == 0) {
alert('Please select color');
return false;
}
}
return true;
};
$("input[name^='attendance']").click(function(e) {
var id = this.name.replace('attendance', '');
$("#food" + id + ", #drink" + id).prop("disabled", this.value == 'No');
validate(id);
});
$("input:submit").click(function(event) {
event.preventDefault();
var retVal = false;
$.each([1, 2], function(i, val) {
retVal = (validate(val) || retVal);
});
if (retVal) {
$('list').submit();
}
});
});
submit button:
<input type="submit" name="submit" id="submit" value="Submit" />
form data:
<form name="colour" action="" method="post" id="list">
The selector in the submit()
is incorrect. You're looking for the form by its id, list
. Your selector is looking for tags called <list>
.
if(retVal){$('list').submit();}
// Should be
if(retVal){$('#list').submit();}
Update: if it won't submit in IE:if (retVal) {
document.getElementById('list').submit();
}
Instead of binding this to the submit button's .click()
, bind it to the form's .submit()
and return true or false:
// Bind to the form's .submit()
$("#list").submit(function(event) {
event.preventDefault();
var retVal = false;
$.each([1, 2], function(i, val) {
retVal = (validate(val) || retVal);
});
// return the true/false to the submit action
// false will prevent submission.
return retVal;
});