<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="form.js"></script>
</head>
<?
mysql_connect('localhost','root','');
mysql_select_db('test');
$query="SELECT * FROM user";
$result=mysql_query($query);
?>
<div id="contact_form">
<form name="contact" action="">
<fieldset>
<label for="txn_unit" id="txn_unit">Txn Unit</label>
<SELECT name="namee" id="name">
<OPTION value="">SELECT</OPTION>
<?
while($row=mysql_fetch_assoc($result))
{
?>
<OPTION value="<? echo $row['id']; ?>"><? echo $row['first_name']; ?></OPTION>
<?
}
?>
</SELECT>
<label class="error" for="name" id="name_error">Owner name field is required.</label>
<label for="description" id="desc_label">Description</label>
<input type="text" name="desc" id="desc" size="30" value="" class="text-input">
<label class="error" for="desc" id="desc_error">Description is required.</label>
<label for="income" id="income">Income</label>
<input type="text" name="income" id="income" size="30" value="" class="text-input">
<label class="error" for="income" id="income_error">Income field is required.</label>
<label for="expend" id="expend_label">Expend</label>
<input type="text" name="expend" id="expend" size="30" value="" class="text-input">
<label class="error" for="expend" id="expend_error">Expend field is required.</label>
<label class="error" for="expend" id="combine_error1">In Income and Expend field, one field is required.</label>
<label class="error" for="expend" id="combine_error2">In Income and Expend field, only one field is required.</label>
<br />
<input type="submit" name="submit" class="button" id="submit_btn" value="ok" />
</fieldset>
</form>
$(function() {
$('.error').hide();
$(".button").click(function(){
//validate and process from here
$('.error').hide();
var namee=$("input#namee").val();
if(namee=""){
$("label#name_error").show();
$("input#name").focus();
return false;
}
var income=$("input#income").val();
var expend=$("input#expend").val();
if(income!="" && expend!="")
{
$("label#combine_error2").show();
$("input#income").focus();
$("input#expend").focus();
}
var description=$("input#desc").val();
if(description=="")
{
$("label#desc_error").show();
$("input#desc").focus();
return false;
}
if(income=="" && expend=="")
{
$("label#combine_error1").show();
$("input#income").focus();
$("input#expend").focus();
}
var dataString='name='+namee+'&description='+description+'&income='+income+'&expend='+expend;
$.ajax({
type: "POST",
url: "process.php",
data: dataString,
success: function() {
$('#contact_form').html("<div id='message'></div>");
$('#message').html("<h2>Transaction Saved</h2>")
.hide()
.fadeIn(1500,function(){
$('#message').append("<img id='checkmark' src='images/check.png'/>");
});
}
});
return false;
});
});
1.)with error it submits the form.Mean when we submit without the rule defined in the jquery it submits the form.