Wyczyść pola formularza za pomocą jQuery

Chcę wyczyścić wszystkie pola wprowadzania i pola tekstowe w formularzu. Działa w następujący sposób, gdy używasz przycisku wprowadzania z resetklasą:

$(".reset").bind("click", function() {
  $("input[type=text], textarea").val("");
});

Spowoduje to wyczyszczenie wszystkich pól na stronie, nie tylko tych z formularza. Jak wyglądałby mój selektor dla samej formy, w jakiej znajduje się rzeczywisty przycisk resetowania?

$(".reset").click(function() {
    $(this).closest('form').find("input[type=text], textarea").val("");
});

W przypadku jQuery 1.6+ :

$(':input','#myform')
  .not(':button, :submit, :reset, :hidden')
  .val('')
  .prop('checked', false)
  .prop('selected', false);

Dla jQuery <1.6 :

$(':input','#myform')
  .not(':button, :submit, :reset, :hidden')
  .val('')
  .removeAttr('checked')
  .removeAttr('selected');

Zobacz ten post: Resetowanie wieloetapowego formularza za pomocą jQuery

Lub

$('#myform')[0].reset();

Jak sugeruje jQuery :

Pobieranie i zmiana właściwości DOM takie jak checked, selectedczy disabledstan elementów formy, należy .prop () sposobu.

Z jakichś powodów nie należy tego używać?

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

Nie będzie to obsługiwać przypadków, w których pola wejściowe formularza mają niepuste wartości domyślne.

Coś jak powinno działać

$('yourdiv').find('form')[0].reset();

jeśli użyjesz selektorów i dodasz wartości do pustych wartości, to nie resetuje formularza, powoduje, że wszystkie pola są puste. Resetowanie polega na utworzeniu formularza takim, jaki był przed wszelkimi czynnościami edycji dokonanymi przez użytkownika po załadowaniu formularza ze strony serwera. Jeśli istnieje dane wejściowe o nazwie „nazwa użytkownika”, a nazwa ta została wstępnie wypełniona po stronie serwera, większość rozwiązań na tej stronie usunie tę wartość z danych wejściowych, nie resetując jej do wartości sprzed zmiany użytkownika. Jeśli musisz zresetować formularz, użyj tego:

$('#myform')[0].reset();

jeśli nie musisz resetować formularza, ale wypełniasz wszystkie dane wejściowe pewną wartością, na przykład pustą wartością, możesz użyć większości rozwiązań z innych komentarzy.

Proste, ale działa jak urok.

$("#form").trigger('reset'); //jquery
document.getElementById("myform").reset(); //native JS

Jeśli ktoś nadal czyta ten wątek, oto najprostsze rozwiązanie, które nie używa jQuery, ale zwykłego JavaScript. Jeśli pola wejściowe znajdują się w formularzu, istnieje proste polecenie resetowania JavaScript:

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

Więcej o tym tutaj: http://www.w3schools.com/jsref/met_form_reset.asp

Twoje zdrowie!

$('form[name="myform"]')[0].reset();

Dlaczego w ogóle trzeba to robić za pomocą dowolnego JavaScript?

<form>
    <!-- snip -->
    <input type="reset" value="Reset"/>
</form>

http://www.w3.org/TR/html5/the-input-element.html#attr-input-type-ke words

Próbowałem tego pierwszego, ale nie wyczyści pól z wartościami domyślnymi.

Oto sposób na zrobienie tego za pomocą jQuery:

$('.reset').on('click', function() {
    $(this).closest('form').find('input[type=text], textarea').val('');
});

Jeśli chcesz opróżnić wszystkie pola wprowadzania, niezależnie od ich typu, jest to minuta

 $('#MyFormId')[0].reset();

Mam najłatwiejszy sposób na zresetowanie formularza

jQuery("#review-form")[0].reset();

lub

$("#review-form").get().reset();

Za pomocą Javascript możesz to po prostu zrobić za pomocą tej składni getElementById("your-form-id").reset();

możesz także użyć jquery, wywołując w ten sposób funkcję resetowania $('#your-form-id')[0].reset();

Pamiętaj, żeby nie zapomnieć [0]. Otrzymasz następujący błąd, jeśli

TypeError: $ (...). Reset nie jest funkcją

JQuery zapewnia również zdarzenie, którego możesz użyć

$ ('# form_id'). trigger („reset”);

Próbowałem i to działa.

Uwaga: Należy zauważyć, że metody te resetują formularz tylko do wartości początkowej ustawionej przez serwer podczas ładowania strony. Oznacza to, że jeśli dane wejściowe zostały ustawione na wartość „ustaw wartość” przed dokonaniem przypadkowej zmiany, pole zostanie zresetowane do tej samej wartości po wywołaniu metody resetowania.

Mam nadzieję, że to pomoże

$('#editPOIForm').each(function(){ 
    this.reset();
});

gdzie editPOIFormjest idatrybut twojego formularza.

Dlaczego nie używasz document.getElementById("myId").reset();? to jest proste i ładne

Testowany i zweryfikowany kod:

  $( document ).ready(function() {
    $('#messageForm').submit(function(e){
       e.preventDefault();
    });
    $('#send').click(function(e){
      $("#messageForm")[0].reset();
    });
  });

Javascript musi być włączony $(document).readyi musi być zgodny z twoją logiką.

Najłatwiejszym i najlepszym rozwiązaniem jest-
$("#form")[0].reset();

Nie używaj tutaj -
$(this)[0].reset();

Powiedzmy, że jeśli chcesz wyczyścić pola i oprócz accountType, w polu średniego czasu zostanie przywrócona konkretna wartość, tj. „Wszystkie”. Pozostałe pola powinny zostać zresetowane do pustych, tj. Pole tekstowe. Takie podejście zostanie zastosowane do wyczyszczenia konkretne pola jako nasze wymaganie.

 $(':input').not('#accountType').each( function() {

    if(this.type=='text' || this.type=='textarea'){
             this.value = '';
       }
    else if(this.type=='radio' || this.type=='checkbox'){
         this.checked=false;
      }
         else if(this.type=='select-one' || this.type=='select-multiple'){
              this.value ='All';
     }
 });

Używam tego :

$(".reset").click(function() {
  $('input[type=text]').each(function(){
     $(this).val('');
  });
});

A oto mój przycisk:

<a href="#" class="reset">
  <i class="fa fa-close"></i>
     Reset
</a>

Użyj tego kodu, w którym chcesz wywołać funkcję normalnego resetowania przez jQuery

setTimeout("reset_form()",2000);

I napisz tę funkcję Out Site jQuery na Document Ready

<script>
function reset_form()
{
    var fm=document.getElementById('form1');
    fm.reset();
}
</script>

Niektórzy z was narzekali, że radiotelefony są usuwane z domyślnego statusu „zaznaczone” ... Wystarczy dodać: radio,: selektory pola wyboru do .not, a problem został rozwiązany.

Jeśli nie możesz uruchomić wszystkich innych funkcji resetowania, zadziała ta.

• Na podstawie odpowiedzi Ngen

  function form_reset(formID){
      $(':input','#'+formID)
      .not(':button',':submit',':reset',':hidden',':radio',':checkbox')
      .val('');
  }

@using (Ajax.BeginForm("Create", "AcceptanceQualityDefect", new AjaxOptions()
{
    OnSuccess = "ClearInput",
    HttpMethod = "Post",
    UpdateTargetId = "defect-list",
    InsertionMode = InsertionMode.Replace
}, new { @id = "frmID" })) 

1. frmID jest identyfikacja formularza

2. OnSuccessoperacji nazywamy funkcją JavaScript o nazwie „ ClearInput”

   <script type="text/javascript">
       function ClearInput() {
           //call action for render create view
           $("#frmID").get(0).reset();
       }
   </script>

3. jeśli wykonasz oba te prawa, nie będziesz w stanie zatrzymać działania ...

Poniższy kod wyczyści cały formularz, a jego pola będą puste. Jeśli chcesz wyczyścić tylko określony formularz, jeśli strona ma więcej niż jeden formularz, podaj identyfikator lub klasę formularza

$("body").find('form').find('input,  textarea').val('');

Jeśli chcę wyczyścić wszystkie pola oprócz accountType..Użyj następujących

$q(':input','#myform').not('#accountType').val('').removeAttr('checked').removeAttr('selected');

kod, który widzę tutaj i dotyczące powiązanych pytań SO, wydaje się niekompletny.

Zresetowanie formularza oznacza ustawienie oryginalnych wartości z kodu HTML, dlatego zestawiłem to dla małego projektu, który wykonywałem na podstawie powyższego kodu:

            $(':input', this)
                .not(':button, :submit, :reset, :hidden')
                .each(function(i,e) {
                    $(e).val($(e).attr('value') || '')
                        .prop('checked',  false)
                        .prop('selected', false)
                })

            $('option[selected]', this).prop('selected', true)
            $('input[checked]',   this).prop('checked',  true)
            $('textarea',         this).each(function(i,e) { $(e).val($(e).html()) })

Daj mi znać, jeśli coś mi brakuje lub coś można poprawić.

Żadne z powyższych nie działa w prostym przypadku, gdy strona zawiera wywołanie kontroli użytkownika, które obejmuje przetwarzanie żądań IHttpHandler (captcha). Po wysłaniu żądania (do przetwarzania obrazu) poniższy kod nie usuwa pól w formularzu (przed wysłaniem żądania HttpHandler) wszystko działa poprawnie.

<input type="reset"  value="ClearAllFields" onclick="ClearContact()" />

 <script type="text/javascript">
       function ClearContact() {
           ("form :text").val("");
       }
    </script>

Napisałem uniwersalną wtyczkę jQuery:

/**
 * Resets any input field or form
 */
$.fn.uReset = function () {
    return this.filter('form, :input').each(function () {
        var input = $(this);
        
        // Reset the form.
        if (input.is('form')) {
            input[0].reset();
            return;
        }

        // Reset any form field.
        if (input.is(':radio, :checkbox')) {
            input.prop('checked', this.defaultChecked);
        } else if (input.is('select')) {
            input.find('option').each(function () {
                $(this).prop('selected', this.defaultSelected);
            });
        } else if (this.defaultValue) {
            input.val(this.defaultValue);
        } else {
            console.log('Cannot reset to default value');
        }
    });
};

$(function () {
    // Test jQuery plugin.
    $('button').click(function (e) {
        e.preventDefault();
        
        var button = $(this),
            inputType = button.val(),
            form = button.closest('form');
        
        if (inputType === 'form') {
            form.uReset()
        } else {
            $('input[type=' + inputType + '], ' + inputType, form).uReset();
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3>Form</h3>
<form>
    <input type="text" value="default"/><br /><br />
    Ch 1 (default checked) <input type="checkbox" name="color" value="1" checked="checked" /><br />
    Ch 2 <input type="checkbox" name="color" value="2" /><br />
    Ch 3 (default checked) <input type="checkbox" name="color" value="3" checked="checked" /><br /><br />
    <select name="time"><br />
        <option value="15">15</option>
        <option selected="selected" value="30">30</option>
        <option value="45">45</option>
    </select><br /><br />
    R 1 <input type="radio" name="color" value="1" /><br />
    R 2 (default checked) <input type="radio" name="color" value="2" checked="checked" /><br />
    R 3 <input type="radio" name="color" value="3" /><br /><br />
    <textarea>Default text</textarea><br /><br />
    
    <p>Play with form values and then try to reset them</p>
    
    <button type="button" value="text">Reset text input</button>
    <button type="button" value="checkbox">Reset checkboxes</button>
    <button type="button" value="select">Reset select</button>
    <button type="button" value="radio">Reset radios</button>
    <button type="button" value="textarea">Reset textarea</button>
    <button type="button" value="form">Reset the Form</button>
</form>

Dodaj ukryty przycisk resetowania w następujący sposób

<input id="resetBtn" type="reset" value="reset" style="display:none" />
// Call reset buttons click event
// Similar to ClearInputs('resetBtn');
function ClearInputs(btnSelector) {
     var btn = $("#" + btnSelector);
     btn.click();
}

$ („formularz”). submission (function () {

var el = $(this);

$('<button type="reset" style="display:none; "></button>')
    .appendTo(el)
    .click()
    .remove()
;

return false;

});