Search code examples
javascripthtmlcsstextboxradio-button

create a textbox based on the value of a radioButton

Hello Everyone I want to make sure that in my project once I change the value of a radio button next to it is created / or a textBox is made visible .. If the radioButton is "(SI)" the textBox is shown if the radioButton is "(NO") the textBox is dimmed

I am attaching an attempt that I made to generate textBox .. but I do not know how to manage the value of the radioButton ..

PS do not be ruthless, I'm a beginner with JavaScript-- enter image description here

<html>
<head>

<script language="JavaScript" type="text/javascript">
<!--
var num=1;
function accoda(){
    if(document.createElement && document.getElementById && document.getElementsByTagName) {
        // crea elementi
        var oTr=document.createElement("TR");
        var oTd1=document.createElement("TD");
        var oTd2=document.createElement("TD");
        var oField=document.createElement("INPUT");
        var oButt=document.createElement("INPUT");

        // setta attributi
        oField.setAttribute("type","text");
        oField.setAttribute("name","testo"+num);
        oButt.setAttribute("type","button");
        oButt.setAttribute("value","rimuovi");

        // setta gestore evento
        if(oButt.attachEvent) oButt.attachEvent('onclick',function(e){rimuovi(e);})
        else if(oButt.addEventListener) oButt.addEventListener('click',function(e){rimuovi(e);},false)

        // appendi al relativo padre
        oTd1.appendChild(oField);
        oTd2.appendChild(oButt);
        oTr.appendChild(oTd1);
        oTr.appendChild(oTd2);
        document.getElementById('tabella').getElementsByTagName('TBODY')[0].appendChild(oTr);

        // incrementa variabile globale
        num++
    }
}


function rimuovi(e){
    if(document.removeChild && document.getElementById && document.getElementsByTagName) {
        if(!e) e=window.event;
        var srg=(e.target)?e.target:e.srcElement;

        // risali al tr del td che contiene l' elemento che ha scatenato l' evento
        while(srg.tagName!="TR"){srg=(srg.parentNode)?srg.parentNode:srg.parentElement}

        // riferimento al tbody
        var tb=document.getElementById('tabella').getElementsByTagName('TBODY')[0];
        
        // rimuovi
        tb.removeChild(srg);
    }
}
//-->
</script>
</head>
<body>
<form name="modulo">
<input type="button" value="accoda" onclick="accoda()" />
<table border="1" id="tabella">
<tbody>
<tr>
<td><input type="text" name="testo0" /></td><td><input type="button" disabled="disabled" value="rimuovi" /></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
<html>
<body>
<script language="javascript">
  function controlla(){
    x=document.prova;
    if (x.scelta.value=="si"){
      window.location.href = '../affidatario.php?idCantiere=<?php echo $idCantiere?>'
      return false;
    }
    if (x.scelta.value=="no"){
      alert("Hai risposto no");
       window.location.href = '../inserimentoCantiere.php'
      return false;
    }
  }
</script>
<fieldset>
<strong>Vuoi inserire un affidatario?</strong>
<form action="?" method="POST" name="prova" onsubmit="return controlla();">
  SI<input type="radio" name="scelta" value="si" /><br />
  NO<input type="radio" name="scelta" value="no" /><br />
  <button type="submit">INVIA</button>
</form>
</fieldset>
</body>
</html>

Solution

  • Try this

    function controlla() {
        console.log("oie");
        x = document.prova;
        if (x.scelta.value == "si") {
            window.location.href = '../affidatario.php?idCantiere=608675750'
            return false;
        }
        if (x.scelta.value == "no") {
            alert("Hai risposto no");
            window.location.href = '../inserimentoCantiere.php'
            return false;
        }
    }
    document.querySelectorAll('input[name="scelta"').forEach(function(a) {
        a.addEventListener("change", function() {
            let textBox = document.getElementById("myInput");
            if (textBox) textBox.style.display = this.value === "si" ? "block" : "none";
        })
    });
    <html>
<body>
<fieldset>
<strong>Vuoi inserire un affidatario?</strong> 
<form action="?" method="POST" name="prova" onsubmit="return controlla();"> 
SI<input type="radio" name="scelta" value="si">
<input type="text" id="myInput" style="display: block;"><br>
NO<input type="radio" name="scelta" value="no"><br> 
<button type="submit">INVIA</button>
</form>
</fieldset> 
</body>
</html>