Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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>
share|improve this question

6 Answers

up vote 0 down vote accepted

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);
share|improve this answer
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 9 at 14:54
up vote 1 down vote 
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.

share|improve this answer
parseInt takes another parameter. – Shikiryu Apr 9 at 14:11
yes, an optional radix parameter which defaults to 10? I don't see the point in including that. – drquicksilver Apr 9 at 14:17
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 – Shikiryu Apr 9 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 9 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 9 at 15:19
show 1 more comment
up vote 0 down vote

change the line 

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

to

var k=parseInt(document.getElementById("branches").value);
share|improve this answer
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 9 at 14:54
up vote 0 down vote

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

share|improve this answer
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 9 at 14:55
up vote 0 down vote 
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);
share|improve this answer
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 9 at 14:57
I don't see why not. What are you doing? Are there any errors? – Bergi Apr 9 at 16:20
up vote 0 down vote

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>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.