.Reset () yöntemiyle jQuery kullanarak form sıfırlama

Bir sıfırlama düğmesine tıkladığımda formumu sıfırlayabilecek çalışma kodum vardı. Ancak benim kod uzadıktan sonra, artık çalışmadığını fark.

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

Ve jQuery'm:

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

.reset()Yöntemin çalışması için kodlarıma eklemem gereken bazı kaynaklar var mı ? Daha önce kullanıyordum:

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

ve .reset()yöntem çalışıyordu.

Şu anda kullanıyorum

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

Muhtemelen sebeplerden biri olabilir mi?

trigger () Referans Bağlantısını kullanmayı deneyebilirsiniz

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

http://jsfiddle.net/8zLLn/

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

JS kemanına koy. Amaçlandığı gibi çalıştı.

Yani, yukarıda belirtilen sorunların hiçbiri burada hatalı değildir. Belki çakışan bir kimlik sorununuz var mı? Tıklama gerçekten yürütülüyor mu?

Düzenleme: (uygun yorum yeteneği olmadan üzgün bir çuval olduğum için) Doğrudan kodunuzla ilgili bir sorun değil. Kullanmakta olduğunuz sayfanın bağlamından çıkardığınızda iyi çalışır, bu nedenle, belirli jQuery / javascript ve ilişkilendirilmiş form verileriyle bir şey olmak yerine, başka bir şey olması gerekir. Etrafındaki kodu ikiye bölmeye başladım ve nerede olduğunu bulmaya çalıştım. Demek istediğim, sadece 'emin olmak' için herhalde ...

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

tıklayın ve doğru formu hedeflediğinden emin olun ...

ve eğer öyleyse, burada listelenmeyen bir şey olmalı.

bölüm 2: deneyebilirsiniz bir şey (doğru hedefleme değilse) kullanmaktansa "giriş: sıfırlama" kullanmaktır ... Ayrıca, yanlış bulmak için çalışan hedef değil çünkü ben öneririm gerçek tıklamanın hedeflemesidir. Sadece kundakçı / geliştirici araçlarını aç, sana ne oldu, içeri at

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

ve ne olduğunu görün. ve sonra oradan gidebiliriz.

Bu yazıya göre burada , jQuery hiçbir sahiptir reset()yöntemi; ancak yerel JavaScript bunu yapar. Bu nedenle, jQuery öğesini aşağıdakilerden birini kullanarak bir JavaScript nesnesine dönüştürün:

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

Bu, vanilya Javascript'te jQuery'den daha kolay yapılan şeylerden biridir. jQuery'nin bir resetyöntemi yoktur, ancak HTML Form Öğesi vardır, böylece bir formdaki tüm alanları aşağıdaki gibi sıfırlayabilirsiniz:

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

(Burada diğer yanıtlar görüldüğü gibi: Eğer jQuery ile Bunu yaparsanız $('#configform')[0].reset()), [0]sen üzerinden doğrudan alacağı aynı form DOM öğesi getiriliyor document.getElementById. İkinci yaklaşım hem daha verimli hem de daha basittir (çünkü jQuery yaklaşımı ile önce bir koleksiyon alırsınız ve daha sonra ondan bir öğe almanız gerekirken, vanilya Javascript ile öğeyi doğrudan alırsınız).

Sıfırlama düğmesinin hiç komut dosyasına (veya ad veya kimliğe) ihtiyacı yoktur:

<input type="reset">

ve işiniz bitti. Ancak gerçekten komut dosyası kullanmanız gerekiyorsa , her form denetiminin içinde bulunduğu forma başvuran bir form özelliği olduğunu unutmayın , böylece şunları yapabilirsiniz:

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

Ancak sıfırlama düğmesi çok daha iyi bir seçimdir.

Sonunda sorunu çözdüm !! @RobG formetiket ve tableetiket konusunda haklıydı . Etiket masanın dışına yerleştirilmelidir. Bununla,form

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

jquery veya başka bir şey gerektirmeden çalışır. düğmesine ve tadaa basit bir tıklama ~ tüm form sıfırlanır;) parlak!

Bu basit kodu kullanın:

//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 işlevini kullanarak .closest (element) ve .find (...) .

Alma ebeveyn elemanı ve arayan çocuk .

Son olarak, gerekli işlevi yapın.

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

İlk satır form girişlerini sıfırlar

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

İkincisi seçimi sıfırlar2

İsteğe bağlı: Farklı etkinliklerle kayıtlı farklı türleriniz varsa bunu kullanabilirsiniz

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

Bu jQuery sıfırlama işleviyle form alanlarını hızlı bir şekilde sıfırlamak mümkündür.

Başarı yanıtı aldığınızda kodun altına ateşleyin.

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

Bunun gibi bir id = resetform ile bir girdi türü = sıfırlama ekleyebilirsiniz.

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

jquery ile öğenin üzerindeki id = resetform ile .click () işlevini aşağıdaki gibi kullanabilirsiniz

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

ve form sıfırlanır Not: css'nizi kullanarak sıfırlama düğmesini id = resetform ile de gizleyebilirsiniz

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

İşte Jquery ile basit bir çözüm. Küresel olarak çalışır. Koda bir göz atın.

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

Sıfırlamanız gereken her formdaki bir düğmeye net bir sınıf ekleyin. Örneğin:

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

jQuery bulunmamaktadır reset()yöntemi; ancak yerel JavaScript bunu yapar. Bu nedenle, jQuery öğesini aşağıdakilerden birini kullanarak bir JavaScript nesnesine dönüştürün:

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

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

Javascript kodunu kullanabiliriz

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

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

Bunu düşünmenin en basit yolu sağlam. Form etiketinin içine yerleştirin.

Aşağıdakileri kullanabilirsiniz.

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

Ardından formu temizleyin:

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

Kodunuzun çalışması gerekir. Var olduğundan emin olun static/jquery-1.9.1.min.js. Ayrıca, geri dönmeyi de deneyebilirsiniz static/jquery.min.js. Bu sorunu çözüyorsa, sorunu tespit ettiniz.