基础框架表单不会在新实例化时刷新

时间:2015-02-05 09:10:33

标签: jquery ajax forms zurb-foundation

我在基础框架中开发了一个表单。它通过链接触发并以模态加载。

通过

解雇
<a class="add-btn button right small" data-reveal-id="addModal">Add Contact</a>

它指向同一文件中带有id="addModal"的div。

<div id="addModal" class="reveal-modal" data-reveal>
   <h2>Add Contact</h2>
   <form id="addContact" action="#" method="post">
   <div class="row">
     <div class="large-6 columns"><label>First Name <input name="first_name" type="text" placeholder="Enter First Name" /></label></div>
     <div class="large-6 columns"><label>Last Name <input name="last_name" type="text" placeholder="Enter Last Name" /></label></div>
   </div>
   <input name="submit" type="submit" class="add-btn button right small" value="Add Contact" />
   <a class="close-reveal-modal">&#215;</a>
   </form>
</div>

ajax表单处理程序如下

$(document).ready(function(){
  $(document).on('submit','#addContact',function(){
    $.post('add_contact.php',$(this).serialize())
        .done(function(data){
            console.log(data);
            $('#addModal').foundation('reveal','close');
            showContacts();
        });
        return false;
});

php脚本add_contact.php运行正常。一切都很好。单击添加联系人时,将插入新记录。当我们再次点击添加联系人时,输入的旧值仍然存在。我的代码的哪一部分显示旧值,如何在每个表单提交后清除?

1 个答案:

答案 0 :(得分:1)

由于您没有真正发布表单,而是使用AJAX,您需要使用表单内置的#reset()方法手动重置表单:

document.addContact.reset();