Как сбросить форму, используя jQuery с методом .reset ()

У меня был рабочий код, который мог сбросить форму, когда я нажимал кнопку сброса. Однако после того, как мой код становится длиннее, я понимаю, что он больше не работает.

 <div id="labels">
        <table class="config">
            <thead>
                <tr>
                    <th colspan="4"; style= "padding-bottom: 20px; color:#6666FF; text-align:left; font-size: 1.5em">Control Buttons Configuration</th>
                </tr>
                <tr>
                    <th>Index</th>
                    <th>Switch</th>
                    <th>Response Number</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>

                <form id="configform" name= "input" action="#" method="get">
                <tr><td style="text-align: center">1</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" value="" id="number_one"></td>
                    <td><input style="background: white; color: black;" type="text"  id="label_one"></td>
                </tr>
                <tr>
                    <td style="text-align: center">2</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" id = "number_two" value=""></td>
                    <td><input style="background: white; color: black;" type="text"  id = "label_two"></td>
                </tr>
                <tr>
                    <td style="text-align: center">3</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" id="number_three" value=""></td>
                    <td><input style="background: white; color: black;" type="text" id="label_three"></td>
                </tr>
                <tr>
                    <td style="text-align: center">4</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" id="number_four" value=""></td>
                    <td><input style="background: white; color: black;" type="text" id="label_three"></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" id="configsubmit" value="Submit"></td>
                </tr>
                <tr>
                    <td><input type="reset" id="configreset" value="Reset"></td>
                </tr>

                </form>
            </tbody>
        </table>

    </div>

И мой JQuery:

 $('#configreset').click(function(){
            $('#configform')[0].reset();
 });

Есть ли какой-то источник, который я должен включить в мои коды, чтобы .reset()метод работал? Ранее я использовал:

<script src="static/jquery.min.js">
</script>
<script src="static/jquery.mobile-1.2.0.min.js">
</script>

и .reset()метод работал.

В настоящее время я использую

<script src="static/jquery-1.9.1.min.js"></script>      
<script src="static/jquery-migrate-1.1.1.min.js"></script>
<script src="static/jquery.mobile-1.3.1.min.js"></script>

Может ли это быть одной из причин?

Вы можете попробовать использовать ссылку () Ссылка

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

http://jsfiddle.net/8zLLn/

  $('#configreset').click(function(){
        $('#configform')[0].reset();
  });

Поместите это в скрипку JS. Работал как задумано.

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

Изменить: (потому что я грустный мешок без должных комментариев) Это не проблема напрямую с вашим кодом. Он отлично работает, когда вы вынимаете его из контекста страницы, которую вы используете в данный момент, поэтому вместо того, чтобы быть чем-то с конкретными jQuery / javascript и атрибутивными данными формы, это должно быть что-то другое. Я бы начал разбивать код на части и пытаться выяснить, где он происходит. Я имею в виду, просто чтобы "убедиться", я полагаю, вы могли бы ...

console.log($('#configform')[0]);

в функции щелчка и убедитесь, что он нацелен на правильную форму ...

и если это так, это должно быть что-то, что не указано здесь.

изменить часть 2: Одна вещь, которую вы можете попробовать (если она не нацелена правильно), это использовать «input: reset» вместо того, что вы используете ... также, я бы посоветовал, потому что это не цель, которая неправильно работает, чтобы выяснить, на что нацелен настоящий клик. Просто откройте инструменты Firebug / Developer, что у вас есть, бросить в

console.log($('#configreset'))

и посмотреть, что всплывает. и тогда мы можем идти оттуда.

Согласно этому сообщению здесь , Jquery не имеет reset()методы; но родной JavaScript делает. Итак, преобразуйте элемент jQuery в объект JavaScript, используя:

$("#formId")[0].reset()
// or
$("#formId").get(0).reset()

Это одна из тех вещей, которые на самом деле легче сделать в ванильном Javascript, чем в jQuery. У jQuery нет resetметода, но есть элемент формы HTML, поэтому вы можете сбросить все поля в форме следующим образом:

document.getElementById('configform').reset();

Если вы сделаете это с помощью JQuery (как показано в других ответах здесь: $('#configform')[0].reset()), то [0]это извлечение ту же форму DOM элемент , который вы получите непосредственно через document.getElementById. Последний подход является одновременно более эффективным и более простым (поскольку с помощью подхода jQuery вы сначала получаете коллекцию, а затем должны извлечь из нее элемент, тогда как с ванильным Javascript вы просто получаете элемент напрямую).

Кнопка сброса вообще не нуждается в каком-либо скрипте (или имени или идентификаторе):

<input type="reset">

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

<input type="button" onclick="this.form.reset();">

Но кнопка сброса - намного лучший выбор.

Я наконец-то решил проблему !! @RobG был прав насчет formтега и tableтега. тег должен быть размещен за пределами стола. с этим,form

<td><input type="reset" id="configreset" value="Reset"></td>

работает без необходимости jquery или чего-либо еще. просто нажмите на кнопку и тадаа ~ вся форма сбрасывается;) блестяще!

Я использую этот простой код:

//reset form 
$("#mybutton").click(function(){
    $("#myform").find('input:text, input:password, input:file, select, textarea').val('');
    $("#myform").find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
});

С помощью функции jquery .closest (element) и .find (...) .

Получение родительского элемента и поиск дочернего элемента .

Наконец, сделайте нужную функцию.

$("#form").closest('form').find("input[type=text], textarea").val("");

Первая строка сбросит входные данные формы

$('form#myform').trigger("reset"); //Line1
$('form#myform select').trigger("change"); //Line2

Второй сбросит select2

Необязательно: Вы можете использовать это, если у вас есть разные типы, зарегистрированные с разными событиями

$('form#myform select, form input[type=checkbox]').trigger("change"); //Line2

Быстрый сброс полей формы возможен с помощью этой функции сброса jQuery.

когда вы получите успешный ответ, стреляйте ниже кода.

$(selector)[0].reset();

Вы можете просто добавить тип ввода = сброс с помощью id = resetform, как это

<html>
<form>
<input type = 'reset' id = 'resetform' value = 'reset'/>
<!--Other items in the form can be placed here-->
</form>
</html>

затем с помощью jquery вы просто используете функцию .click () для элемента с id = resetform следующим образом

<script> 
$('#resetform').click();
</script>

и форма сбрасывается Примечание. Вы также можете скрыть кнопку сброса с помощью id = resetform, используя вашу CSS

<style>
#resetform
{
display:none;
}
</style>

Вот простое решение с Jquery. Это работает во всем мире. Посмотрите на код.

$('document').on("click", ".clear", function(){
   $(this).closest('form').trigger("reset");
})

Добавьте чистый класс к кнопке в каждой форме, вам нужно ее сбросить. Например:

<button class="button clear" type="reset">Clear</button>

У jQuery нет reset()метода; но родной JavaScript делает. Итак, преобразуйте элемент jQuery в объект JavaScript, используя:

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

$("#formId").get(0).reset();

Мы можем просто использовать код Javascript

document.getElementById("formid").reset();

<button type="reset">Reset</reset>

Простейший способ, которым я могу думать, это надежно. Поместите в тег формы.

Вы можете использовать следующее.

@using (Html.BeginForm("MyAction", "MyController", new { area = "MyArea" }, FormMethod.Post, new { @class = "" }))
{
<div class="col-md-6">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
        @Html.LabelFor(m => m.MyData, new { @class = "col-form-label" })
    </div>
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
        @Html.TextBoxFor(m => m.MyData, new { @class = "form-control" })
    </div>
</div>
<div class="col-md-6">
    <div class="">
        <button class="btn btn-primary" type="submit">Send</button>
        <button class="btn btn-danger" type="reset"> Clear</button>
    </div>
</div>
}

Затем очистите форму:

    $('.btn:reset').click(function (ev) {
        ev.preventDefault();
        $(this).closest('form').find("input").each(function(i, v) {
            $(this).val("");
        });
    });

Ваш код должен работать. Убедитесь, что static/jquery-1.9.1.min.jsсуществует. Кроме того, вы можете попробовать вернуться к static/jquery.min.js. Если это решит проблему, то вы точно ее определили.