动态输入字段上的Javascript动态输入字段

时间：2017-03-31 11:48:08

标签： javascript

如果选择了选项编号3，我在2个下拉列表之间添加了一个文本输入字段，将出现文本框。

此新文本框应从用户处获取数字，并在元素下添加新文本字段以供选项使用。

例如：如果用户在创建单选按钮的文本框中添加数字3，则会在Element行下显示3个新文本框，如下所示：

选项1 _____________ 选项2 _____________ 备选方案3 _____________ 

// Funkcija za pravljenje Elemenata
var i = 0;
var a = 1;
function mojaFunkcija() {
    var type1 = document.getElementById('type1').value;
    var type2 = document.getElementById('type2').value;
    var question = document.getElementById('question').value;
    var counter = 'Element';
    counter+= a;
    var prviElement=document.createElement('span');
    prviElement.textContent= counter + ':' +'  ';
    document.body.appendChild(prviElement);
    var pitanje= document.createElement('span');
    var unos='unos';
    unos += i;
    pitanje.id=unos;
    pitanje.textContent=question + ' ';
    document.body.appendChild(pitanje);
    var tip1 = document.createElement("input");
    var element='element';
    element += i;
    tip1.id=element;
    if (type1=='textbox') {
        tip1.type=type2
    } else {
        tip1.type=type1
    }
    document.body.appendChild(tip1);
    var linija1= document.createElement("br");
    document.body.appendChild(linija1);
    var linija2= document.createElement("br");
    document.body.appendChild(linija2);
    i++;
    a++;
}

function AddTextBox(elm) {
    var v = elm.value;
    var iCounter = elm.id.replace('type1', '');

    if (v == 'radio') {
        var textbox = document.createElement('input');
        textbox.type = 'text';
        textbox.id = 'txtSecond' + iCounter;
        elm.parentNode.insertBefore(textbox, elm.nextSibling);
    } else {
        //Ovaj kod ce da izbrise Textbox u slucaju da se izabere druga opcija.
        var rmv = document.getElementById('txtSecond' + iCounter);
        if (rmv != undefined) {
            rmv.remove();
        }
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="pepo.css">
    <meta charset="UTF-8">
    <script src="basa.js"></script>
    <title>OnlineForms</title>
    </head>
<body>
    <!--Ovaj kod je za Main Page-->
    <Main class="kocka">
        <div align="left">
            <input type="button" class="dropbtn" value="Administration" onClick="window.location.reload();return false;"/>
            &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
            <button class="dropbtn" id="getAllButton">Forms</button>
        </div>
        <br>
        <div align="left">
            <input type="number" id="key" class="dropbtn"  Placeholder="Type the key value"/>
            <button class="dropbtn" id="getButton"> Search </button> 
            <br>
            <br>
        </div>
    </Main>
    <!--Ovaj kod je za Elemente-->
    <div id="element" class="hide">
            <h1>Element <input type="text" class="dropbtn" id="question" value="" Placeholder="Type your question here"/>
            <select title="ddmenu" class="dropbtn" id="type1" onChange="AddTextBox(this)">
                <option selected disabled hidden value="Please select">Please select</option>
                <option value="textbox">textbox</option>
                <option value="checkbox">checkbox</option>
                <option value="radio">radio button</option>
                </select>
            <select title="ddmenu" class="dropbtn" id="type2">
                <option selected disabled hidden value="Please select">Please select</option>
                <option value="none">none</option>
                <option value="mandatory">mandatory</option>
                <option value="number">numeric</option>
            </select>
            </h1>
        <input type="button"  id="adddugme" class="dropbtn2" value="Add"  onclick="mojaFunkcija()"/>
        <br>
        <br>
        <button id="addButton" class='dropbtn'>Save</button>
        </div>
    <br>
    <br>
<div id="status"></div>
    <br>
<div id="status2"></div>
</body>
</html>

3 个答案:

答案 0 :(得分：0)

问题是您只执行一次代码。

把它放在一个循环中。

在这里，我做了一个循环来执行相同的代码x次，其中x是用户在表单中输入的数字

检查代码段

var i = 0;
var a = 1;
function mojaFunkcija() {
    var type1 = document.getElementById('type1').value;
    var type2 = document.getElementById('type2').value;
    var question = document.getElementById('question').value;
    var i=0;
    while(i<question){
       var counter = 'Element';
       counter+= a;
       var prviElement=document.createElement('span');
       prviElement.textContent= counter + ':' +'  ';
       document.body.appendChild(prviElement);
       var pitanje= document.createElement('span');
       var unos='unos';
        unos += i;
        pitanje.id=unos;
       pitanje.textContent=(i+1) + ' ';
        document.body.appendChild(pitanje);
        var tip1 = document.createElement("input");
        var element='element';
        element += i;
        tip1.id=element;
        if (type1=='textbox') {
           tip1.type=type2
        } else {
            tip1.type=type1
         }
          document.body.appendChild(tip1);
          var linija1= document.createElement("br");
          document.body.appendChild(linija1);
          var linija2= document.createElement("br");
          document.body.appendChild(linija2);
          i++;
          a++;
       }
     }

function AddTextBox(elm) {
    var v = elm.value;
    var iCounter = elm.id.replace('type1', '');

    if (v == 'radio') {
        var textbox = document.createElement('input');
        textbox.type = 'text';
        textbox.id = 'txtSecond' + iCounter;
        elm.parentNode.insertBefore(textbox, elm.nextSibling);
    } else {
        //Ovaj kod ce da izbrise Textbox u slucaju da se izabere druga opcija.
        var rmv = document.getElementById('txtSecond' + iCounter);
        if (rmv != undefined) {
            rmv.remove();
        }
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="pepo.css">
    <meta charset="UTF-8">
    <script src="basa.js"></script>
    <title>OnlineForms</title>
    </head>
<body>
    <!--Ovaj kod je za Main Page-->
    <Main class="kocka">
        <div align="left">
            <input type="button" class="dropbtn" value="Administration" onClick="window.location.reload();return false;"/>
            &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
            <button class="dropbtn" id="getAllButton">Forms</button>
        </div>
        <br>
        <div align="left">
            <input type="number" id="key" class="dropbtn"  Placeholder="Type the key value"/>
            <button class="dropbtn" id="getButton"> Search </button> 
            <br>
            <br>
        </div>
    </Main>
    <!--Ovaj kod je za Elemente-->
    <div id="element" class="hide">
            <h1>Element <input type="text" class="dropbtn" id="question" value="" Placeholder="Type your question here"/>
            <select title="ddmenu" class="dropbtn" id="type1" onChange="AddTextBox(this)">
                <option selected disabled hidden value="Please select">Please select</option>
                <option value="textbox">textbox</option>
                <option value="checkbox">checkbox</option>
                <option value="radio">radio button</option>
                </select>
            <select title="ddmenu" class="dropbtn" id="type2">
                <option selected disabled hidden value="Please select">Please select</option>
                <option value="none">none</option>
                <option value="mandatory">mandatory</option>
                <option value="number">numeric</option>
            </select>
            </h1>
        <input type="button"  id="adddugme" class="dropbtn2" value="Add"  onclick="mojaFunkcija()"/>
        <br>
        <br>
        <button id="addButton" class='dropbtn'>Save</button>
        </div>
    <br>
    <br>
<div id="status"></div>
    <br>
<div id="status2"></div>
</body>
</html>

答案 1 :(得分：0)

我想我明白你想要实现的目标。您似乎已经能够引用您想要该值的输入框，因为您正在AddTextBox函数中将其删除。在这种情况下，您可以使用类似的代码来循环，具体取决于该值。像这样：

var cnt = document.getElementById('txtSecond' + iCounter);
if (cnt != undefined && Number.isInteger(parseInt(cnt.value))) {
  // loop to create options
}

答案 2 :(得分：-1)

阅读有条件（三元）算子

然后简化你的js：

option ? option1 : option2

对于显示器，我会使用：

if (option === 'option1'){
  $('option2).hide() // or show
}

那里有点jquery，等等。

相关问题
最新问题