Come resettare (cancellare) il modulo tramite JavaScript?

124

Ho provato $("#client.frm").reset();ma non funziona, quindi come reimpostare il modulo tramite jQuery?

javascript jquery

— akuzma
fonte

Possibile duplicato di stackoverflow.com/questions/680241/blank-out-a-form-with-jquery

— svk

6

Nota: Clear e Reset sono due cose diverse. Reset ( .reset()) riporterà i valori ai valori originali nell'HTML. Per questo, vedere la soluzione di Nick Craver di seguito. "Cancella" in genere significa reimpostare i valori su vuoto / deselezionato / deselezionato; vedi la soluzione MahmoudS.

— Luca

258

form.reset() è un metodo dell'elemento DOM (non uno sull'oggetto jQuery), quindi è necessario:

$("#client.frm")[0].reset();
//faster version:
$("#client")[0].reset();

O senza jQuery:

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

— Nick Craver
fonte

4

Il mio cervello si è appena espanso, grazie: "Un oggetto jQuery è un wrapper simile a un array attorno a uno o più elementi DOM. Per ottenere un riferimento agli elementi DOM effettivi (invece che all'oggetto jQuery), hai due opzioni. La prima (e metodo più veloce) consiste nell'usare la notazione dell'array: $ ("#foo") [0]; // Equivalente a document.getElementById ("foo") Il secondo metodo consiste nell'usare la funzione .get (): $ ("#foo ") .get (0); // Identico al precedente, solo più lento." learn.jquery.com/using-jquery-core/faq/…

— Andrew

Ricevo l'errore successivo: TypeError: document.getElementById (...). Reset non è una funzione [Ulteriori informazioni]. Uso il plugin FormValidate per il modulo. il suo resetForm non ripristina anche il modulo = (Qualche suggerimento?

— Eugen Konkov

Eugen, ecco dove, proprio come Indiana Jones e The Last Crusade, devi fare un atto di fede. Se chiami document.getElementById ('myform'). Reset () in realtà cancellerà il modulo anche se quel metodo sembra non esistere. Tipico M $ offuscamento.

— Newclique

43

Puoi semplicemente fare:

$("#client.frm").trigger('reset')

— user2057484
fonte

1

a Triggermi porta in un nuovo mondo

— gonatee

18

La soluzione Pure JS è la seguente:

function clearForm(myFormElement) {

  var elements = myFormElement.elements;

  myFormElement.reset();

  for(i=0; i<elements.length; i++) {

  field_type = elements[i].type.toLowerCase();

  switch(field_type) {

    case "text":
    case "password":
    case "textarea":
          case "hidden":

      elements[i].value = "";
      break;

    case "radio":
    case "checkbox":
        if (elements[i].checked) {
          elements[i].checked = false;
      }
      break;

    case "select-one":
    case "select-multi":
                elements[i].selectedIndex = -1;
      break;

    default:
      break;
  }
    }
}

— Mahmoud Saleh
fonte

1

Ecco la soluzione plugin jQuery che dovrebbe essere più o meno equivalente. stackoverflow.com/a/24496012/1766230 (Ho usato il tuo selectedIndex = -1trucco.)

— Luke

5

Questa soluzione non funziona ora (nel 2016). Quando il modulo ha valori predefiniti per gli input di testo, password e area di testo, è necessario utilizzare gli elementi [i] .defaultValue = "" invece degli elementi [i] .value = "".

— Andrew F.

var field_type = elements[i].type.toLowerCase();

— Martynas Januškauskas

@ Andrew: Dipende da cosa vuoi. Se vuoi solo reimpostare il modulo su defaultValues, puoi semplicemente chiamare reset()l'oggetto modulo. Il codice qui è per cancellare il modulo, piuttosto che ripristinarlo.

— Protector One

4

, il metodo reset () non cancella i valori predefiniti e il campo della casella di controllo e ci sono molti altri problemi.

Per ripristinare completamente, controlla il link sottostante -

http://www.javascript-coder.com/javascript-form/javascript-reset-form.htm

— Alpesh
fonte

4

Reimposta (cancella) modulo tramite Javascript& jQuery:

Javascript di esempio:

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

Esempio jQuery:

Puoi provare a utilizzare trigger() Link di riferimento

$('#client.frm').trigger("reset");

— Gaurang P
fonte

4

Nota, la funzione form.reset()non funzionerà se alcuni tag di input nel modulo hanno attributiname='reset'

— alexbobroff
fonte

2

Prova questo :

$('#resetBtn').on('click', function(e){
    e.preventDefault();
    $("#myform")[0].reset.click();
}

— Hazem_M
fonte

2

Cancella il modulo come segue

document.forms[0].reset();

Puoi semplicemente cancellare gli elementi del modulo all'interno del gruppo. usando questo forms[0].

— Nagaraju Vuppala
fonte

1

Usa la funzione JavaScript reset():

document.forms["frm_id"].reset();

— Felix Bagur
fonte

1

Potresti usare quanto segue:

$('[element]').trigger('reset')

— Solo imparando
fonte

0

Prova questo codice. Una soluzione completa per la tua risposta.

    <!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(":reset").css("background-color", "red");
});
</script>
</head>
<body>

<form action="">
  Name: <input type="text" name="user"><br>
  Password: <input type="password" name="password"><br>
  <button type="button">Useless Button</button>
  <input type="button" value="Another useless button"><br>
  <input type="reset" value="Reset">
  <input type="submit" value="Submit"><br>
</form>

</body>
</html>

— Jaffer Wilson
fonte

-1

Puoi cancellare l'intero modulo usando la funzione onclick.Ecco il codice per esso.

 <button type="reset" value="reset" type="reset" class="btnreset" onclick="window.location.reload()">Reset</button>

La funzione window.location.reload () aggiornerà la tua pagina e tutti i dati verranno cancellati.

— Arjun
fonte