как очистить форму, загруженную ajax?

У меня есть форма, которую я загрузил ajax. Я редактирую форму при нажатии кнопки. Я хочу очистить форму при нажатии кнопки отправки. Вся таблица, где форма хранится так загружена через 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>&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>

редактировать форма загружается через 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>

источник

2016-06-24 Nitin Johnson

Простой способ: создать кнопку сброса, вызвать ее после успешного отправления – Thamilan

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

источник

2016-06-24 10:02:17

Piyush. Спасибо за помощь. –

Поместите эту кнопку внутри <form>:

<input type="reset" value="Reset Form" id="resetButton" >

и сделать щелчок на этой кнопке,

  $("#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);  
         $("#resetButton").click(); 
        } 
       }); 
      });

источник

2016-06-24 10:02:52

, возможно, это будет работать. как только вы закончите загрузку.

document.getElementById("add_contact").reset();

источник

2016-06-24 10:11:23

как очистить форму, загруженную ajax?

ответ

Смежные вопросы