Як скинути форму за допомогою 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 (елемент) та .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. Якщо це вирішує проблему, то ви визначили проблему.