简单的jquery ajax提交表单无表单验证-freejs.net代码演示

首页>>表单>>简单的jquery ajax提交表单无表单验证(2014-11-05)

简单的jquery ajax提交表单无表单验证

XML/HTML Code

<form id="submit" method="post" name="submit" action="">
<fieldset>
<legend>Enter Information</legend>
<label for="fname">Client First Name:</label>
<br>
<input type="text" name="fname" id="fname" class="text" size="20">
<br>
<label for="lname">Client Last Name:</label>
<br>
<input type="text" name="lname" id="lname" class="text" size="20">
<br><br>
<button type="submit" class="button positive"> <img src="tick.png" alt=""> Add Client </button>
</fieldset>
</form>
<div class="success" style="display:none;">
<p>Client has been added.</p>
</div>

JavaScript Code

<script type"text="" javascript"="">
$(document).ready(function(){
$("form#submit").submit(function() {
// we want to store the values from the form input box, then send via ajax below
var fname = $('#fname').attr('value');
var lname = $('#lname').attr('value');
$.ajax({
type: "POST",
url: "ajax.php",
data: "fname="+ fname + "&lname=" + lname,
success: function(){
$('form#submit').hide();
//$('form#submit :input').val("");
$('div.success').fadeIn();
}
});
return false;
});
});
</script>