Question

我有一个html表单，它使用Jquery / Ajax方法更新表单数据。成功更新后，它显示“成功消息”。这很好，但它仍然是形式内容。我想在没有页面刷新的情况下完成更新后重新加载/刷新表单/表单内容。我怎样才能做到这一点？你们能给出解决方案或想法吗？谢谢。

我的jquery代码正在关注

如果您需要我的html表单，我会将其上传到此处。：）

<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>

更新：

<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 your document</td>
    <td><input type="text" name="file_des_1" id="file_des1" placeholder="short description of your 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 your 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 your 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 your 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>&nbsp;</td>
    <td><input type="button" name="submit" value="Update Details" class="submit" id="upload"/></td>
  </tr>  
</table>
</form> 
</div>


</div>

Answer 1

只需重置成功功能：

$("#success").html(data);
$this.closest('form').get(0).reset();

你可以这样做：

$('body').on('click', '#upload', function(e){
    e.preventDefault();
    var $this = $(this); // cache the current context of selector
    var formData = new FormData($this.closest('form')[0]); // update this

    $.ajax({
        url: 'editContactDetails.php',
        type: 'POST',
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            return myXhr;
        },
        success: function(data){                    
           $("#success").html(data);
           $this.closest('form').get(0).reset();
           // or if above not work then try this
           //$this.closest('form').find(':input:not(#upload)').val('');
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
});

Answer 2

检查这个

纯javascript：

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

<强> jquery的：

$("#all_contact_details")[0].reset();

完整代码：

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

如何在没有页面刷新的情况下成功更新数据后如何刷新html表单

2 个答案: