Είχα κώδικα εργασίας που θα μπορούσε να επαναφέρει τη φόρμα μου όταν κάνω κλικ σε ένα κουμπί επαναφοράς. Ωστόσο, αφού ο κώδικάς μου μεγαλώνει, συνειδητοποιώ ότι δεν λειτουργεί πλέον.
<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>
Και η jQuery μου:
$('#configreset').click(function(){
$('#configform')[0].reset();
});
Υπάρχει κάποια πηγή που πρέπει να συμπεριλάβω στους κώδικες μου για να λειτουργήσει η μέθοδος .reset()
; Προηγουμένως χρησιμοποιούσα:
<script src="static/jquery.min.js">
</script>
<script src="static/jquery.mobile-1.2.0.min.js">
</script>
και η μέθοδος .reset()
λειτουργούσε.
Προς το παρόν χρησιμοποιώ
<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>
Θα μπορούσε ενδεχομένως να είναι ένας από τους λόγους;
$('#configreset').click(function(){
$('#configform')[0].reset();
});
Βάλτε το στο JS fiddle. Δούλεψε όπως προβλεπόταν.
Έτσι, κανένα από τα προαναφερθέντα ζητήματα δεν φταίει εδώ. Ίσως να έχετε κάποιο πρόβλημα με αντικρουόμενα αναγνωριστικά; Εκτελείται πραγματικά το κλικ;
Επεξεργασία: (επειδή είμαι ένας θλιμμένος σάκος χωρίς την κατάλληλη ικανότητα σχολιασμού) Δεν πρόκειται για ζήτημα που αφορά άμεσα τον κώδικά σας. Λειτουργεί μια χαρά όταν το βγάζετε από το πλαίσιο της σελίδας που χρησιμοποιείτε αυτή τη στιγμή, οπότε, αντί να είναι κάτι με το συγκεκριμένο jQuery/javascript & αποδιδόμενα δεδομένα φόρμας, πρέπει να είναι κάτι άλλο. Εγώ'θα άρχιζα να διχοτομώ τον κώδικα γύρω από αυτό έξω και να προσπαθήσω να βρω πού's συμβαίνει. Θέλω να πω, απλά για να βεβαιωθώ, υποθέτω ότι θα μπορούσατε να...
console.log($('#configform')[0]);
στη συνάρτηση κλικ και να βεβαιωθείτε ότι στοχεύει στη σωστή φόρμα...
και αν ναι, πρέπει να είναι κάτι που δεν αναφέρεται εδώ.
edit part 2: Ένα πράγμα που θα μπορούσατε να δοκιμάσετε (αν δεν το στοχεύει σωστά) είναι να χρησιμοποιήσετε "input:reset" αντί για αυτό που χρησιμοποιείτε... επίσης, θα πρότεινα επειδή δεν είναι ο στόχος που λειτουργεί εσφαλμένα να βρείτε τι στοχεύει το πραγματικό κλικ. Απλά ανοίξτε το firebug/developer tools, whathave you, πετάξτε το
console.log($('#configreset'))
και δες τι εμφανίζεται. και μετά μπορούμε να συνεχίσουμε από εκεί.
Ένα κουμπί επαναφοράς δεν χρειάζεται καθόλου σενάριο (ή όνομα ή id):
<input type="reset">
και είστε έτοιμοι. Αλλά αν πραγματικά πρέπει να χρησιμοποιήσετε σενάριο, σημειώστε ότι κάθε στοιχείο ελέγχου φόρμας έχει μια ιδιότητα form που αναφέρεται στη φόρμα στην οποία βρίσκεται, οπότε θα μπορούσατε να κάνετε:
<input type="button" onclick="this.form.reset();">
Αλλά ένα κουμπί επαναφοράς είναι μια πολύ καλύτερη επιλογή.
Ο κώδικάς σας θα πρέπει να λειτουργεί. Βεβαιωθείτε ότι υπάρχει το αρχείο static/jquery-1.9.1.min.js
. Επίσης, μπορείτε να δοκιμάσετε να επιστρέψετε στο static/jquery.min.js
. Εάν αυτό διορθώσει το πρόβλημα, τότε έχετε εντοπίσει το πρόβλημα.