Как очистить предыдущее значение текстового поля после отправки формы без обновления всей страницы

Я делаю веб-приложение с помощью 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>

Ответы

Ответ 1

Вы можете установить значение элемента пустым

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

Ответ 2

попробуй это:

Используя jQuery:

Вы можете сбросить всю форму с помощью:

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

Или просто конкретное поле с:

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

Использование JavaScript без jQuery

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

Ответ 3

Назначить пустое значение:

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

или, если хотите очистить все поля формы. Просто вызовите форму reset как:

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

Ответ 4

вы можете просто сделать, как только получите значение элементов

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

Ответ 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>

Вы можете использовать этот script где угодно.

Ответ 6

HTML

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

и jquery

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

Ответ 7

Я считаю, что лучше использовать

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

вместо

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

Если у вас есть флажки в вашей форме, используйте это, чтобы отдохнуть:

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

Ответ 8

.val() или .value является IMHO лучшим решением, потому что оно полезно с Ajax. И .reset() работает только после перезагрузки страницы, а API-интерфейсы, использующие Ajax, никогда не обновляют страницы, если только это не вызвано другим script.

Ответ 9

У меня была эта проблема, и я решил это сделать:

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

Я добавил этот код после моего script, поскольку использовал 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>