HTML bouton de réinitialisation en combinaison avec des valeurs de champ de texte défini avec jQuery

Question

je ce formulaire HTML:

<form action="#" method="post"> 
    <label for="label-id">id</label> 
    <input type="text" name="id" id="label-id" /> 
    <label for="label-name">Name</label> 
    <input type="text" name="name" id="label-name" /> 
    <label for="label-description">Description</label> 
    <input type="text" name="description" id="label-description" /> 
    <input type="reset" value="Cancel" /> 
    <input type="submit" value="Update" /> 
</form> 

Il n'y a pas de valeurs en elle, parce que je mets les valeurs avec appel jQuery (AJAX à un système back-end) de cette manière:

$('#label-id').val(data.id); 
$('#label-name').val(data.name); 
$('#label-description').val(data.description); 

donc, si j'appuie sur le type d'entrée = bouton "reset", toutes les valeurs sont vides. Mais je veux, qu'en pressant sur le bouton les valeurs que j'ai fixées avec les trois lignes ci-dessus dans jQuery devraient être là.

Par exemple. L'appel AJAX me donne les données id = 12, name = "test", description = "mon desc", les valeurs sont définies dans les champs de saisie de texte et je vois ces valeurs. Maintenant, quelqu'un change name = "test" en "test123". En appuyant sur le bouton de réinitialisation, la valeur devrait être name = "test" au lieu de "test123".

Comment est-ce que je peux faire ceci?

Merci d'avance & Cordialement.

Answer 1

Vous pouvez définir l'attribut/propriété defaultValue pour chaque élément <input>, alors quand le bouton de réinitialisation est enfoncé, tous les éléments sont remis à zéro à cette valeur par défaut définie:

$('#label-id').val(data.id)[0].defaultValue = data.id; 
$('#label-name').val(data.name)[0].defaultValue = data.name; 
$('#label-description').val(data.description)[0].defaultValue = data.description; 

démonstration de travail: http://jsfiddle.net/AndyE/NDahF/

NB: vous pouvez simplement utiliser .attr("defaultValue", value) à la place de [0].defaultValue, mais ce n'est pas tout à fait aussi efficace.

Notez également que defaultValue s'applique uniquement aux éléments de texte. Si vous avez d'autres types de champ, vous pouvez gérer l'élément onreset event de <form> réappliquer les paramètres par défaut de contrôle, sélectionne, radios, etc.

$('form').bind("reset", function() { 
    $('#label-id').val(data.id);   
    $('#label-name').val(data.name); 
    $('#label-description').val(data.description); 
    $('#label-someselect').val(data.someSelectValue); 

    // Cancel the default action 
    return false; 
}); 

Answer 2

Si vous stockez l'objet de données et de faire en fonction de ce que vous pouvez faire, par exemple:

var currentData; 

Assurez-vous que cela est en dehors de tout il est correctement scope ... par exemple. votre gestionnaire ready ou même global. ... et tourner la remise à zéro du champ en fonction:

function resetForm() { 
    $('#label-id').val(currentData.id); 
    $('#label-name').val(currentData.name); 
    $('#label-description').val(currentData.description); 
} 

Ensuite, dans votre gestionnaire success où vous utilisez le code ci-dessus, conservez votre data (que vous utilisez actuellement) et exécutez la fonction que nous avons fait l'utiliser, par exemple:

currentData = data; 
resetForm(); 

maintenant, vous pouvez utiliser cette même fonction sur l'événement reset du <form> ainsi, et arrêter la réinitialisation normale, comme ceci:

$("form").bind("reset", function(e) { 
    resetForm(); 
    e.preventDefault(); 
});