Question

提交表单后，我想添加一个正在运行的新条目，但我不希望数据保留在表单中，即重置表单

这是表格代码

 <form id="add_multycontact" action="#" method="POST">

  <div class="row">
      <div class="large-6 columns">
         <label>Company Name</label>
          <input name="company" type="text">
      </div>

     <div class="large-6 columns">
        <label>Contact Name </label>
         <input name="contact_name" type="text">
    </div>
  </div><!--end row-->

  <div class="row">
   <div class="large-6 columns">
       <label>Main Phone</label>
       <input name="mainPhone" type="text">
    </div>

     <div class="large-6 columns">
       <label>Alt Phone</label>
       <input name="altPhone" type="text">
    </div>
  </div><!--end row-->

  <div class="row">
  <div class="large-6 columns">
      <label>Street Address </label>
        <input name="street_address" type="text">
  </div>

   <div class="large-6 columns">
      <label>City </label>
        <input name="city" type="text">
   </div>  
   </div>

   <div class="row">
    <div class="large-6 columns">
      <label>Province</label>
         <select name="province">
            <option>Select Province</option>
            <?php foreach($provinces as $key => $value) : ?>
                <option value="<?php echo $key; ?>"><?php echo $value; ?></option> 
            <?php endforeach; ?>
        </select>
    </div>

   <div class="large-6 columns">
      <label>Postal Code </label>
        <input name="postal" type="text">
   </div> 

  </div><!--end row-->


    <div class="row">     
  <div class="large-4 columns">
       <label>Group
        <select name="contact_group">
            <option>Select Contact Group</option>
          <option value="client">Client</option>
          <option value="supplier">Supplier</option>
          <option value="employee">Employee</option>
          <option value="other">Other</option>
        </select>
      </label>
      </div>         
     </div>
     <input name="submit" type="submit" class="add_btn button right small" value="submit"> 
     <a class="close-reveal-modal" aria-label="Close">&#215;</a>

</form>

        </div>
     </div> 
    </div>

 <!--Loading Image-->
<div id="loaderImage">
    <img src="../images/ajax-loader.gif">
 </div>

 <!--Main Content-->
    <div id="pageContent"></div>



 <script src="../js/vendor/jquery.js"></script>
 <script src="../js/foundation.min.js"></script>
 <script src="../js/vendor/fastclick.js"></script>
 <script src="../js/multyCONTACTscript.js"></script>   



    <script>
      $(document).foundation();
    </script>


  </body>
</html>

这是JavaScript代码

$(document).ready(function(){
    //show loader image
$('#loaderImage').show();

    //show contacts on page load
    showContacts();


    //add contact
    $(document).on('submit','#add_multycontact', function(){
        //show loader image
    $('#loaderImage').show();



    //post data from form
    $.post('../multy/add_multyCONTACT.php',$(this).serialize())
        .done(function(data){
            console.log(data);
                $('#addModal').foundation('reveal', 'close');
                    showContacts();
        });
        return false;
    });

    //edit contact
    $(document).on('submit','#edit_multycontact', function(){
        //show loader image
    $('#loaderImage').show();

    //post data from form
    $.post("../multy/edit_multyCONTACT.php",$(this).serialize())
        .done(function(data){
            console.log(data);
                $('.editModal').foundation('reveal', 'close');
                    showContacts();
        });
        return false;
    });

    //delete contact
    $(document).on('submit','#delete_multycontact', function(){
        //show loader image
    $('#loaderImage').show();

    //post data from form
    $.post("../multy/delete_multyCONTACT.php",$(this).serialize())
        .done(function(data){
            console.log(data);
                showContacts();
        });
        return false;
    });

});
    //show contacts
    function showContacts() {
    console.log('Showing Contacts...');
    setTimeout("$('#pageContent').load('../multy/multycontacts.php',function(){$('#loaderImage').hide();})", 1000);
}

//close the modal
$(document).on('click', '.close-reveal-modal', function() {

//this is the latest attempt that is just plain desperate!!
document.getElementById("add_multycontact").reset() 

$('.reveal-modal').foundation('reveal', 'close');

});

我要连续输入多个条目，但是在添加一个条目然后单击以添加另一个条目之后，将弹出弹出窗口，其中包含来自上一个条目的数据，除非我刷新网页...而且我不想这样做！

Answer 1

首先，您在错误的位置调用了reset方法document.getElementById("add_multycontact").reset()。这只会在$(document).ready上被调用一次。因此，您需要在使用表单打开模式之前或之后调用它。

即使那行不通，也可以尝试用reset代替：

$('#add_multycontact select').prop('selectedIndex',0);
$('#add_multycontact input[type="text"]').val('');

Answer 2

您可以尝试在HTML中使用<button type="button> </button>，它不应刷新页面，并且可以在按钮上使用js click事件来继续执行下一步的应用程序。如果您希望表单的元素继续，则可以使用js来使按钮在没有填写表单的情况下具有不允许的光标样式。

如何在不刷新页面的情况下清除表单数据

2 个答案: