如何在提交表单后清除以前的文本字段值而不刷新整个页面

How do I clear the previous text field value after submitting the form with out refreshing the entire page?

本文关键字：字段 刷新 文本 提交 表单 清除      更新时间：2024-04-07

我正在使用javascript和html做一个Web应用程序，该应用程序具有包含文本字段按钮的表单。当我在该文本字段中输入数字并通过单击该按钮提交时，文本区域会动态生成。提交表单后，将创建一些文本区域，但是如果我对现有文本区域不满意，则再次输入一些值而不刷新页面。但之前输入的文本字段值优先显示页面上现有文本区域下方的新文本区域。

那么，如何在不刷新页面的情况下清除值。

<div>
    <html>
     <input type="text" name = "numquest" id ="numquest" value="" size="5" style="" disabled>
     <input type="button" value="submit" onclick="getFields();">
</div>
    </html>
    
    <javascript>
      var num_q=document.getElementById('numquest').value;
     //code for dynamic creation
    </javascript>

试试这个：

使用 jQuery：

您可以使用以下命令重置整个表单：

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

或者只是特定字段：

$('#form-id').children('input').val('')

在没有 jQuery 的情况下使用 JavaScript

<input type="button" value="Submit" id="btnsubmit" onclick="submitForm()">
function submitForm() {
   // Get the first form with the name
   // Hopefully there is only one, but there are more, select the correct index
   var frm = document.getElementsByName('contact-form')[0];
   frm.submit(); // Submit
   frm.reset();  // Reset
   return false; // Prevent page refresh
}

您可以将元素的值设置为空白

document.getElementById('elementId').value='';

分配空值： 

document.getElementById('numquest').value=null;

或者，如果要清除所有表单字段。只需将表单重置方法称为：

document.forms['form_name'].reset()

你可以按照你得到的元素值来做

document.getElementById('numquest').value='';

<form>
<input type="text" placeholder="user-name" /><br>
<input type=submit value="submit" id="submit" /> <br>
</form>
<script>
$(window).load(function() {
$('form').children('input:not(#submit)').val('')
}
</script>

您可以在所需的任何位置使用此脚本。

它将

清除所有字段。

let inputs = document.querySelectorAll("input");
inputs.forEach((input) => (input.value = ""));

HTML

<form id="some_form">
<!-- some form elements -->
</form>

和 jquery

$("#some_form").reset();
我认为最好

使用 

$('#form-id').find('input').val('');

而不是

$('#form-id').children('input').val('');

如果您的表单中有复选框，请使用以下命令来休息它：

$('#form-id').find('input:checkbox').removeAttr('checked');
恕

我直言，.val()或.value是最好的解决方案，因为它对Ajax很有用。而且.reset()仅在页面重新加载后才有效，并且使用 Ajax 的 API 永远不会刷新页面，除非它是由不同的脚本触发的。

我遇到了这个问题，我通过这样做解决了：

.done(function() {
                    $(this).find("input").val("");
                    $("#feedback").trigger("reset");
                });

我在使用 jQuery 时在我的脚本之后添加了这段代码。尝试相同(

<script type="text/JavaScript">
        $(document).ready(function() {
            $("#feedback").submit(function(event) {
                event.preventDefault();
                $.ajax({
                    url: "feedback_lib.php",
                    type: "post",
                    data: $("#feedback").serialize()
                }).done(function() {
                    $(this).find("input").val("");
                    $("#feedback").trigger("reset");
                });
            });
        });
    </script>
    <form id="feedback" action="" name="feedback" method="post">
        <input id="name" name="name" placeholder="name" />
        <br />
        <input id="surname" name="surname" placeholder="surname" />
        <br />
        <input id="enquiry" name="enquiry" placeholder="enquiry" />
        <br />
        <input id="organisation" name="organisation" placeholder="organisation" />
        <br />
        <input id="email" name="email" placeholder="email" />
        <br />
        <textarea id="message" name="message" rows="7" cols="40" placeholder="сообщение"></textarea>
        <br />
        <button id="send" name="send">send</button>
    </form>

您可以分配给 onsubmit 属性：

document.querySelector('form').onsubmit = e => {
   e.target.submit();
   e.target.reset();
   return false;
};

https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onsubmit

相关文章：