Archive for the ‘AJAX’ Category

Conditional Form Submit (With or Without AJAX)

Tuesday, November 27th, 2007

Without AJAX:

<script>
function validateForm() {
if (ok) { // everything’s OK, we can submit the form
return true;
} else {
return false;
}
}

</script>

<form onSubmit=”return validateForm()”>
<input type=”submit” value=”Submit”>
</form>

///////////////////////////////////////////////////////

With AJAX:

If submitting the form depends on a value returned via AJAX the method above seems not to work (I used Prototype for the AJAX management).
In this case, I propose an alternative method:

<script>

function validateForm() {
if (ok) { // everything’s OK, we can submit the form// Simulating the click on a submit button (could be useful server-side)
newHiddenField = document.createElement(”input”);
newHiddenField.setAttribute(”type”, “hidden”);
newHiddenField.setAttribute(”name”, “item_submit”);
newHiddenField.setAttribute(”value”, “Submit”);
$(’form_id’).appendChild(newHiddenField);
document.form_name.submit();
} else {
return false;
}
}

</script>

<form name=”form_name” id=”form_id“>
<input type=”button” name=”item_submit” value=”Submit” onClick=”validateForm()”>
</form>