提交表單后如何清除之前的文本字段值而不刷新整個頁面？

Question

我正在使用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>

Answer 1

試試這個：

使用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
}

Answer 2

您可以將元素的值設置為空白

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

Answer 3

分配空值：

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

或者，如果要清除所有表單字段。 只需將表單重置方法調用為：

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

Answer 4

你可以在獲得元素值時做

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

Answer 5

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

你可以在任何你想要的地方使用這個腳本。

Answer 6

它將清除所有字段。

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

Answer 7

HTML

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

和jQuery

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

Answer 8

我相信最好使用

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

代替

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

如果您的表單中有復選框，請使用它來休息它：

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

Answer 9

.val()或.value恕我直言是最好的解決方案，因為它對 Ajax 很有用。 並且.reset()僅在頁面重新加載后有效，並且使用 Ajax 的 API 從不刷新頁面，除非它由不同的腳本觸發。

Answer 10

我遇到了這個問題，我通過這樣做解決了：

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

Answer 11

您可以分配給onsubmit屬性：

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

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

提交表單后如何清除之前的文本字段值而不刷新整個頁面？

問題描述

11 個解決方案

解決方案1
28 已采納 2013-12-06 06:26:41

解決方案2
26 2013-12-06 05:43:38

解決方案3
6 2013-12-06 05:43:47

解決方案4
2 2013-12-06 05:45:18

解決方案5
2 2014-09-10 05:12:43

解決方案6
1 2021-05-24 07:15:54

解決方案7
0 2013-12-06 05:47:28

解決方案8
0 2016-01-12 15:34:15

解決方案9
0 2016-06-25 21:16:28

解決方案10
0 2017-11-22 21:04:48

解決方案11
0 2021-07-29 12:41:38

提交表單后如何清除之前的文本字段值而不刷新整個頁面？

問題描述

11 個解決方案

解決方案1 28 已采納 2013-12-06 06:26:41

解決方案2 26 2013-12-06 05:43:38

解決方案3 6 2013-12-06 05:43:47

解決方案4 2 2013-12-06 05:45:18

解決方案5 2 2014-09-10 05:12:43

解決方案6 1 2021-05-24 07:15:54

解決方案7 0 2013-12-06 05:47:28

解決方案8 0 2016-01-12 15:34:15

解決方案9 0 2016-06-25 21:16:28

解決方案10 0 2017-11-22 21:04:48

解決方案11 0 2021-07-29 12:41:38

解決方案1
28 已采納 2013-12-06 06:26:41

解決方案2
26 2013-12-06 05:43:38

解決方案3
6 2013-12-06 05:43:47

解決方案4
2 2013-12-06 05:45:18

解決方案5
2 2014-09-10 05:12:43

解決方案6
1 2021-05-24 07:15:54

解決方案7
0 2013-12-06 05:47:28

解決方案8
0 2016-01-12 15:34:15

解決方案9
0 2016-06-25 21:16:28

解決方案10
0 2017-11-22 21:04:48

解決方案11
0 2021-07-29 12:41:38