создать текстовое поле на основе значения radioButton - PullRequest
Новая
       17

создать текстовое поле на основе значения radioButton

0 голосов
/ 26 ноября 2018

Привет всем. Я хочу убедиться, что в моем проекте после того, как я изменил значение переключателя рядом с ним, создан или текстовый блок сделан видимым. Если radioButton равен "(SI)", отображается текстовый блокесли radioButton - "(НЕТ"), textBox затемнен

Я прилагаю попытку, которую я сделал, чтобы сгенерировать textBox .. но я не знаю, как управлять значением radioButton ..

PS Не будь безжалостным, я новичок в 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>

Ответы [ 4 ]

0 голосов
/ 26 ноября 2018

Попробуйте это 

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>
0 голосов
/ 26 ноября 2018

Помимо размещения текстового поля, вы можете добавить текстовое поле, например, с идентификатором «myInput» и значением по умолчанию display:none;

, а затем добавить EventListener в событие изменения.Затем в соответствии со значением переключателя показать или скрыть текстовое поле.

Например: 

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>

<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>

<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 />
        <input type="text" id="myInput" style="display: none;">
        <button type="submit">INVIA</button>
    </form>
</fieldset>
<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;
        }
    }
    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";
        })
    });
</script>
</body>

</html>
0 голосов
/ 26 ноября 2018

Вот простой пример: 

let chbxElement = document.getElementById('chckbx');
let textBoxElement = document.getElementById('txtbx');

chbxElement.addEventListener('change', (e) => {
    textBoxElement.style.display = e.target.checked ? 'block' : 'none';
});
<input type="checkbox" id="chckbx"/>

<input type="text" id="txtbx" hidden/>
0 голосов
/ 26 ноября 2018

Измените отображение на 'none' для текстового поля
Возможно, у вас есть блок if.Что-то вроде
if(document.querySelector('_radiobutton_').checked) { //selecting the radio button with "SI" document.querySelector('theTextBox').style.display = '' //selecting the textbox }

...