Jak zresetować pole wejściowe? jQuery

Przeczytałem kilka postów, w tym this i this, ale nie mogę uzyskać pola wejściowego do wyczyszczenia po przesłaniu. Jaki jest najbardziej podstawowy/elementarny sposób na zrobienie tego?Jak zresetować pole wejściowe? jQuery

Obecnie mam to:

$(document).ready(function(){ 
    $('form[name=checkListForm]').on('submit', function() { 
      // prevent the form from submitting 
      event.preventDefault(); 
      var toAdd = $(this).find('input[name=checkListItem]').val(); 
      $('.list').append("<div class='item'>" + toAdd + "</div>") 
      $('input[name=checkListItem').reset(); 
     }); 
});

Moje HTML jest:

<!DOCTYPE html> 
<html > 
    <head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" href="stylesheet.css">  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script type="text/javascript" src="script.js"></script> 
    </head> 
    <body> 
    <h2>To Do</h2> 
    <form name="checkListForm"> 
     <input type="text" name="checkListItem" /> 
     <button type="submit" id="button">Add!</button> 
    </form> 
    <br/> 
    <div class="list"></div> 
    </body> 
</html>

Źródło

2016-02-18 AlanH

jednej linii kodu do obsługi wszystkich polach '$ (formselector) [0] .reset();' –

Zamiast zresetowaniu po prostu ustawić pustą wartość pola wprowadzania danych przy użyciu ten bit kodu:

$('input[name=checkListItem').val('');

Aby zresetować wszystkie dane wejściowe w konkretnym formularzu, można również użyć następującego kodu (przy użyciu :input selektor):

$('form :input').val('');

Źródło

2016-02-18 20:47:09 stark

Dzięki, że zadziałało. Jako pytanie dodatkowe, czy wiesz, dlaczego selektor powinien być 'input [name = checkListItem', a nie' form [name = checkListForm'? – AlanH

@AlanH: Ponieważ chcesz ustawić wartość wejścia jako pustą, a nie formę. – Przemek

@AlanH: Dzieje się tak, ponieważ selektor 'input' w zasadzie wybiera formant formularza i ma wartość, którą można ustawić, podczas gdy' '$ ('form' ')' 'w zasadzie oznacza, że wybierasz sam element html, a nie formant formularza, ponieważ '$ ('form' ')' nie ma atrybutu wartości w odróżnieniu od selektora 'input', zobacz moją ostatnią edycję do odpowiedzi. – stark

To powinno zadziałać (sam testowałem).

$(document).ready(function(){ 
    $('form[name=checkListForm]').on('submit', function() { 
      //other code 
      $('input[name=checkListItem]').val("") 
     }); 
});

Źródło

2016-02-18 20:49:47 kodvin

Ten pracował dla mnie; Niewiele modyfikacji do. Używam function(e) i e.preventDefault() i używane $('input[name=checkListItem').val(''); zamiast reset()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<script> 

    $(document).ready(function(){ 
     $('form[name=checkListForm]').on('submit', function(e) { 
       // prevent the form from submitting 
       e.preventDefault(); 
       var toAdd = $(this).find('input[name=checkListItem]').val(); 
       $('.list').append("<div class='item'>" + toAdd + "</div>") 


       $('input[name=checkListItem').val(''); 
      }); 
    }); 
</script> 

<h2>To Do</h2> 
<form name="checkListForm"> 
    <input type="text" name="checkListItem" /> 
    <button type="submit" id="button">Add!</button> 
</form> 
<br/> 
<div class="list"></div>

Źródło

2016-02-18 21:00:26

możemy pisać po złożeniu.

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

Źródło

2018-01-29 10:38:47

Jak zresetować pole wejściowe? jQuery

Odpowiedz

Powiązane problemy