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?
$('#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ì.
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.