zeigen entsprechende Textfelder beim Klicken auf Radiobutton

-1

Ich habe zwei Radiobuttons "Ja" und "Nein", beim Klicken auf "Ja" sollten zwei Textfelder angezeigt werden und beim Klicken auf "Nein" sollte ein anderes Eingabefeld erzeugt werden. Vorherige Eingabefelder sollten ausgeblendet werden, wie erreichen Sie dies in HTML?zeigen entsprechende Textfelder beim Klicken auf Radiobutton

<input type="Radio" name="radio2text" value="Radiobutton1" onclick="javascript:radioWithText('yes')" checked="checked" />Yes 
 

 
    <input type="Radio" name="radio2text" value="Radiobutton2" onclick="javascript:radioWithText('no')" />No 
 

 
    <div id="Incident ID" style="display:visible;"> 
 
     <br>Incident ID :<input type="Text" name="Incident ID"/></br> 
 
    </div> 
 
\t  
 
    <div id="Description" style="display:visible;"> 
 
     <br>Description :<input type="Text" name="Description"/></br> 
 
    </div> \t  
 

 
    <div id=" Ref" style="display:visible;"> 
 
     <br>Ref :<input type="Text" name="Ref"/></br> 
 
    </div> 
 
     
 

 
    <script type="text/javascript" language="JavaScript"> 
 
\t  function radioWithText(d) { 
 
\t \t  if(d =='yes'){ 
 
\t \t \t  document.getElementById('Incident ID').style.display = "visible"; 
 
\t \t \t  document.getElementById('Description').style.display = "visible"; 
 
\t \t \t  } else (d == 'no') { 
 
\t \t \t  document.getElementById('Ref').style.display = "visible"; 
 
\t \t  } 
 
\t \t } 
 
    </script>

Was ich brauche, hier zu ändern, um die gewünschte Ausgabe zu erhalten? Ich bekomme alle Eingabefelder für beide Radio-Buttons.

Quelle

2017-09-03 Saranya

Willkommen Überlauf zu stapeln. Bitte geben Sie den Code an, mit dem Sie arbeiten, zusammen mit dem, was Sie bisher versucht haben. –

Bitte poste deinen Code nicht als Kommentar. Geh zurück und bearbeite deine Frage und füge den dort formatierten Code ein. –

ja danke, jetzt Code ist in Frage – Saranya

Sie hatten eine große Anzahl von Tippfehlern und haben Ihren Code nicht richtig eingerichtet. Sehen Sie die Inline-Kommentare unten für Details:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Your page title here</title> 
 
    <style> 
 
    /* This CSS class is applied, by default to all the labels and 
 
     textboxes. The JavaScript just adds or removes it as needed. */ 
 
    .hidden { display:none; } 
 
    
 
    /* Give each element that uses this class a one line top and bottom margin to 
 
     separate it from other elements. */ 
 
    .row { margin: 1em 0; } 
 
    </style> 
 
</head> 
 
<body> 
 
    <!-- Radio Buttons should have a value that describes the meaning of the button. 
 
     Here, yes and no will do it. Also, don't use inline HTML event attributes, such 
 
     as "onclick", ever. It's extremely outdated, can lead to bugs and duplicated 
 
     code and doesn't follow modern best-practices. Instead do your event handling 
 
     in JavaScript. --> 
 
    <input type="Radio" name="radio2text" value="yes" checked="checked">Yes 
 
    <input type="Radio" name="radio2text" value="no">No 
 

 
    <!-- All of the following is hidden by default. --> 
 
    <!-- Don't include spaces in element ID's --> 
 
    <div id="IncidentID" class="hidden row"> 
 
    <!-- Don't use break tags for arbitrary line feeds. They are for breaking content 
 
     at a logical flow. Use CSS for layout. Also, don't use "/" at the end of 
 
     an opening tag as this syntax isn't needed and can cuase you to use it in 
 
     places where you shouldn't. You had </br> for example, which is incorrect. --> 
 
    Incident ID :<input type="Text" name="Incident ID"> 
 
    </div> 
 

 
    <div id="Description" class="hidden row"> 
 
    Description :<input type="Text" name="Description"> 
 
    </div> 
 

 
    <div id="Ref" class="hidden row"> 
 
    Ref :<input type="Text" name="Ref row"> 
 
    </div> 
 
     
 
    <!-- no need for 'type="text/javascript"' and 'language=javascript' --> 
 
    <script> 
 

 
    // Get all the radio buttons and put them into an array 
 
    var radioButtons = Array.from(document.querySelectorAll("input[type='radio']")); 
 
     
 
    // Loop through the array of radio buttons 
 
    radioButtons.forEach(function(btn){ 
 
     // Set up a click event handling function for each button 
 
     btn.addEventListener("click", radioWithText); 
 
    }); 
 
    
 
    // No need to pass any data to this function because the button that triggers it 
 
    // ("this" in the code below) can just look at its own HTML value to know what the 
 
    // meaning of the button is. 
 
    \t function radioWithText() { 
 
     // Get references to the elements the function needs to work with. 
 
     var incident = document.getElementById('IncidentID'); 
 
     var description = document.getElementById('Description'); 
 
     var ref = document.getElementById('Ref'); 
 
     
 
    \t if(this.value ==='yes'){ 
 
     // Instead of gettting/setting inline styles with the style property, just add 
 
     // or remove pre-made CSS classes. Since all the textboxes and labels start out 
 
     // with the CSS "hidden" class applied to them, it's just a matter of adding that 
 
     // class or removing it as necessary. 
 
\t  incident.classList.remove("hidden"); 
 
\t  description.classList.remove("hidden"); 
 
     ref.classList.add("hidden"); 
 
\t  } else { 
 
     incident.classList.add("hidden"); 
 
    \t  description.classList.add("hidden"); 
 
\t  ref.classList.remove("hidden"); 
 
\t  } 
 
    \t } 
 
    </script> 
 
</body> 
 
</html>

Quelle

2017-09-03 18:12:31

zeigen entsprechende Textfelder beim Klicken auf Radiobutton

Antwort

Verwandte Themen