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 · Accepted Answer · 2013-04-09 15:17:35Z

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 9, 2013 at 15:17

answered Apr 9, 2013 at 14:05

drquicksilver

1,6359 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Shikiryu Over a year ago

parseInt takes another parameter.

drquicksilver Over a year ago

yes, an optional radix parameter which defaults to 10? I don't see the point in including that.

Shikiryu Over a year ago

It is not base 10 by default. See this and as MDN documentation says : Always specify this parameter to eliminate reader confusion and to guarantee predictable behavior

Krishna Kittu Over a year ago

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

drquicksilver Over a year ago

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

|

user1983983 · Accepted Answer · 2013-04-09 14:06:04Z

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 9, 2013 at 14:06

user1983983

4,8412 gold badges18 silver badges24 bronze badges

1 Comment

Krishna Kittu Over a year ago

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.

chandresh_cool · Accepted Answer · 2013-04-09 14:05:54Z

0

change the line

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

to

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

answered Apr 9, 2013 at 14:05

chandresh_cool

11.9k3 gold badges32 silver badges46 bronze badges

1 Comment

Krishna Kittu Over a year ago

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.

Donnie · Accepted Answer · 2013-04-09 14:07:34Z

0

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

answered Apr 9, 2013 at 14:07

Donnie

1138 bronze badges

1 Comment

Krishna Kittu Over a year ago

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.

Bergi · Accepted Answer · 2013-04-09 16:20:25Z

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 9, 2013 at 16:20

answered Apr 9, 2013 at 14:06

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

2 Comments

Krishna Kittu Over a year ago

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.

Bergi Over a year ago

I don't see why not. What are you doing? Are there any errors?

Vinicius Lima · Accepted Answer · 2013-04-09 17:38:33Z

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>

Collectives™ on Stack Overflow

while loop is not working in javascript code?

6 Answers 6

6 Comments

1 Comment

1 Comment

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

6 Comments

1 Comment

1 Comment

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related