3秒后重置表格答案

【问题标题】：Resetting form after 3 seconds3秒后重置表格
【发布时间】：2014-01-29 12:22:51
【问题描述】：

我有这个代码`

<!-- Form -->
        <div id="contact-form"><form id="contact-form" action="process.php" method="post">
            <div>
                <label>
                    <span>Name: (required)</span>
                    <input type="text" name="name" placeholder="Full Name" title="Enter your name" class="required">            
                </label>
            </div>
            <div>
                <label>
                    <span>Email: (required)</span>
                    <input type="text" name="email" placeholder="Your Email" title="Enter your email" class="required">         
                </label>
            </div>
            <div>
                <label>
                    <span>Telephone: (required)</span>
                    <input type="text" name="phone" placeholder="Your Telephone" title="Enter your telephone" class="required">         
                </label>
            </div>
            <div>
                <label>
                    <span>Website: (required)</span>
                    <input type="text" name="website" placeholder="Your Website" title="Enter your website">            
                </label>
            </div>
            <div>
                <label>
                    <span>Message: (required)</span>
                    <textarea placeholder="Include all the details you can" name="message" type="text" tabindex="5" required></textarea>
                </label>
            </div>
            <div>
                <button name="submit" type="submit" id="contact-submit">Send Email</button>
            </div>
        </form></div>
        <!-- /Form -->

        </div>
    </div>

    <script src="jss/scripts.js"></script>

我想在 3 秒后重置表单并感谢您.... 3 秒后`

【问题讨论】：

所以您的意思是用户应该在 3 秒内输入所有内容？我不明白这一点
这是一个反向验证码检查，您必须是机器人才能提交此表单。
@RononDex 我认为OP的意思是在用户提交表单后执行。
哈哈反向验证码检查：P
注意你有 2 个同名的 id，这可能会破坏功能。

标签： javascript reset

【解决方案1】：

您可以使用Form.reset();

setTimeout(function(){
    document.getElementById("contact-form").reset();
}, 3000);

我准备了demo

【讨论】：

他还有一个 div 的“contact-form” id，如果你不提供 uniuqe 的表单 id，这将不起作用

【解决方案2】：

setTimeout(resetForm, 3000); // Call the reset form function in 3000 ms or 3 sec

function resetForm(){
    $("form#contact-form")[0].reset(); // Use the form.reset function
}

如果您想在表单提交时这样做，请这样做：

$("form#contact-form").submit(function(){
    setTimeout(function(){this.reset()}, 3000);
});

【讨论】：

如果我错了，请纠正我，但 jQuery 对象没有 reset() 应该是 $("form#contact-form")[0].reset();

【解决方案3】：

试试这个

首先给你的表单一个唯一的ID

<form id="my_contact_form" action="process.php" method="post">

现在你可以使用给定的 JAVASCRIPT

setInterval(function(){
    var oForm = document.getElementById('my_contact_form');

    var frm_elements = oForm.elements;
   for (i = 0; i < frm_elements.length; i++)
{
    field_type = frm_elements[i].type.toLowerCase();
    switch (field_type)
    {
    case "text":
    case "password":
    case "textarea":
    case "hidden":
        frm_elements[i].value = "";
        break;
    case "radio":
    case "checkbox":
        if (frm_elements[i].checked)
        {
            frm_elements[i].checked = false;
        }
        break;
    case "select-one":
    case "select-multi":
        frm_elements[i].selectedIndex = -1;
        break;


       default:
            break;
        }
    }

},3000);

这将在 3 秒后清除表单的所有字段

见JS FIDDLE

【讨论】：