Remplissage de champs de formulaire sur le changement de liste déroulante à l'aide de javascript

Je suis en train de charger les données dans mon champs en fonction de la valeur sélectionnée dans la liste déroulante. J'ai passé l'option de liste déroulante pour sélectionner la fonction javascript, mais avoir un problème dans la mise à jour des champs du formulaire. Veuillez vérifier mon code pour l'erreur que j'ai commise.

C'est mon code html:

 <div class="form-ui">
      <span class="form-elements reqField">
          <select class="dropdown" onchange="populateData(this.options[this.selectedIndex].value,1)">
              <option value="1">Please Select</option>
              <option value="2">Mrs.Jane Smith</option>
              <option value="3">Mr.Junior Smith</option>
          </select>
      </span>

      <span class="form-elements reqField">
           <select id="itle1" class="dropdown">
              <option value="1">Mr.</option>
              <option value="2">Ms.</option>
              <option value="3">Mrs.</option>
           </select>
     </span>

    <span class="form-elements">
          <input id="FirstName1" type="text" class="text" value="" />
    </span>

    <span class="form-elements reqField">
          <input id="LastName1" type="text" class="text" value="" />
    </span>
   </div>

Et le code javascript:

 function populateData(value,person){
    if(value==2){
        $('#Title'+person).value=3;
        $('#FirstName'+person).value="Jane";
        $('#LastName'+person).value="Smith";
    }
   if(value==3){

   }

 }
InformationsquelleAutor Angeline | 2011-03-16
  1. 2

    jQuery utilise val() pour obtenir et définir les valeurs.

    De sorte que votre js fonction doit être

    $('#FirstName'+person).val("Jane");
$('#LastName'+person).val("Smith");

    et pas

    $('#FirstName'+person).value="Jane";
$('#LastName'+person).value="Smith";

    Aussi

    <select class="dropdown" onchange="populateData(this.options[this.selectedIndex].value,1)">

    devrait être

    <select class="dropdown" onchange="populateData(this.value,1)">

    • Vérifiez également jsbin.com/iquyo5 pour un travail de démonstration
    • Merci, mais je ne suis pas en mesure de cocher la case et de définir la valeur de l'autre liste déroulante('titre') domaine. U pourrait m'aider
    • Eh bien, je ne vois aucune case à cocher dans votre code.Aussi avez-vous visité le lien que j'ai posté dans les commentaires?
    • ya, je l'ai vérifié. Utilisé le même code, mais la liste déroulante la valeur n'est pas mise à jour. Je n'ai pas ajouter la case code ici, mais je dois avoir une case en trop.
    • J'ai ajouté dans la case code dans jsbin, ça fonctionne, mais pas dans ma page 🙁 Quel pourrait être le problème?
    InformationsquelleAutor Clyde Lobo
  2. 2

    réponse rapide est que je pense que vous devez utiliser val() n'est pas la valeur - ne peut pas me rappeler la manière dont il travaille avec une sélection de si

    http://api.jquery.com/val/

    InformationsquelleAutor andyface
  3. 1

    HTML ID de l'erreur ici <select id="itle1" class="dropdown">
    Devrait être Title1 pas itle1

    Aussi je pense que le javascript doit ressembler à ceci

    function populateData(value,person){
    if(value==2){
        $('#Title'+person+' option[value="3"]').attr('selected','selected');
        $('#FirstName'+person).val("Jane");
        $('#LastName'+person).val("Smith");
    }
    if(value==3){

    }
}
    • Merci, mais la valeur de l'option n'est pas définie avec ce code.
    • Ok 🙂 je n'étais pas sûr à ce sujet
    InformationsquelleAutor Emmanuel
  4. 0

    Vous pouvez utiliser un FORMULAIRE au lieu d'un DIV, et l'attribut name, au lieu de id.

    Ils ont été conçus il y a longtemps pour gérer les formulaires.

    Vous pouvez utiliser jQuery pour cela, mais tout est déjà intégré dans le plus pur Javascript pour gérer les formulaires.

    <form class="form-ui">
  <span class="form-elements reqField">
      <select class="dropdown" onchange="populateData(this)">
          <option value="1">Please Select</option>
          <option value="2">Mrs.Jane Smith</option>
          <option value="3">Mr.Junior Smith</option>
      </select>
  </span>

  <span class="form-elements reqField">
       <select name="title" class="dropdown">
          <option value="1">Mr.</option>
          <option value="2">Ms.</option>
          <option value="3">Mrs.</option>
       </select>
 </span>

<span class="form-elements">
      <input name="FirstName" type="text" class="text" value="" />
</span>

<span class="form-elements reqField">
      <input name="LastName" type="text" class="text" value="" />
</span>
</form>
<script>
    function populateData(sel){
        var form = sel.form,
            value = sel.options[sel.selectedIndex].value;
        switch(value){
            case '3':
                form.FirstName.value = 'Junior';
                form.LastName.value = 'Smith';
                form.title.value = '1';
            break;
            case '2':
            break;
            default:
        }
    }
</script>
    InformationsquelleAutor Mic