我有一个用ajax加载的表单。我正在单击按钮编辑表单。我想在单击提交按钮时清除表单。存储表单的整个表通过ajax加载，因此提交按钮也通过ajax加载。请帮我。提前致谢。
完整代码
<?php include("include/functions.php");?>
<!DOCTYPE html>
<html>
<head>
<title><?php echo $site_title;?></title>
<link rel="stylesheet" href="css/stylesheet.css" />
<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submitbutton").click(function(){
$.ajax({
url:"process.php",
type:"post",
async:false,
data:{"action":"save","form_data":$("#add_contact").serialize()},
success:function(res){
var finalresult=JSON.parse(res);
$("#viewaddressbook table tbody").html(finalresult);
$('#add_contact')[0].reset();
}
});
});
$("#addcontact").on("click", ".updatebutton", function(){
$.ajax({
url:"process.php",
type:"post",
async:false,
data:{"action":"update","form_data":$("#add_contact").serialize()},
success:function(res){
var finalresult=JSON.parse(res);
$(this).closest('form').trigger("reset");
$("#viewaddressbook table tbody").html(finalresult);
}
});
});
$(".editrecord").click(function(e){
e.preventDefault();
$.ajax({
url:"process.php",
type:"post",
async:false,
data:{"action":"edit","id":$(this).attr('id')},
success:function(res){
var finalresult=JSON.parse(res);
$("#viewaddressbook table tbody").html(finalresult);
}
});
});
$(".deleterecord").click(function(e){
e.preventDefault();
});
$("#viewaddressbook").on("click", ".editrecord", function(){
$.ajax({
url:"process.php",
type:"post",
async:false,
data:{"action":"edit","id":$(this).attr('id')},
success:function(res){
var finalresult=JSON.parse(res);
var tableContent='';
tableContent+='<tr>';
tableContent+='<td>Name</td>';
tableContent+='<td><input type="text" name="txtname" value="'+finalresult.name+'" /></td>';
tableContent+='</tr>';
tableContent+='<tr>';
tableContent+='<td>First Name</td>';
tableContent+='<td><input type="text" name="txtfirstname" value="'+finalresult.firstname+'" /></td>';
tableContent+='</tr>';
tableContent+='<tr>';
tableContent+='<td>Street</td>';
tableContent+='<td><input type="text" name="txtstreet" value="'+finalresult.street+'" /></td>';
tableContent+='</tr>';
tableContent+='<tr>';
tableContent+='<td>Zipcode</td>';
tableContent+='<td><input type="text" name="txtzipcode" value="'+finalresult.zipcode+'" /></td>';
tableContent+='</tr>';
tableContent+='<tr>';
tableContent+='<td>City</td>';
tableContent+='<td>'+get_select_data(finalresult.city)+'</td>';
tableContent+='</tr>';
tableContent+='<tr>';
tableContent+='<td colspan="2"><input type="hidden" name="address_book_id" value="'+finalresult.id+'" /><input type="button" value="Submit" id="submitbutton" /></td>';
tableContent+='</tr>';
$("#addcontact tbody").html(tableContent);
$("#submitbutton").addClass('updatebutton');
}
});
});
$("#viewaddressbook").on("click", ".deleterecord", function(){
$.ajax({
url:"process.php",
type:"post",
async:false,
data:{"action":"delete","id":$(this).attr('id')},
success:function(res){
var finalresult=JSON.parse(res);
$("#viewaddressbook table tbody").html(finalresult);
}
});
});
function get_select_data(city_id){
var selectbox='<select name="txtcity">';
selectbox+='<option>--Select--</option>';
$.ajax({
url:"process.php",
type:"post",
async:false,
data:{"action":"get_cities"},
success:function(res){
var finalres=JSON.parse(res);
$.each(finalres, function(key,value){
var abc=value.split('_');
var selectedval;
if(parseInt(abc[1])==city_id){
selectedval='selected';
}
selectbox+='<option value="'+abc[1]+'" '+selectedval+'>'+abc[0]+'</option>';
});
}
});
selectbox+='</select>';
return selectbox;
}
});
</script>
</head>
<body>
<div class="container">
<h3>View Contact</h3>
<div id="viewaddressbook">
<table border="1" width="100%">
<thead>
<tr>
<th>Sr. No.</th>
<th>Name</th>
<th>First Name</th>
<th>Street</th>
<th>Zipcode</th>
<th>City</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<?php
$sql = "select * from address_book";
$get_data = mysql_query($sql);
$count=1;
while($row = mysql_fetch_array($get_data)) {
?>
<tr>
<td><?php echo $count;?></td>
<td><?php echo $row['name'];?></td>
<td><?php echo $row['firstname'];?></td>
<td><?php echo $row['street'];?></td>
<td><?php echo $row['zipcode'];?></td>
<td><?php echo get_city_name($row['city']);?></td>
<td><a href="#" id="<?php echo $row['id'];?>" class="editrecord">Edit</a> <a href="#" id="<?php echo $row['id'];?>" class="deleterecord">Delete</a></td>
</tr>
<?php $count++;}//while ends here ?>
</tbody>
</table>
</div>
<div id="addcontact">
<h3>Add Contact</h3>
<form action="" method="post" id="add_contact">
<table width="100%" border="1">
<thead>
<tr>
<th>Title</th>
<th>Content</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name</td>
<td><input type="text" name="txtname" placeholder="Please enter your name..." /></td>
</tr>
<tr>
<td>First Name</td>
<td><input type="text" name="txtfirstname" placeholder="Please enter your first name..." /></td>
</tr>
<tr>
<td>Street</td>
<td><input type="text" name="txtstreet" placeholder="Please enter your street name..." /></td>
</tr>
<tr>
<td>Zipcode</td>
<td><input type="text" name="txtzipcode" placeholder="Please enter zipcode..." /></td>
</tr>
<tr>
<td>City</td>
<td>
<select name="txtcity">
<option>--Select--</option>
<?php
$sql = "SELECT * from city";
$get_cities = mysql_query($sql);
while($row = mysql_fetch_array($get_cities)){
?>
<option value="<?php echo $row['city_id'];?>"><?php echo $row['city_name'];?></option>
<?php } ?>
</select>
</td>
</tr>
<tr>
<td colspan="2"><input type="button" value="Submit" id="submitbutton" /></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</body>
</html>
编辑通过ajax加载的表单
<form action="" method="post" id="add_contact">
<table width="100%" border="1">
<thead>
<tr>
<th>Title</th>
<th>Content</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name</td>
<td><input type="text" name="txtname" value="Nitin Johnson"></td>
</tr>
<tr>
<td>First Name</td>
<td><input type="text" name="txtfirstname" value="Nitin"></td>
</tr>
<tr>
<td>Street</td>
<td>
<input type="text" name="txtstreet" value="Nirnaynagar">
</td>
</tr>
<tr>
<td>Zipcode</td>
<td><input type="text" name="txtzipcode" value="382481"></td>
</tr>
<tr>
<td>City</td>
<td>
<select name="txtcity">
<option>--Select--</option>
<option value="1" undefined="">Aarau</option>
<option value="2" undefined="">Altstätten</option>
<option value="3" undefined="">Arbon</option>
<option value="4" undefined="">Baden</option>
<option value="5" undefined="">Basel</option>
<option value="6" undefined="">Bellinzona </option>
<option value="7" undefined="">Bern</option>
<option value="8" undefined="">Biel/Bienne</option>
<option value="9" undefined="">Bulle</option>
<option value="10" undefined="">Bülach</option>
<option value="11" undefined="">Burgdorf</option>
<option value="12" undefined="">Chur</option>
<option value="13" undefined="">Delémont</option>
<option value="14" undefined="">Frauenfeld</option>
<option value="15" undefined="">Fribourg </option>
<option value="16" selected="">Geneva</option>
<option value="17" undefined="">La Chaux-de-Fonds</option>
<option value="18" undefined="">La Tour-de-Peilz</option>
<option value="19" undefined="">Lausanne</option>
<option value="20" undefined="">Liestal</option>
<option value="21" undefined="">Locarno</option>
<option value="22" undefined="">Lugano</option>
<option value="23" undefined="">Lucerne</option>
<option value="24" undefined="">Martigny</option>
<option value="25" undefined="">Morges</option>
<option value="26" undefined="">Neuchâtel</option>
<option value="27" undefined="">Nyon</option>
<option value="28" undefined="">Olten</option>
<option value="29" undefined="">Rapperswil-Jona</option>
<option value="30" undefined="">Rheinfelden</option>
<option value="31" undefined="">St. Gallen</option>
<option value="32" undefined="">Schaffhausen</option>
<option value="33" undefined="">Sion</option>
<option value="34" undefined="">Solothurn</option>
<option value="35" undefined="">Thun</option>
<option value="36" undefined="">Vevey</option>
<option value="37" undefined="">Wil</option>
<option value="38" undefined="">Winterthur</option>
<option value="39" undefined="">Yverdon-les-Bains</option>
<option value="40" undefined="">Zofingen</option>
<option value="41" undefined="">Zug</option>
<option value="42" undefined="">Zurich</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"><input type="hidden" name="address_book_id" value="14"><input type="button" value="Submit" id="submitbutton" class="updatebutton"></td>
</tr>
</tbody>
</table>
</form>
最佳答案
$("#addcontact").on("click", ".updatebutton", function(){
$.ajax({
url:"process.php",
type:"post",
async:false,
data:{"action":"update","form_data":$("#add_contact").serialize()},
success:function(res){
var finalresult=JSON.parse(res);
$(this).closest('form').trigger("reset");
$("#viewaddressbook table tbody").html(finalresult);
$("#addcontact").find("input[type=text], textarea, select").val("");
}
});
});
关于javascript - 如何清除加载ajax的表单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38010634/