Post a validated form to a php page via POST method
Hi All, this is my first post, and I'm only just learning jqury/JavaScript.
i have a form I'd like to send via POST method to a second php page, i have all the validation etc working fine, I'm struggling with the on Submit handler.. once the form is validated...
can anyone please tell/direct me how i can post this form to a php page that will do the data insertion?
my code is in 2 parts: the html (which can be a php page) and the javascript i have used...
many thanks in advance...
the html....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Fancy Form Design: Sign Up</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
<link type="text/css" href="css/smoothness/jquery-ui-1.8.2.custom.css" rel="Stylesheet" />
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" media="screen" href="css/ie.css" />
<![endif]-->
<!-- JS -->
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.pack.js"></script>
<script type="text/javascript" src="js/init4.js"></script>
<style type="text/css">
/* Remove backgrounds */
#field-payment,
#field-payment-type {
background: none;
}
/* Legend */
fieldset#section-payment legend, fieldset#section-bacs legend {
font-size: 2em;
}
/* Note */
fieldset .conditional-note {
font-size: 1.25em;
}
</style>
</head>
<body id="sign-up">
<!-- Container -->
<div id="container"><div id="container-inner">
<h1>New Invoice</h1>
<form action="test.php" method="post">
<fieldset>
<p class="note">Fields marked with an asterisk (<abbr title="Required field">*</abbr>) are required.</p>
<!-- Invoice No -->
<div>
<label for="invoice_no">Invoice No<abbr title="Required field">*</abbr></label>
<input type="text" name="invoice_no" id="invoice_no" />
</div>
<!-- Company select -->
<div>
<label for="company">Company<abbr title="Required field">*</abbr></label>
<select name="company" id="company">
<option selected="selected"></option>
<option value="all">All of these words</option>
<option value="any">Any of these words</option>
</select>
</div>
<!-- Description -->
<div>
<label for="description">Description<abbr title="Required field">*</abbr></label>
<input type="text" name="description" id="description" />
</div>
<!-- invoice total -->
<div>
<label for="amount">Total Amount<abbr title="Required field">*</abbr></label>
<input type="text" name="amount" id="amount" />
</div>
<!-- invoice date -->
<div>
<label for="invoice_date">Invoice Date<abbr title="Required field">*</abbr></label>
<input type="text" name="invoice_date" id="invoice_date" />
</div>
<!-- Comments -->
<div>
<label for="comment">Comments</label>
<textarea name="comment" id="comment" rows="10" cols="5"></textarea>
</div>
</fieldset>
<fieldset>
<!-- Would you like to add payment data now -->
<div id="field-payment">
<ul>
<li>
<input type="checkbox" id="payment" name="payment" value="yes" />
<label for="payment">Insert payment details now</label>
</li>
</ul>
</div>
<!-- Gift Wrapping Details -->
<fieldset id="section-payment">
<legend>Payment Details</legend>
<p class="conditional-note">If you would like to add payment details please fill out the following</p>
<div id="field-payment">
<label class="heading">Payment Type</label>
<ul>
<li>
<input type="radio" id="bacs" name="payment_type" value="bacs" />
<label for="bacs">BACS<abbr title="Required field">*</abbr></label>
</li>
<li>
<input type="radio" id="cheque" name="payment_type" value="cheque" />
<label for="cheque">CHEQUE</label>
</li>
<li>
<input type="radio" id="bank_card" name="payment_type" value="bank card" />
<label for="bank_card">BANK CARD</label>
</li>
<li>
<input type="radio" id="bank_transfer" name="payment_type" value="bank transfer" />
<label for="bank_transfer">BANK TRANSFER</label>
</li>
</ul>
</div>
<!-- amount paid -->
<div>
<label for="amount_paid">Amount Paid<abbr title="Required field">*</abbr></label>
<input type="text" name="amount_paid" id="amount_paid" />
</div>
<!-- date paid -->
<div>
<label for="payment_date">Invoice Date<abbr title="Required field">*</abbr></label>
<input type="text" name="payment_date" id="payment_date" />
</div>
<!-- cheque / bank ref -->
<div>
<label for="ref">Bank/Cheque Ref.<abbr title="Required field"></abbr></label>
<input type="text" name="ref" id="ref" />
</div>
</fieldset>
<!-- Controls -->
<div class="controls">
<input id="submit" name="submit" type="submit" value="Create Profile" />
</div>
</fieldset>
</form>
</div></div> <!-- /Container -->
</body>
</html>
and the javaScript....
$(document).ready(function() {
/*
* Enhancements
*/
// Password Strength
if ($('#sign-up').size()) {
$.getScript(
'js/jquery.passroids.min.js',
function() {
$('form').passroids({
main : "#password"
});
}
);
}
//custom date picker
$(function() {
$("#invoice_date").datepicker();
$("#payment_date").datepicker();
});
// end of date picker
// Selectbox styling
if ($('form select').size()) {
$.getScript(
'js/jquery.selectbox.min.js',
function() {
$('select').selectbox();
// Wrap inputs with styling helper
$('input.selectbox').each(function() {
$(this).wrap('<span id="wrapper_' + $(this).attr('id') + '" class="selectbox-input-wrapper"></span>');
});
}
);
}
/*
* Form Validation
*/
// Set Defaults
jQuery.validator.setDefaults({
errorElement : 'a',
wrapper : 'li',
errorLabelContainer : '#form-messages ul',
focusInvalid: false,
onfocusout: false,
highlight: function(element, errorClass) {
var errorContainer = $(element).parents('div').eq(0),
existingIcon = $('img.icon', errorContainer);
// Account for groups of questions
if ($(element).parents('.group').size()) {
errorContainer = $(element).parents('.group');
}
// Replace any existing icon with error icon
if (existingIcon.size()) {
existingIcon.replaceWith('<img src="images/icon-error.gif" alt="error" class="icon" />');
}
// Otherwise append to container
else {
errorContainer.append('<img src="images/icon-error.gif" alt="error" class="icon" />');
}
// Highlight field
$(element).addClass(errorClass);
},
unhighlight: function(element, errorClass) {
var errorContainer = $(element).parents('div').eq(0);
// Account for groups of questions
if ($(element).parents('.group').size()) {
errorContainer = $(element).parents('.group');
}
// Replace icon with that of success
if ($(':input.error', errorContainer).size() <= 1) {
$('img.icon', errorContainer).replaceWith('<img src="images/icon-valid.gif" alt="Valid" class="icon" />');
}
// Unhighlight field
$(element).removeClass(errorClass);
},
showErrors: function(errorMap, errorList) {
var numErrors = this.numberOfInvalids();
this.defaultShowErrors();
// Populate/update error message
if (!$('h2', errorContainer).size()) {
errorContainer.prepend('<h2></h2>');
}
if (numErrors) {
$('h2', errorContainer).html('<strong>Oops!</strong> Your form contains ' + numErrors + " error" + ((numErrors == 1) ? '' : 's') + ':');
$(this.currentForm).removeClass('valid');
}
// Success is ours!
else {
$('h2', errorContainer).text('All errors have been corrected, please continue');
$(this.currentForm).addClass('valid');
}
// Setup links
$('a', errorContainer).each( function() {
var el = $(this),
fieldID = el.attr('htmlfor'),
field = $('#' + fieldID);
// Add href attribute to linsk
el.attr('href', '#' + fieldID);
// Focus on click
el.bind('click', function() {
field.trigger('focus');
$('html,body').animate(
{scrollTop: field.offset().top - 20}, 100
);
return false;
});
});
},
submitHandler: function(form) {
$(form).hide();
$('<p class="introduction">Form data is valid...</p>')
.insertBefore(form)
.show();
$('html,body').animate(
{scrollTop: $("div#form-messages").offset().top}, 1000
);
}
});
// Add a placeholder for form messages
var errorContainer = $('<div id="form-messages"><ul></ul></div>').hide();
errorContainer.insertBefore('fieldset div:first');
// Bind event to invalid form submission
$("form").bind("invalid-form.validate", function(e, validator) {
errorContainer.show();
$('html,body').animate(
{scrollTop: errorContainer.offset().top - 20}, 100
);
errorContainer.focus();
});
// Override default messages
$.extend($.validator.messages, {
required : "This field is required",
email : "Please enter a valid email",
digits : "Please enter a numeric value"
});
/*
* Initiate Validation Plugin
*/
$('#sign-up form').validate({
rules : {
// invoice no
'invoice_no' : {
required : true
},
// company select
'company' : {
required : true
},
// description
'description' : {
required : true,
},
// total
'amount' : {
required : true,
number : true
},
// invoice date
'invoice_date' : {
required : true,
date : true
},
// amount paid
'amount_paid' : {
required : "#payment:checked",
number : true
},
// payment type
payment_type : {
required : true,
},
// payment
'payment_date' : {
date : true,
required : "#payment:checked"
},
// cheque ref
'ref' : {
required : "#cheque:checked",
},
},
messages : {
'invoice_no' : {
required : 'Enter invoice number'
},
'company' : {
required : 'Select a company'
},
'description' : {
required : 'Enter a brief description'
},
'amount' : {
required : 'Enter the Invoice total',
number : 'Enter a valid invoice total'
},
'invoice_date' : {
required : 'Choose invoice date',
date : 'Ensure a valid invoice date is selected'
},
'payment_type' : {
required : 'Select a method of payment',
},
'amount_paid' : {
required : 'Enter the amount paid',
number : 'Enter a valid amount paid'
},
'payment_date' : {
required : 'You need to select date of payment',
date : 'Ensure a valid payment date is selected'
},
'ref' : {
required : 'Enter a Cheque/Ref number',
},
}
});
$(document).ready( function() {
var conditionalSection = $('#section-payment'),
dependentField = $('input[name=payment]');
// Trigger change event for IE
if ($.browser.msie) {
$(dependentField).click(function() {
dependentField.blur().focus();
});
var label = $("label[for=" + dependentField.attr("id") + "]");
$(label).click(function() {
dependentField.blur().focus();
});
}
dependentField.bind('change', function() {
// If valid and not visible show conditional section
if (dependentField.is(':checked') && conditionalSection.not(':visible')) {
conditionalSection.slideDown();
$(":input", conditionalSection).removeAttr("disabled");
}
// Otherwise if visible hide the conditional section
else if (conditionalSection.is(':visible')) {
conditionalSection.slideUp();
$(":input", conditionalSection).attr("disabled", "disabled");
}
});
// Trigger change on load
dependentField.trigger('change');
});
});
i have a form I'd like to send via POST method to a second php page, i have all the validation etc working fine, I'm struggling with the on Submit handler.. once the form is validated...
can anyone please tell/direct me how i can post this form to a php page that will do the data insertion?
my code is in 2 parts: the html (which can be a php page) and the javascript i have used...
many thanks in advance...
the html....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Fancy Form Design: Sign Up</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
<link type="text/css" href="css/smoothness/jquery-ui-1.8.2.custom.css" rel="Stylesheet" />
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" media="screen" href="css/ie.css" />
<![endif]-->
<!-- JS -->
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.pack.js"></script>
<script type="text/javascript" src="js/init4.js"></script>
<style type="text/css">
/* Remove backgrounds */
#field-payment,
#field-payment-type {
background: none;
}
/* Legend */
fieldset#section-payment legend, fieldset#section-bacs legend {
font-size: 2em;
}
/* Note */
fieldset .conditional-note {
font-size: 1.25em;
}
</style>
</head>
<body id="sign-up">
<!-- Container -->
<div id="container"><div id="container-inner">
<h1>New Invoice</h1>
<form action="test.php" method="post">
<fieldset>
<p class="note">Fields marked with an asterisk (<abbr title="Required field">*</abbr>) are required.</p>
<!-- Invoice No -->
<div>
<label for="invoice_no">Invoice No<abbr title="Required field">*</abbr></label>
<input type="text" name="invoice_no" id="invoice_no" />
</div>
<!-- Company select -->
<div>
<label for="company">Company<abbr title="Required field">*</abbr></label>
<select name="company" id="company">
<option selected="selected"></option>
<option value="all">All of these words</option>
<option value="any">Any of these words</option>
</select>
</div>
<!-- Description -->
<div>
<label for="description">Description<abbr title="Required field">*</abbr></label>
<input type="text" name="description" id="description" />
</div>
<!-- invoice total -->
<div>
<label for="amount">Total Amount<abbr title="Required field">*</abbr></label>
<input type="text" name="amount" id="amount" />
</div>
<!-- invoice date -->
<div>
<label for="invoice_date">Invoice Date<abbr title="Required field">*</abbr></label>
<input type="text" name="invoice_date" id="invoice_date" />
</div>
<!-- Comments -->
<div>
<label for="comment">Comments</label>
<textarea name="comment" id="comment" rows="10" cols="5"></textarea>
</div>
</fieldset>
<fieldset>
<!-- Would you like to add payment data now -->
<div id="field-payment">
<ul>
<li>
<input type="checkbox" id="payment" name="payment" value="yes" />
<label for="payment">Insert payment details now</label>
</li>
</ul>
</div>
<!-- Gift Wrapping Details -->
<fieldset id="section-payment">
<legend>Payment Details</legend>
<p class="conditional-note">If you would like to add payment details please fill out the following</p>
<div id="field-payment">
<label class="heading">Payment Type</label>
<ul>
<li>
<input type="radio" id="bacs" name="payment_type" value="bacs" />
<label for="bacs">BACS<abbr title="Required field">*</abbr></label>
</li>
<li>
<input type="radio" id="cheque" name="payment_type" value="cheque" />
<label for="cheque">CHEQUE</label>
</li>
<li>
<input type="radio" id="bank_card" name="payment_type" value="bank card" />
<label for="bank_card">BANK CARD</label>
</li>
<li>
<input type="radio" id="bank_transfer" name="payment_type" value="bank transfer" />
<label for="bank_transfer">BANK TRANSFER</label>
</li>
</ul>
</div>
<!-- amount paid -->
<div>
<label for="amount_paid">Amount Paid<abbr title="Required field">*</abbr></label>
<input type="text" name="amount_paid" id="amount_paid" />
</div>
<!-- date paid -->
<div>
<label for="payment_date">Invoice Date<abbr title="Required field">*</abbr></label>
<input type="text" name="payment_date" id="payment_date" />
</div>
<!-- cheque / bank ref -->
<div>
<label for="ref">Bank/Cheque Ref.<abbr title="Required field"></abbr></label>
<input type="text" name="ref" id="ref" />
</div>
</fieldset>
<!-- Controls -->
<div class="controls">
<input id="submit" name="submit" type="submit" value="Create Profile" />
</div>
</fieldset>
</form>
</div></div> <!-- /Container -->
</body>
</html>
and the javaScript....
$(document).ready(function() {
/*
* Enhancements
*/
// Password Strength
if ($('#sign-up').size()) {
$.getScript(
'js/jquery.passroids.min.js',
function() {
$('form').passroids({
main : "#password"
});
}
);
}
//custom date picker
$(function() {
$("#invoice_date").datepicker();
$("#payment_date").datepicker();
});
// end of date picker
// Selectbox styling
if ($('form select').size()) {
$.getScript(
'js/jquery.selectbox.min.js',
function() {
$('select').selectbox();
// Wrap inputs with styling helper
$('input.selectbox').each(function() {
$(this).wrap('<span id="wrapper_' + $(this).attr('id') + '" class="selectbox-input-wrapper"></span>');
});
}
);
}
/*
* Form Validation
*/
// Set Defaults
jQuery.validator.setDefaults({
errorElement : 'a',
wrapper : 'li',
errorLabelContainer : '#form-messages ul',
focusInvalid: false,
onfocusout: false,
highlight: function(element, errorClass) {
var errorContainer = $(element).parents('div').eq(0),
existingIcon = $('img.icon', errorContainer);
// Account for groups of questions
if ($(element).parents('.group').size()) {
errorContainer = $(element).parents('.group');
}
// Replace any existing icon with error icon
if (existingIcon.size()) {
existingIcon.replaceWith('<img src="images/icon-error.gif" alt="error" class="icon" />');
}
// Otherwise append to container
else {
errorContainer.append('<img src="images/icon-error.gif" alt="error" class="icon" />');
}
// Highlight field
$(element).addClass(errorClass);
},
unhighlight: function(element, errorClass) {
var errorContainer = $(element).parents('div').eq(0);
// Account for groups of questions
if ($(element).parents('.group').size()) {
errorContainer = $(element).parents('.group');
}
// Replace icon with that of success
if ($(':input.error', errorContainer).size() <= 1) {
$('img.icon', errorContainer).replaceWith('<img src="images/icon-valid.gif" alt="Valid" class="icon" />');
}
// Unhighlight field
$(element).removeClass(errorClass);
},
showErrors: function(errorMap, errorList) {
var numErrors = this.numberOfInvalids();
this.defaultShowErrors();
// Populate/update error message
if (!$('h2', errorContainer).size()) {
errorContainer.prepend('<h2></h2>');
}
if (numErrors) {
$('h2', errorContainer).html('<strong>Oops!</strong> Your form contains ' + numErrors + " error" + ((numErrors == 1) ? '' : 's') + ':');
$(this.currentForm).removeClass('valid');
}
// Success is ours!
else {
$('h2', errorContainer).text('All errors have been corrected, please continue');
$(this.currentForm).addClass('valid');
}
// Setup links
$('a', errorContainer).each( function() {
var el = $(this),
fieldID = el.attr('htmlfor'),
field = $('#' + fieldID);
// Add href attribute to linsk
el.attr('href', '#' + fieldID);
// Focus on click
el.bind('click', function() {
field.trigger('focus');
$('html,body').animate(
{scrollTop: field.offset().top - 20}, 100
);
return false;
});
});
},
submitHandler: function(form) {
$(form).hide();
$('<p class="introduction">Form data is valid...</p>')
.insertBefore(form)
.show();
$('html,body').animate(
{scrollTop: $("div#form-messages").offset().top}, 1000
);
}
});
// Add a placeholder for form messages
var errorContainer = $('<div id="form-messages"><ul></ul></div>').hide();
errorContainer.insertBefore('fieldset div:first');
// Bind event to invalid form submission
$("form").bind("invalid-form.validate", function(e, validator) {
errorContainer.show();
$('html,body').animate(
{scrollTop: errorContainer.offset().top - 20}, 100
);
errorContainer.focus();
});
// Override default messages
$.extend($.validator.messages, {
required : "This field is required",
email : "Please enter a valid email",
digits : "Please enter a numeric value"
});
/*
* Initiate Validation Plugin
*/
$('#sign-up form').validate({
rules : {
// invoice no
'invoice_no' : {
required : true
},
// company select
'company' : {
required : true
},
// description
'description' : {
required : true,
},
// total
'amount' : {
required : true,
number : true
},
// invoice date
'invoice_date' : {
required : true,
date : true
},
// amount paid
'amount_paid' : {
required : "#payment:checked",
number : true
},
// payment type
payment_type : {
required : true,
},
// payment
'payment_date' : {
date : true,
required : "#payment:checked"
},
// cheque ref
'ref' : {
required : "#cheque:checked",
},
},
messages : {
'invoice_no' : {
required : 'Enter invoice number'
},
'company' : {
required : 'Select a company'
},
'description' : {
required : 'Enter a brief description'
},
'amount' : {
required : 'Enter the Invoice total',
number : 'Enter a valid invoice total'
},
'invoice_date' : {
required : 'Choose invoice date',
date : 'Ensure a valid invoice date is selected'
},
'payment_type' : {
required : 'Select a method of payment',
},
'amount_paid' : {
required : 'Enter the amount paid',
number : 'Enter a valid amount paid'
},
'payment_date' : {
required : 'You need to select date of payment',
date : 'Ensure a valid payment date is selected'
},
'ref' : {
required : 'Enter a Cheque/Ref number',
},
}
});
$(document).ready( function() {
var conditionalSection = $('#section-payment'),
dependentField = $('input[name=payment]');
// Trigger change event for IE
if ($.browser.msie) {
$(dependentField).click(function() {
dependentField.blur().focus();
});
var label = $("label[for=" + dependentField.attr("id") + "]");
$(label).click(function() {
dependentField.blur().focus();
});
}
dependentField.bind('change', function() {
// If valid and not visible show conditional section
if (dependentField.is(':checked') && conditionalSection.not(':visible')) {
conditionalSection.slideDown();
$(":input", conditionalSection).removeAttr("disabled");
}
// Otherwise if visible hide the conditional section
else if (conditionalSection.is(':visible')) {
conditionalSection.slideUp();
$(":input", conditionalSection).attr("disabled", "disabled");
}
});
// Trigger change on load
dependentField.trigger('change');
});
});
Topic Participants
hr
Kevin Boudloche