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

时间:2013-12-06 05:39:28

标签: javascript html forms

我正在使用 javascript html 进行网络应用,其中包含一个包含文本字段,按钮的表单。当我在该文本字段中输入数字并通过单击该按钮提交时,将动态生成文本区域。提交表单后,会创建一些文本区域,但如果我对现有文本区域不满意,那么我再次输入一些不刷新页面的值。但是先前输入的文本字段值主要显示页面上现有文本区域下方的新文本区域。

那么,我如何清除页面时清除该值。

<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>

11 个答案:

答案 0 :(得分:21)

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

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

答案 1 :(得分:20)

试试这个:

如果使用jquery:

you can reset your form with - $("#myform")[0].reset();

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

在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
}

答案 2 :(得分:5)

分配空值:

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

或者,如果要清除所有表单字段。只需将表单重置方法调用为:

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

答案 3 :(得分:2)

你可以在获得元素值时这样做

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

答案 4 :(得分:2)

<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>

您可以在任何需要的地方使用此脚本。

答案 5 :(得分:1)

它将清除所有字段。

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

答案 6 :(得分:0)

HTML

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

和jquery

$("#some_form").reset();

答案 7 :(得分:0)

我认为最好使用

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

而不是

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

如果您的表单中有复选框,请使用此复选框:

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

答案 8 :(得分:0)

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

答案 9 :(得分:0)

我有这个问题,我解决了这个问题:

.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>

答案 10 :(得分:0)

您可以分配给 onsubmit 属性:

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

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