Come resettare un modulo usando jQuery con il metodo .reset ()

Avevo un codice funzionante che poteva ripristinare il mio modulo quando facevo clic su un pulsante di ripristino. Tuttavia, dopo che il mio codice si sta allungando, mi rendo conto che non funziona più.

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

E il mio jQuery:

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

C'è qualche fonte che dovrei includere nei miei codici affinché il .reset()metodo funzioni? In precedenza stavo usando:

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

e il .reset()metodo stava funzionando.

Attualmente sto usando

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

Potrebbe forse essere uno dei motivi?

potresti provare a usare trigger () Link di riferimento

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

http://jsfiddle.net/8zLLn/

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

Mettilo nel violino JS. Ha funzionato come previsto.

Quindi, nessuna delle questioni sopra menzionate è in difetto qui. Forse stai riscontrando un problema con l'ID in conflitto? Il clic sta effettivamente eseguendo?

Modifica: (perché sono un sacco triste senza un'adeguata capacità di commento) Non è un problema direttamente con il tuo codice. Funziona bene quando lo togli dal contesto della pagina che stai attualmente utilizzando, quindi, invece di essere qualcosa con i particolari dati jQuery / javascript e attribuiti al modulo, deve essere qualcos'altro. Comincerei a bisecare il codice attorno ad esso e proverei a trovare dove sta succedendo. Voglio dire, solo per "accertarmi", suppongo che tu possa ...

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

nella funzione clic e assicurati che abbia come target il modulo giusto ...

e se lo è, deve essere qualcosa che non è elencato qui.

modifica parte 2: una cosa che potresti provare (se non è indirizzata correttamente) è usare "input: reset" invece di quello che stai usando ... inoltre, suggerirei perché non è l'obiettivo che non funziona correttamente per scoprirlo quale sia il target del clic effettivo. Apri gli strumenti per sviluppatori / firebug, tutto ciò che ti serve, lancia

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

e vedi cosa appare. e poi possiamo andare da lì.

Secondo questo post qui , jQuery non ha alcun reset()metodo; ma JavaScript nativo lo fa. Quindi, converti l'elemento jQuery in un oggetto JavaScript usando:

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

Questa è una di quelle cose che in realtà è più facile fare in Javascript vanilla di jQuery. jQuery non ha un resetmetodo, ma l'elemento del modulo HTML ha, quindi puoi resettare tutti i campi in un modulo come questo:

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

Se lo fai tramite jQuery (come si vede in altre risposte qui :) $('#configform')[0].reset(), [0]sta recuperando lo stesso elemento DOM del modulo che otterresti direttamente tramite document.getElementById. Quest'ultimo approccio è allo stesso tempo più efficiente e più semplice (poiché con l'approccio jQuery ottieni prima una raccolta e poi devi recuperare un elemento da essa, mentre con il Javascript vanilla ottieni semplicemente l'elemento direttamente).

Un pulsante di ripristino non ha bisogno di alcuno script (o nome o ID):

<input type="reset">

e hai finito. Ma se proprio necessario utilizzare lo script, nota che ogni controllo di modulo ha una forma di proprietà che fa riferimento al modulo che è dentro, in modo che si possa fare:

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

Ma un pulsante di ripristino è una scelta molto migliore.

Finalmente ho risolto il problema !! @RobG aveva ragione su formtag e tabletag. il formtag deve essere posizionato fuori dal tavolo. con quello,

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

funziona senza la necessità di jquery o altro. basta fare clic sul pulsante e tadaa ~ l'intero modulo viene ripristinato;) geniale!

Uso questo semplice codice:

//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');
});

Usando la funzione jquery .closest (element) e .find (...) .

Ottenere l' elemento genitore e cercare il figlio .

Infine, esegui la funzione necessaria.

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

La prima riga ripristinerà gli input del modulo

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

Il secondo ripristinerà select2

Facoltativo: puoi utilizzarlo se hai tipi diversi registrati con eventi diversi

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

Un ripristino rapido dei campi modulo è possibile con questa funzione di ripristino jQuery.

quando hai ottenuto la risposta di successo, spara sotto il codice.

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

Puoi semplicemente aggiungere un tipo di input = reset con un id = resetform come questo

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

quindi con jquery usi semplicemente la funzione .click () sull'elemento con id = resetform come segue

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

e il modulo si reimposta Nota: è anche possibile nascondere il pulsante di ripristino con id = resetform utilizzando il proprio CSS

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

Ecco una soluzione semplice con Jquery. Funziona a livello globale. Dai un'occhiata al codice.

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

Aggiungi una classe chiara a un pulsante in ogni modulo necessario per ripristinarlo. Per esempio:

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

jQuery non ha reset()metodo; ma JavaScript nativo lo fa. Quindi, converti l'elemento jQuery in un oggetto JavaScript usando:

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

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

Possiamo semplicemente usare il codice Javascript

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

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

Il modo più semplice di pensare che sia robusto. Posizionare all'interno del tag del modulo.

È possibile utilizzare quanto segue.

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

Quindi cancella il modulo:

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

Il tuo codice dovrebbe funzionare. Assicurarsi che static/jquery-1.9.1.min.jsesista. Inoltre, puoi provare a ripristinare static/jquery.min.js. Se questo risolve il problema, hai individuato il problema.