javascript does not create input box

Question

I'm really new in javascripting...(my webpage is based on jsp) I'm trying to generate input box when option from select box is selected... When user select any input from select box, it will send value to function init() and generate input boxes based on the value...

For example: if

<option value="IP,OS" name="sysl"><%=sysname%></option>

is selected..then it should generate something like

<tr>
<td> Enter IP:</td>
<td><input type="text" id="IP" name="IP"></td>
</tr>
<tr>
<td> Enter OS:</td>
<td><input type="text" id="OS" name="OS"></td>
</tr>

But my code does doesn't generate any...

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <title>Run Batch Script</title>
    <script type="text/javascript">

    function init() {
        document.getElementById("bname").addEventListener("change", function(){
        var value = document.getElementById("bname").value; // this gives you the selected value.
        var split = value.split;
        var splitsize = split.length;
        for (var j=0; j<splitsize; j++){
            var a = "<input type = 'text' name = '" + split[j] + "' id = '" + split[j] + "'>";
            document.getElementById("inputBox").innerHTML = a;
        }
        // Your code to add the element that you need.

        }
    )};


    </script>
<body>
    <form action="./run?host=<%=host%>&envname=<%=envname%>" method="post" name="batchForm">  
    <table border="0">
    <tr style="font-weight: bold; font-size: 16px;">
        <td>System Name: </td>
    </tr> 


     <tr>
        <td>Select Batch : </td>
        <td><select id="bname" name="bname" onclicke="init()">
       <%
       String src = "";
       String[] temp;
       String loc = root + "\\" + "Temp.txt";
       int c;
       int tempsize;
       String param;
       BufferedReader S = new BufferedReader(new FileReader(loc));
       ArrayList<String> list = new ArrayList<String>();
       while ((src = S.readLine()) != null){
            c = 3;
            param = "";
            temp =src.split(":");
            tempsize =temp.length;
            list.add(temp[0]);
            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>
                <%
            }
       BatchS.close();
    %>
            </select></td>
     </tr>
     <div id = "inputBox"></div>

What did I do wrong?

Thanks in advance!

and replacing the content of inputBox at each iteration rather than appending a new text box. — JB Nizet
– JB Nizet, Commented Nov 26, 2012 at 20:48
@David still no difference :'( it doesn't generate any input boxes — user1516649
– user1516649, Commented Nov 26, 2012 at 20:48
At each iteration, you're doing document.getElementById("inputBox").innerHTML = a;. So at the end of the loop, the inputBox element will only contain the last input box generated. — JB Nizet
– JB Nizet, Commented Nov 26, 2012 at 21:00
You didn't provide the whole code. We don't even know if the function init() is ever invoked, and when it is invoked. Use Firebug or Chrome dev tools to debug your JS code. — JB Nizet
– JB Nizet, Commented Nov 26, 2012 at 21:07

Rogel Garcia · Accepted Answer · 2012-11-26 21:25:45Z

There is some confusion about the event registration of your tag. As you said your are new to javascript, I think that it worth some explanation about event registration.

You have two ways to register some event in your HTML tag.

Using some onSomething attribute, for example:

<select onclick="myFunction()"/>

The other way, is to register the event handler using javascript:

document.getElementById("sysinfo").addEventListener("click", function(){...});

Both will work. However, in the first example the handler will be registered for you automatically when the page loads. The second way, the handler must be registered manually.

In your code you are trying to mix both.

You can either use the tag event registration, and the event is onchange (not onselect as pointed by David). OR you will have to call the init() function when the page loads. One way to do that is by putting the following code at the end of your HTML to register your event when page loads.

 <script type="text/javascript">
 init();
 </script>

In summary I would do:

<script type="text/javascript">
   function writeInputs() {
        alert('writing inputs'); //helps checking if the handler is ok .. comment this when done
        var value = document.getElementById("sysinfo").value; // this gives you the selected value.
        var split = value.split;
        var splitsize = split.length;
        var code = '';
        for (var j=0; j<splitsize; j++){
            var a = "<input type = 'text' name = '" + split[j] + "' id = '" + split[j] + "'>";
            code += a;
        }
        document.getElementById("inputBox").innerHTML = code;
   }
</script>

<select id="sysinfo" name="sysname" onchange="writeInputs()">

The javascript is already corrected with a solution to the problem pointed by JB Nizet. I have not tested the code so there can be other problems

Collectives™ on Stack Overflow

javascript does not create input box

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related