Javascript Girl
  1. Javascript Girl
  3. Rails Forms: modifiez les champs de formulaire des champs précédemment sélectionnés
Intereting Posts
Texte en surbrillance dans UIWebView Déconnexion automatique de php ajax avec minuterie Comment la fonction load () permet-elle à l'utilisateur de fournir un rappel? Parcours squelettiques – détection du bouton arrière du navigateur appuyez sur JS: Quelle est la différence entre un! Fermeture et () fermeture? Pourquoi "google n'est pas défini" quand je charge google js api Javascript se réfère à l'objet / classe parent du gestionnaire d'événements Le déchargement de l'événement peut-il être utilisé pour faire une demande de décharge rapide d'ajax? Besoin de données simples pousser vers le navigateur en utilisant node.js Les promesses changent le code de sortie du travail de jenkins, comment éviter cela? Fonction de fonctionnement sur la fenêtre de défilement une fois dans jQuery Ajout de deux objets json et tri Jasmine – Comment espionner un appel de fonction dans une fonction? Créez des liens dans iframe à partir d'un domaine différent ouvert dans un nouvel onglet Puis-je charger un fichier local dans un élément de toile html?

Rails Forms: modifiez les champs de formulaire des champs précédemment sélectionnés

J'ai deux champs simples comme celui-ci: 

<%= f.input :ration_card ,as: :radio_buttons,collection: ["Yes","No"], input_html: {id: "rationcard"} %> <%= f.input :rationcardNum , label: "Ration Card No." ,input_html: {id: "rationcard_no"} %>

Je souhaite afficher le second champ uniquement si l'utilisateur sélectionne "Oui" pour le premier champ. My Jquery: 

 $(function(){ $("#rationcard").change(function(){ if ($("#rationcard").val()=="Yes"){ $("#rationcard_no").show(); } else { $("#rationcard_no").hide(); } }) })

Je vois que le fichier js est inclus à la tête de la page.

HTML généré: 

 <div class="control-group radio_buttons optional family_ration_card"> <label class="radio_buttons optional control-label" for="rationcard">Ration card</label> <div class="controls"> <label class="radio"> <input id="rationcard" class="radio_buttons optional" type="radio" value="Yes" name="family[ration_card]" checked="checked"> Yes </label> <label class="radio"> <input id="rationcard" class="radio_buttons optional" type="radio" value="No" name="family[ration_card]"> No </label> </div> </div> <div class="control-group string optional family_rationcardNum"> <label class="string optional control-label" for="rationcard_no">Ration Card No.</label> <div class="controls"> <input id="rationcard_no" class="string optional" type="text" value="DGFR12" size="50" name="family[rationcardNum]"> </div> </div>

Mais les champs dynamiques ne fonctionnent pas. Qu'est-ce qui ne va pas ici?

Ou suggérer une meilleure façon d'y parvenir.

Tout d'abord, vous ne pouvez pas placer d'identifiant sur les entrées, car vous finirez par deux entrées avec celles-ci et jQuery ne trouvera que la première. Deuxièmement, vous devez utiliser $ (ceci) dans votre gestionnaire.

Vous avez besoin de sth dans la ligne: 

 <%= f.input :ration_card ,as: :radio_buttons,collection: ["Yes","No"], wrapper_html: {id: "rationcard"} %> <%= f.input :rationcardNum , label: "Ration Card No." ,wrapper_html: {id: "rationcard_no"} %> $(function(){ var toggle_rationcardNum = function(visible) { if (visible){ $("#rationcard_no").show(); } else { $("#rationcard_no").hide(); } } $("#rationcard input").change(function(){ toggle_rationcardNum($(this).val()=="Yes") }) toggle_rationcardNum($("#rationcard input:checked").val()=="Yes") })();