Intérieure HTML avec des valeurs d'entrée

ai une petite question concernant innerHTML et la valeur des données qui ont été saisies. Voir la brève exemple ci-dessous (à l'aide de jQuery pour des raisons de commodité):

http://jsfiddle.net/F7urT/2/

jQuery:

jQuery(document).ready(function($) {
    $('.send').click(function() {
        alert( $('.content').html() );
        return false;
    });
});​

html:

<div class="content">
    <input type="text" name="input" value="Old Value" />
    <input type="button" class="send" value="Send" />
</div>​

Si vous modifiez la valeur d'entrée, puis cliquez sur le bouton "Envoyer", l'alerte indique que le innerHTML obtenu contient de l'entrée avec la "Vieille Valeur", plutôt que la valeur que l'utilisateur a entré. Pourquoi est-ce? Et comment pouvons-nous obtenir le code HTML comme une chaîne de caractères avec l'utilisateur a entré les valeurs d'entrée?

InformationsquelleAutor Matthew Ruddy | 2012-08-25
  1. 6

    La nouvelle valeur est stockée comme une propriété qui n'est pas un attribut, la valeur peut être obtenue par inputelement.value, la modification de la valeur n'affecte pas l'attribut. Si vous voulez le code html avec la nouvelle valeur juste définir l'attribut de la nouvelle valeur.

    Pour les cases à cocher et des boutons radio définissez l'attribut checked, définir le innerHTML pour les zones de texte, sélectionne pour définir l'attribut sélectionné l'option

    http://jsfiddle.net/mowglisanu/F7urT/5/

    • Merci, simple, mais pour une raison ou une autre n'avait pas eu lieu pour moi. Quels sont les autres types de champs de formulaire; sélectionnez les boîtes, les textareas, etc? La Question devrait mentionné ceci plutôt que strictement entrées; mes excuses.
    • voir mise à jour
    • Merci. Très simple, et vraiment devrait avoir attrapé moi-même. L'entêtement me conduire à perdre de temps à essayer de comprendre ce qui se passait avec InnerHTML, plutôt que de mettre en place une solution simple. Merci encore. Croit qu'elle a effectivement mis l'HTML en cours, y compris toute modification de valeurs d'entrée, etc, plutôt que littéralement la lecture de la source.
    InformationsquelleAutor Musa
  2. 3

    Vous ne pouvez pas l'obtenir avec .innerHTML (.html()). L'écriture dans un élément ne doit pas modifier le code html, ni modifier la value attribut dans la majoration réelle.

    Vous ne pouvez accéder à du contenu en cours par des questions directes à la élément de son .value - valeur. À l'aide de jQuery, vous pouvez le faire via .val() trop.

    InformationsquelleAutor jAndy
  3. 3

    cette solution est meilleure. fonctionne pour plus d'entrées.

      $('input[type=text]').attr('value', function (i, val) { return val; });
  $('input[type=checkbox],input[type=radio]').attr('checked', function () { return this.checked; });
  $('textarea').html(function () { return this.value; });
  $('select').find(':selected').attr('selected', 'selected');
    InformationsquelleAutor DanCZ
  4. 2

    $('#input_id').attr('value',$('#input_id').val());
    va mettre la valeur dans le code html

    InformationsquelleAutor orhanhenrik