while loop is not working in javascript code?

Question

In this code I'm trying to generate dynamic text fields based on the input of select field which handled by addInput(divname) function using on change event but the while loop inside addInput function is not working and when i remove while loop its working. i have to generate selected no. of text fields... and also the text fields should change when i select different number...

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <form action="adduniv.php" method="post">
            University Name: <input type="text" name="college">
            No. of branches:
            <div id="dynamicInput">
                 <select name="branches" id="branches" onchange="if (this.selectedIndex) addInput('dynamicInput');;" ">
                     <option value="1">1</option>
                     <option value="2">2</option>
                     <option value="3">3</option>
                     <option value="4">4</option>
                     <option value="5">5</option>
                     <option value="6">6</option>
                     <option value="7">7</option>
                     <option value="8">8</option>
                </select>
            </div>   
            <script>
                var counter = 0;
                var limit = 3;  
                function addInput(divName)
                {       
                    var k=parseInt(document.getElementById("branches"));
                    var newdiv;
                    while(k>0) 
                    {
                        newdiv = document.createElement('div');
                        newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
                        document.getElementById(divName).appendChild(newdiv);
                        counter++;
                        k--;
                     }
                 }
             </script>
             <input type="submit" value="submit" />
         </form>
    </body>
</html>

drquicksilver · Answer 1 · 2013-04-09T15:17:35.470

1

var k=parseInt(document.getElementById("branches"))

You can't parseInt a DOM element.

Suspect you meant

var k=parseInt(document.getElementById("branches").value,10)

with thanks to the comment from Shikiryu re: specifying the radix explicitly.

edited Apr 09 '13 at 15:17

answered Apr 09 '13 at 14:05

drquicksilver

1,627
9
12

`parseInt` takes another parameter. – Shikiryu Apr 09 '13 at 14:11
yes, an optional radix parameter which defaults to 10? I don't see the point in including that. – drquicksilver Apr 09 '13 at 14:17
It is **not** base 10 by default. [See this](http://stackoverflow.com/questions/850341/how-do-i-work-around-javascripts-parseint-octal-behavior) and as MDN documentation says : [*Always specify this parameter to eliminate reader confusion and to guarantee predictable behavior*](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/parseInt) – Shikiryu Apr 09 '13 at 14:44
yeah i forgot to add that.. thankyou and i got one more problem.. i cant access the dynamically produced textfield with php.... when javascript is triggered not only textfields but also i cant access whole form with javascript.... – Krishna Kittu Apr 09 '13 at 14:53
@Shikiryu thanks useful info. Of course this case is not going to trigger the octal case, and your link says that modern browsers don't do that anyway. Still no harm in coding defensively. – drquicksilver Apr 09 '13 at 15:19
@KrishnaKittu what do you mean by 'access from php' ? If you mean retrieve the contents when the POST happens, you should be able to as long as the dynamically added inputs are inside the `
` tag.
– drquicksilver Apr 09 '13 at 15:21

score 0 · Answer 2 · answered Apr 09 '13 at 14:05

0

change the line

var k=parseInt(document.getElementById("branches"));

to

var k=parseInt(document.getElementById("branches").value);

answered Apr 09 '13 at 14:05

chandresh_cool

11,753
3
30
45

yeah i forgot to add that.. thankyou and i got one more problem.. i cant access the dynamically produced textfield with php.... when javascript is triggered not only textfields but also i cant access whole form with javascript. – Krishna Kittu Apr 09 '13 at 14:54

score 0 · Accepted Answer · answered Apr 09 '13 at 14:06

0

document.getElementById("branches") returns a DOM-Node, but what you need to do, is to get the value of this DOM-Node. So try the following to generate k.

var k=parseInt(document.getElementById("branches").value);

answered Apr 09 '13 at 14:06

user1983983

4,793
2
15
24

yeah i forgot to add that.. thankyou and i got one more problem.. i cant access the dynamically produced textfield with php.... when javascript is triggered not only textfields but also i cant access whole form with javascript. – Krishna Kittu Apr 09 '13 at 14:54

Bergi · Answer 4 · 2013-04-09T16:20:25.220

0

parseInt(document.getElementById("branches"));

will result in NaN as far as I can tell. You are trying to parse a whole DOM node as an integer, what did you expect? You might want to get the value property from it:

parseInt(document.getElementById("branches").value, 10);

edited Apr 09 '13 at 16:20

answered Apr 09 '13 at 14:06

Bergi

630,263
148
957
1,375

yeah i forgot to add that.. thankyou and i got one more problem.. i cant access the dynamically produced textfield with php.... when javascript is triggered not only textfields but also i cant access whole form with javascript. – Krishna Kittu Apr 09 '13 at 14:57
I don't see why not. What are you doing? Are there any errors? – Bergi Apr 09 '13 at 16:20

score 0 · Answer 5 · answered Apr 09 '13 at 14:07

0

i think you forgot to add .value to document.getElementById("branches")

answered Apr 09 '13 at 14:07

Donnie

113
8

yeah i forgot to add that.. thankyou and i got one more problem.. i cant access the dynamically produced textfield with php.... when javascript is triggered not only textfields but also i cant access whole form with javascript. – Krishna Kittu Apr 09 '13 at 14:55

score 0 · Answer 6 · answered Apr 09 '13 at 17:38

Ok, I know the problem was solved, but I would try do this:

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">    
    <title>Creating input fields</title>
    <script>
      function addInput(nr_branches) {
        var nCounter = 0;        
        //-- Cleaning all elements
        var divB = document.getElementById('divBranches');
        if(divB.hasChildNodes()) {
          while(divB.childNodes.length >= 1) {
            divB.removeChild(divB.firstChild);
          }
        }                
        while(nCounter < nr_branches) {          
          //-- Create a input field
          var input = document.createElement("input");
          input.type = 'text';
          input.name = 'branche_nr_' + nCounter;
          input.placeholder = 'Branche Nr.' + nCounter;
          //document.getElementById("divBranches").innerHTML = "<input type='text' name='branche_nr_'"+ nCounter +" placeholder='Branche Nr."+ nCounter +"' />";
          document.getElementById('divBranches').appendChild(input);        
          nCounter++;          
        }                 
      }    
    </script>
  </head>  
  <body>
    <form name="frm" action="adduniv.php" method="post">
      <input type="text" name="college" placeholder="University Name" />
      <select name="branches" id="branches" onchange="addInput(this.value)">
        <option value="0">-select your branche-</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
      </select>
      <div id="divBranches"></div>
      <input type="submit" value="submit" />      
    </form>
  </body>
</html>

while loop is not working in javascript code?

6 Answers6