Comment recharger la page en cours sans perdre toutes les données de formulaire?
Puis-je recharger la page en cours sans perdre toutes les données de formulaire? J'ai utilisé..
window.location = window.location.href;
et
window.location.reload(true);
Mais ces deux choses ne peuvent pas l'obtenir plus tôt formulaire de données pour moi. Quel est le problème ? Lors de l'actualisation du navigateur manuellement, il est très bien (je ne perds pas de données de formulaire). Merci de me guider comment le comprendre.
Voici mon code complet...
<div class="form-actions">
<form>
<table cellpadding = "5" cellspacing ="10">
<tr class="control-group">
<td style="width: 100px;">
<div>Name: <font color="red">(*)</font></div>
</td>
<td>
<input type="text" id="inputName" placeholder="Name" required>
</td>
</tr>
<tr class="control-group">
<td>
<div>Email: <font color="red">(*)</font></div>
</td>
<td>
<input class="span3" placeholder="[email protected]" id= "inputEmail" type="email" required>
</td>
</tr>
<tr class="control-group">
<td>
<div>Phone: </div>
</td>
<td>
<input type="text" id="inputPhone" placeholder="phone number">
</td>
</tr>
<tr class="control-group">
<td>
<div>Subject: <font color="red">(*)</font></div>
</td>
<td>
<input type="text" id="inputSubject" placeholder="Subject" required>
</td>
</tr>
<tr class="control-group">
<td colspan ="2">
<div>
<div>Detail: </div>
<div class="controls">
<textarea id="inputDetail"></textarea>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div>
<label style="font-weight: bold;" class="checkbox"> <input id="confirmCheck" value="" type="checkbox">
I Agree to the Personal information handling policy
</label>
</div>
<div id = "alert_placeholder"></div>
<div class="acceptment">
[Personal information handling policy]<br> <br>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div align="center">
<button id="btnConfirm" class="btn btn-primary">Confirm</button>
<input type="reset" style="width: 65px; height: 27px;" id="btnReset" class="btn">
</div>
</td>
</tr>
</table>
</form>
</div>
Et à mon fichier JS..
function bind() {
$('#btnConfirm').click(function(e) {
if ($('#confirmCheck').is(":checked")) {
getConfirmationForSendFAQ();
}
else {
e.preventDefault();
showalert("You should accept \"Personal Information Policy\" !", "alert-error");
}
});};function getConfirmationForSendFAQ() {
var name = $('#inputName').val();
var email = $('#inputEmail').val();
var phone = $('#inputPhone').val();
var subject = $('#inputSubject').val();
var detail = $('#inputDetail').val();
$('.form-actions').empty();
html = [];
html.push("<table cellpadding ='8' class = 'submitInfo'");
html.push("<tr>");
html.push("<td class = 'title'>Name:</div>");
html.push("<td class = 'value'>"+ name +"</td>");
html.push("</tr>");
html.push("<tr>");
html.push("<td class = 'title'>Email Address:</div>");
html.push("<td class = 'value'>"+ email +"</td>");
html.push("</tr>");
if (phone.trim().length > 0) {
html.push("<tr>");
html.push("<td class = 'title'>Phone No:</div>");
html.push("<td class = 'value'>"+ phone +"</td>");
html.push("</tr>");
}
html.push("<tr>");
html.push("<td class = 'title'>Subject:</div>");
html.push("<td class = 'value'>"+ subject +"</td>");
html.push("</tr>");
html.push("<tr>");
html.push("<td class = 'title'>Detail Info:</div>");
html.push("<td class = 'value'>"+ detail +"</td>");
html.push("</tr>");
html.push("<tr>");
html.push("<td colspan='2'><div align = 'center'>");
html.push("<button id='btnSend' class='btn btn-primary' style='width: 65px;'>Send</button>");
html.push("<button id='btnReturn' class='btn btn-inverse' style='width: 65px; height: 27px; margin-left: 5px;'>Return</button>");
html.push("</div></td></tr>");
html.push("</table>");
$('.form-actions').append(html.join(''));
$('#btnReturn').click(function(e) {
//HERE I WANT TO KNOW HOW TO DO.....
});
$('#btnSend').click(function(e) {
alert("Doom");
});}
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser divers mécanismes de stockage pour stocker ces données dans le navigateur Web tels que le Stockage, IndexedDB, WebSQL (obsolète) et de l'API (obsolète, et uniquement disponible en Chrome) (et UserData avec IE).
Le plus simple et le plus répandu est WebStorage où vous avez le stockage persistant (
localStorage
) ou session (sessionStorage
) qui est en mémoire jusqu'à ce que vous fermez le navigateur. Les deux partagent la même API.Vous pouvez par exemple (simplifié) de faire quelque chose de ce genre quand la page est sur le point de rechargement:
Web de Stockage fonctionne de manière synchrone, donc ce peut travail ici. Optionnellement, vous pouvez stocker les données pour chaque flou de l'événement sur les éléments où les données sont saisies.
Au chargement de la page, vous pouvez vérifier:
getItem
retournenull
si les données n'existe pas.Utilisation
sessionStorage
au lieu delocalStorage
si vous souhaitez stocker seulement temporaire.history.go(-1);
à la place?J'ai modifié K3N du code du travail pour mon but, et j'ai ajouté quelques commentaires pour aider les autres à comprendre comment sessionStorage œuvres.
Trouver ceci sur GitHub. Spécialement créé pour elle.
https://gist.github.com/zaus/4717416
Cette réponse a été extrêmement utile pour moi, et sauve la peine de passer par chaque champ manuellement:
Utilisation de jQuery pour stocker l'état de forme complexe
fonctionne pour moi.
J'ai l'habitude de soumettre automatiquement mon propre formulaire sur le serveur et de recharger la page avec remplis d'arguments. Remplacez l'espace réservé arguments avec les paramètres de votre serveur de réception.
D'accord avec HTML5 LocaStorage.
C'est un exemple de code
Que certaines réponses mentionner, localStorage est une bonne option, et vous pouvez certainement le faire vous-même, mais si vous êtes à la recherche d'un poli option, il y a déjà un projet sur GitHub qui ne de ce qu'on appelle garlic.js.
Vous devez soumettre des données et de recharger la page (côté serveur le rendu de formulaire avec les données), il suffit de rechargement ne permet pas de conserver les données. C'est juste votre navigateur peut être mise en cache des données de formulaire sur actualisation manuelle (pas même sur tous les navigateurs).
Vous pouvez utiliser localStorage ( http://www.w3schools.com/html/html5_webstorage.asp ) pour enregistrer les valeurs avant l'actualisation de la page.
Vous pouvez utiliser une bibliothèque que j'ai écrit, FormPersistence.js qui gère à la forme de la (dé)sérialisation enregistrer les valeurs locales/stockage de session. Cette approche est similaire à celle qui est liée à une autre réponse mais il ne nécessite pas de jQuery et de ne pas enregistrer les mots de passe en clair de stockage web.
Le second paramètre facultatif de chaque
FormPersistence
fonction définit s'il faut utiliser le stockage local (false
) ou de stockage de session (true
). Dans votre cas, le stockage de session est probablement plus approprié.Les données du formulaire par défaut sera supprimé lors de la soumission, sauf si vous passez
false
comme troisième paramètre. Si vous avez de la valeur particulière des fonctions de gestion (telles que l'insertion d'un élément), alors vous pouvez passer à ceux que le quatrième paramètre. Voir le référentiel pour la documentation complète.Enregistrer un écouteur d'événement pour
keyup
événement: