Question

您好，我有一个使用php开发的网站，该网站包含用户提交数据的联系表。下面是联系表格的代码

<div class="form">
    <div id="sendmessage">Your message has been sent. Thank you!</div>
    <div id="errormessage"></div>
    <form  name="contactusform"  id="innov-contact" action="./dbFiles/formSubmit.php" method="POST" role="form" class="contactForm" >
        <div class="form-row">
            <div class="form-group col-lg-6">
                <input type="text" name="fname" class="form-control" id="fname" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
                <div class="validation"></div>
            </div>
            <div class="form-group col-lg-6">
                <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
                <div class="validation"></div>
            </div>
        </div>
        <div class="form-group">
            <input type="text" class="form-control" name="websiteurl" id="websiteurl" placeholder="website url" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
            <div class="validation"></div>
        </div>
        <div class="form-group">
            <input type="text" class="form-control" name="phoneNum" id="phoneNum" placeholder="Phone Number" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
            <div class="validation"></div>
        </div>
        <div class="form-group">
            <textarea class="form-control" name="message" id="messages" rows="3" data-rule="required" data-msg="Please write something for us" placeholder="Message">
            </textarea>
            <div class="validation"></div>
        </div>
        <p style="-webkit-margin-collapse: discard;">Captcha: </p>
        <p><img src="image.php?captcha_text=<?php echo $_SESSION['captcha']; ?>">  <input type="text" value="" name="my-captcha"></p>
        <div class="validation"></div>
        <div id ="ss" class="text-center" >
            <button type="submit" value="submit" name="submit" title="Send Message" >SUBMIT</button>
        </div>
    </form>
</div>

提交表单后，我想清除字段，并尝试了以下代码

<script>
    function myFunction() {
        document.getElementById("innov-contact").reset();
    }
</script>

在上面，当我尝试保存表单时，它会刷新字段，但不会保存在数据库中，甚至我尝试了以下代码

<script type="text/javascript">
    $("#innov-contact")[0].reset();
</script>

但是它不能清除表格，甚至我尝试了以下代码

$(document).ready(function() { 
    var options = { 
        target:        '#output1', 
        clearForm: true // clear all form fields after successful submit 
    }; 
     // bind form using 'ajaxForm' 
    $('#innov-contact').ajaxForm(options); 
});

请让我以其他任何方式清除表格

Answer 1

使用此$("#fname").val("");，它将清除“ fname”输入字段中的值。这样，您可以清除每个字段。

Answer 2

您可以使用trigger()通过jQuery重置表单

$('#form_id').trigger("reset");

Answer 3

在表单中添加1种输入类型重置，然后在ajax请求后单击：

$(document).ready(function() {
  $('#innov-contact').submit((e) => {
    e.preventDefault();
    //Ajax...
    $("#reset").click();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="contactusform" id="innov-contact" action="./dbFiles/formSubmit.php" method="POST" role="form" class="contactForm">
  <div class="form-row">
    <div class="form-group col-lg-6">
      <input type="text" name="fname" class="form-control" id="fname" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
      <div class="validation"></div>
    </div>
    <div class="form-group col-lg-6">
      <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
      <div class="validation"></div>
    </div>
  </div>
  <div class="form-group">
    <input type="text" class="form-control" name="websiteurl" id="websiteurl" placeholder="website url" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
    <div class="validation"></div>
  </div>
  <div class="form-group">
    <input type="text" class="form-control" name="phoneNum" id="phoneNum" placeholder="Phone Number" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
    <div class="validation"></div>
  </div>
  <div class="form-group">
    <textarea class="form-control" name="message" id="messages" rows="3" data-rule="required" data-msg="Please write something for us" placeholder="Message">
                     </textarea>
    <div class="validation"></div>
  </div>
  <p style="-webkit-margin-collapse: discard;">Captcha: </p>
  <p><img src="image.php?captcha_text=<?php echo $_SESSION['captcha']; ?>"> <input type="text" value="" name="my-captcha"></p>
  <div class="validation"></div>
  <div id="ss" class="text-center">
    <button type="submit" value="submit" name="submit" title="Send Message">SUBMIT</button>
  </div><input type="reset" id="reset">
</form>

Answer 4

这来自jQuery Form插件docs。

$('#innov-contact').clearForm();

如果要清除任何特定字段。

$('#innov-contact #email').clearFields();

Answer 5

$('.form-control').val('');

这将清除类为form-control的所有表单字段。

提交后如何清除表格

5 个答案: