jquery - How do i refresh the html form after successfully updated the data without page refresh -
i've html form updating form data using jquery/ajax method. after updated it's showing "success message". that's fine it's remain form contents. want reload/refresh form / form contents after update done without page refresh. how can ? can guys give solution or idea ? thank you.
my jquery code following
if need html form upload here. :)
<script> $('body').on('click', '#upload', function(e){ e.preventdefault(); var formdata = new formdata($(this).parents('form')[0]); $.ajax({ url: 'editcontactdetails.php', type: 'post', xhr: function() { var myxhr = $.ajaxsettings.xhr(); return myxhr; }, success: function(data){ $("#success").html(data); //alert(response); }, data: formdata, cache: false, contenttype: false, processdata: false }); return false; }) </script> update:
<div id="showcontactsdetails"> <h2>individual record details</h2> <div style=" visibility:hidden;" id="visiable"> <span class="mandatory"><sub>* required</sub></span> <!--success update --> <div id="success"></div> <form action="" method="post" enctype="multipart/form-data" id="all_contact_details"> <table width="450" border="0" cellspacing="0" cellpadding="0"> <input type="hidden" name="cdid" id="cdid"/> </tr> <tr> <td>company name</td> <td><input type="text" name="company_name" id="company_name" disabled="disabled"/></td> </tr> <tr> <td>family name</td> <td><input type="text" name="family_name" id="family_name"/></td> </tr> <tr> <td>given name</td> <td><input type="text" name="given_name" id="given_name"/></td> </tr> <tr> <td>work phone</td> <td><input type="text" name="work_phone" id="work_phone"/></td> </tr> <tr> <td>mobile phone</td> <td><input type="text" name="mobile_phone" id="mobile_phone"/></td> </tr> <tr> <td>email address</td> <td><input type="text" name="email" id="email"/></td> </tr> <tr> <td>private email address</td> <td><input type="text" name="email_private" id="email_private"/></td> </tr> <tr> <td>upload document</td> <td><input type="text" name="file_des_1" id="file_des1" placeholder="short description of document" class="shor"/><span class="mandatory"><sup>*</sup></span></td> <tr> <td></td> <td align="left"><input name="file1" type="file" id="file" class="file"/></td> </tr> <tr> <td></td> <td><input type="text" name="file_des_2" id="file_des2" placeholder="short description of document" class="shor"/><span class="mandatory"><sup>*</sup></span></td> <tr> <td></td> <td align="left"><input type="file" name="file2" id="file_2" class="file"/></td> </tr> <tr> <td></td> <td><input type="text" name="file_des_3" id="file_des3" placeholder="short description of document" class="shor"/><span class="mandatory"><sup>*</sup></span></td> <tr> <td></td> <td align="left"><input type="file" name="file3" id="file_3" class="file"/></td> </tr> <tr> <td></td> <td><input type="text" name="file_des_4" id="file_des4" placeholder="short description of document" class="shor"/><span class="mandatory"><sup>*</sup></span></td> <tr> <td></td> <td align="left"><input type="file" name="file4" id="file_4" class="file"/></td> </tr> <tr> <td> </td> <td><input type="button" name="submit" value="update details" class="submit" id="upload"/></td> </tr> </table> </form> </div> </div>
check
pure javascript:
document.getelementbyid("all_contact_details").reset(); jquery:
$("#all_contact_details")[0].reset(); complete code:
$('body').on('click', '#upload', function(e){ e.preventdefault(); var formdata = new formdata($(this).parents('form')[0]); $.ajax({ url: 'editcontactdetails.php', type: 'post', xhr: function() { var myxhr = $.ajaxsettings.xhr(); return myxhr; }, success: function(data){ $("#success").html(data); document.getelementbyid("all_contact_details").reset(); //$("#all_contact_details")[0].reset(); }, data: formdata, cache: false, contenttype: false, processdata: false }); });
Comments
Post a Comment