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

Avevo un codice funzionante che poteva resettare il mio modulo quando clicco su un pulsante di reset. Tuttavia dopo che il mio codice è diventato più lungo, 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 metodo .reset() 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 metodo .reset() funzionava.

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 essere uno dei motivi?

halfer
Domanda modificata 5º gennaio 2014 в 9:57
Programmazione
javascript reset forms jquery
9º maggio 2013 в 1:02
20 visualizzazioni

http://jsfiddle.net/8zLLn/

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

L'ho messo in JS fiddle. Ha funzionato come previsto.

Quindi, nessuno dei problemi sopra citati è in difetto qui. Forse stai avendo un problema di ID in conflitto? Il clic viene effettivamente eseguito?

Edit: (perché sono un triste sacco senza la capacità di commentare) Non è un problema direttamente con il tuo codice. Funziona bene quando lo togli dal contesto della pagina che stai usando, quindi, invece di essere qualcosa con il particolare jQuery/javascript & dati del modulo attribuiti, deve essere qualcos'altro. Io comincerei a dividere il codice intorno ad esso e cercherei di trovare dove sta succedendo. Voglio dire, solo per 'essere sicuri'suppongo che si potrebbe...

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

nella funzione "click" e assicurarti che stia puntando al modulo giusto...

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

modifica parte 2: Una cosa che potresti provare (se non sta puntando correttamente) è usare "input:reset" invece di quello che stai usando... inoltre, suggerirei perché non è il bersaglio che non funziona correttamente di scoprire cosa sta puntando il clic effettivo. Basta aprire firebug/strumenti di sviluppo, o quello che è, e buttare dentro

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

e vedere cosa salta fuori. e poi possiamo partire da lì.

FullOnFlatWhite
Risposta modificata 9º maggio 2013 в 2:25
Commentari (17)

Un pulsante di reset non ha bisogno di alcuno script (o nome o id):

<input type="reset">

e il gioco è fatto. Ma se proprio devi usare uno script, nota che ogni controllo di modulo ha una proprietà form che fa riferimento al modulo in cui si trova, quindi potresti fare:

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

Ma un pulsante di reset è una scelta molto migliore.

Commentari (7)

Il tuo codice dovrebbe funzionare. Assicurati che static/jquery-1.9.1.min.js esista. Inoltre, puoi provare a tornare a static/jquery.min.js. Se questo risolve il problema, allora hai individuato il problema.

Commentari (2)