Как очистить форму?

Например, у меня есть такая форма:

<form method='post' action='someaction.php' name='myform'>

<input type='text' name='text1'>
<input type='text' name='text2'>

<input type='checkbox' name="check1">Check Me

<textarea rows="2" cols="20" name='textarea1'></textarea>

<select name='select1'>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<input type='reset' value='Reset' name='reset'>
<input type='submit' value='Submit' name='submit'>

</form>

Когда я нажимаю Reset, он опустошает все поля. Но если я заполню некоторые поля, используя параметры URL, а затем нажмите Reset, он очищает только поля, которые я вводил после перезагрузки формы.

Как я могу очистить все поля, если некоторые поля уже заполнены во время загрузки формы.

Ответы

Ответ 1

Как указывали другие, я думаю, вы должны пересмотреть необходимость заполнения формы. Но если вам действительно нужна эта функциональность, это один из способов сделать это:

Обычный Javascript:

function resetForm(form) {
    // clearing inputs
    var inputs = form.getElementsByTagName('input');
    for (var i = 0; i<inputs.length; i++) {
        switch (inputs[i].type) {
            // case 'hidden':
            case 'text':
                inputs[i].value = '';
                break;
            case 'radio':
            case 'checkbox':
                inputs[i].checked = false;   
        }
    }

    // clearing selects
    var selects = form.getElementsByTagName('select');
    for (var i = 0; i<selects.length; i++)
        selects[i].selectedIndex = 0;

    // clearing textarea
    var text= form.getElementsByTagName('textarea');
    for (var i = 0; i<text.length; i++)
        text[i].innerHTML= '';

    return false;
}

Обратите внимание, что я прокомментировал случай, когда я очищаю входы hidden. В большинстве случаев это необязательно.

Для этого вам нужно вызвать функцию из обработчика onclick кнопки (или каким-либо другим способом), например. например:

<input type='reset' value='Reset' name='reset' onclick="return resetForm(this.form);">

Вы можете протестировать все это здесь на jsFiddle.

Если вы используете jQuery в своем проекте, вы можете сделать это гораздо меньше кода (и не нужно менять HTML):

jQuery(function($) { // onDomReady

    // reset handler that clears the form
    $('form[name="myform"] input:reset').click(function () {
        $('form[name="myform"]')
            .find(':radio, :checkbox').removeAttr('checked').end()
            .find('textarea, :text, select').val('')

        return false;
    });

});

Также обратите внимание, что я не очищаю значения скрытых входов, флажков и переключателей.

Играйте с этим здесь.

Ответ 2

В jquery просто вы можете использовать

$("#yourFormId").trigger('reset');

Ответ 3

Вам придется очистить их через javascript (или очистить его от сервера).

Кнопка reset будет иметь только элементы формы reset для их начального значения - если это было конкретное значение, то что это будет reset to.

Ответ 4

Если вы используете jQuery, код намного проще:

$('#my-form').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected');

Вы также можете удалить: hidden из селектора .not, если вы хотите также удалить скрытые поля.

Ответ 5

Самый простой способ очистки формы - использовать тег HTML

<input type="reset" value="Reset">

Пример:

<form>
  <table>
    <tr>
      <td>Name</td>
      <td><input type="text" name="name"></td>
    </tr>
    <tr>
      <td>Reset</td>
      <td><input type="reset" value="Reset"></td>
    </tr>
  </table>
</form>

Ответ 6

Я обобщил некоторые предложения, используя jQuery, чтобы дать более полное решение вопроса:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Demo Forms</title>
        <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    </head>
    <body>

        <form method='post' action='someaction.php' name='myform'>

            <input type='text' name='text1'>
            <input type='text' name='text2' value='preset value'>

            <input type='checkbox' name="check1">Check Me

            <textarea rows="2" cols="20" name='textarea1'></textarea>

            <select name='select1'>
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
            </select>

            <input type='button' value='Reset' name='reset' onclick="return clearForm(this.form);">
            <input type='submit' value='Submit' name='submit'>

            <script>
                function clearForm(form) {
                    var $f = $(form);
                    var $f = $f.find(':input').not(':button, :submit, :reset, :hidden');
                    $f.val('').attr('value','').removeAttr('checked').removeAttr('selected');
                }
            </script>
        </form>
    </body>
</html>

Обратите внимание, что я добавил включение jquery lib в раздел главы и добавил обработчик onclick к кнопке Reset. Наконец, я добавил код javascript на основе отзывов от некоторых других ответов здесь.

Я также добавил заданное значение в одно текстовое поле. Функция val('') не очистила бы такое поле, поэтому я также добавил attr('value','') к последней строке script, чтобы удалить такие значения по умолчанию.

Ответ 7

Вы можете сделать что-то подобное в JS и называть его от onclick внутри вашей кнопки:

function submit() {
  $('#fieldIdOne').val('');
  $('#fieldIdTwo').val('');
}

И затем в вашем файле HTML:

<button id="submit" onclick="submit(); return false">SIGN UP</button>

Если вы используете это решение с Firebase, оно фактически ничего не отправит в базу данных, если вы не добавите return false сразу после вызова.

Ответ 8

Еще один способ сделать это с помощью HTMLFormControlsCollection:

for (let el of form.elements) el.value = null

Ответ 9

Я только наткнулся на этот вопрос и использовал <a>, чтобы облегчить очистку формы, перезагрузив страницу. Легко стилизовать элемент <a> для отображения в виде кнопки.

например.

<a href="?" class="btn btn-default">Clear</a>

Используя? для атрибута href, <a> перезагрузит страницу с сервера, не отправив ее.

Я предпочитаю решения, которые не зависят от JavaScript, поэтому, надеюсь, это кому-то полезно.

Ответ 10

Использование JavaScript дает форму ID 'myform':

document.getElementById( 'MyForm') сброса();.