Nitin Johnson Nitin Johnson - 5 months ago 9
Javascript Question

how to clear a form loaded with ajax?

I have a form which I have loaded with ajax. I am editing the form on button click. I want to clear the form when submit button is clicked. The whole table where the form is stored so loaded via ajax so submit button is also loaded with ajax. Please help me. Thanks in advance.

complete code

<?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>&nbsp;<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>


edit form loaded via 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>

Answer
           $("#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("");                 
                    }
                });
            });
Comments