Faire des champs éditables quand on clique sur un bouton
l'utilisateur de mon application doit être en mesure de changer l'email et le numéro de téléphone en cliquant sur un bouton "Modifier", c'est mon code:
<div class="field-group">
...............
....................
<div class="field field-omschrijving">
<label class="label">E-mailadres</label><div>@client.email</div>
</div>
<div class="field field-omschrijving field-last">
<label class="label">Telefoonnummer</label><div>@client.phoneNumber</div>
</div>
<input type="submit" class="form-submit" value="Change" name="op">
</div><!-- /.field-group -->
J'ai été à la recherche d'une solution, mais sans succès, la moindre idée sur comment puis-je le faire? Merci!
Merci beaucoup pour la réponse rapide! Mais.. mon erreur, ce que je voulais dire, c'est que les champs doivent apparaître dans une "voie normale" et lorsque l'utilisateur clique sur le bouton modifier de changer les choses pour un "modifiable façon", pour l'instant, le champ e-mail ressemble à ceci:!
Je veux qu'il ressemble à ceci:
Et après avoir cliqué sur le bouton "Modifier" il a ressembler à la première image. Merci encore!
Vous devez vous connecter pour publier un commentaire.
À l'aide de ce code après clic, vous pouvez modifier votre étiquette à l'entrée, comme dans vous photos.
Il vous aidera à maintenant, l'espoir
Voici un exemple:
Résultat est:
De l'espoir, il aidera
ns.init = function(){ $("#button-id").click(function() { $('#email').removeAttr("readonly"); }); };
Donner un id à bouton et les champs de saisie pour l'email et le ph n'.
Sur le clic d'un bouton, de masquer les juges lebel et afficher les champs de saisie.
JS
Pour la première que vous avez besoin est de mettre votre
@client.emailand @client.numéro de téléphone dans les entrées et les mettre inactif.
Ensuite, et après avoir cliqué sur modifier active à l'aide de javascript.
et à l'aide de jquery:
Quelque chose comme cela
Regardez cette JSFiddle ou mon blog pour un excellent exemple.
http://jsfiddle.net/biniama/YDcFF/
Maintenant HTML5 est disponible .
On peut utiliser l'attribut
De plus d'aide et de détails
http://html5doctor.com/the-contenteditable-attribute/