CODEWITHSUNDEEP
javajavascripthtmljsp
user1516649
user1516649

Reputation: 155

unable to create input text box when option is selected

I'm new in web developing, I tried to look for any resources from internet but I still can't figure out my problem...

=> reads text file and generates options... my test.jsp page

<tr>
<td>Select test : </td>
<td><select id="testname" name="testname" onchange="makeBox()">
while ((src = test.readLine()) != null){
    param = "";
    temp =src.split(":");
    tempsize =temp.length;
    if ((tempsize >2)){
        int i;
        for (i=2; tempsize>i ; i++){
            if((temp[i].equals("null"))){
                 param = "";
            }
            else if ((i ==2) && (temp[i] != "null")){
                 param = temp[i];
            }
            else if ((i > 2)){
                 param = param + "," + temp[i];
            }
         }
     }
      %>
     <option value="<%=param%>" name="<%=temp[0]%>"><%=temp[0]%></option>
     <%
}
test.close();
    %>
</select></td>
</tr>

When user selects one of these options, javascript will generate corresponding parameters in inputtext box...(number of parameters varies by each test)

Ex. Let's say 

<option value="size,height,weight" name=apple>apple</option>

is selected. Then I want my page to show 3 text boxes like....

<td> Enter size: </td>
<td><input type="text" id="size" name="size"></td>
<td> Enter height: </td>
<td><input type="text" id="height" name="height"></td>
<td> Enter wieght: </td>
<td><input type="text" id="weight" name="weight"></td>

My attempt:

<script type="text/javascript">
    function makeBox() {
        var selected = document.getElementById('batchname');
        for (var i=1, n=selected.options.length;i<n;i++){
            if (selected.options[i].value){
                var a = "<input type = 'text' name = '" + selected.options[i].value + "' id = '" + selected.options[i].value + "'>";
                document.getElementById("inputBox").innerHTML = a;
            }
        }
    };
    </script>

text file that I'm reading from:

Apple:A.B.C.D:size:colour
Banana:G.C.D.E:length
Pear:L.D.E.F:shape:weight:color
Orange:E.C.A.W:density:length:color:weight
Melon:E.P.D.A                    // no param

^ doesn't do anything... Am I fundamentally wrong to send multiple values from select box to create multiple input box? If there is better way, please suggest to me...:) thanks for your help!

Upvotes: 0

Views: 399

Answers (1)

aayush shrestha
aayush shrestha

Reputation: 1918

You have to add an event listener to your select field and create an element when the value is chaged. Here's a little code that might help you. I am only writing a rough code to give you an idea. You have to work around with it to make it work on your particular case.

you have to set this event listener as soon as the body is loaded. So on your HTML

<body onload="init()" id="stage" class="theme">

and on your javascript

function init() {
   document.getElementById("selectListID").addEventListener("change", function(){
      var value = document.getElementById("selectListID").value; // this gives you the selected value.
      // Your code to add the element that you need.
   };)
}

Hope this helps. Hope this helps.

Upvotes: 1

Related Questions