views:

43

answers:

4

Hello. So as I click the button, the javascript adds new fields. Currently it adds the new text box to the side.. is there a way to make it add below? I guess as if there were a
. Here is the code. Thanks!

<html>
<head>
 <script type="text/javascript">
  var instance = 1;

  function newTextBox(element)
  {  
   instance++; 
   var newInput = document.createElement("INPUT");
   newInput.id = "text" + instance;
   newInput.name = "text" + instance;
   newInput.type = "text";
   //document.body.write("<br>");
   document.body.insertBefore(newInput, element);
  }
 </script>
</head>


<body>
 <input id="text2" type="text" name="text1"/> <br>
 <input type="button" id="btnAdd" value="New text box" onclick="newTextBox(this);" />
</body>

+2  A: 

Insert a <br/> tag infront of the inserted input or better yet, put the input into a div and control the look of it with CSS.

munch
A: 

Add this to the end of your function:

document.body.insertBefore(document.createElement("br"), element);

Full code:

<html>
<head>
        <script type="text/javascript">
                var instance = 1;

                function newTextBox(element)
                {               
                        instance++; 
                        var newInput = document.createElement("INPUT");
                        newInput.id = "text" + instance;
                        newInput.name = "text" + instance;
                        newInput.type = "text";
                        //document.body.write("<br>");
                        document.body.insertBefore(newInput, element);

                        document.body.insertBefore(document.createElement("br"), element);
                }
        </script>
</head>


<body>
        <input id="text2" type="text" name="text1"/> <br>
        <input type="button" id="btnAdd" value="New text box" onclick="newTextBox(this);" />
</body>
</html>
row1
A: 

Just create a <br> element the same way and put it between.

var newBr = document.createElement("BR");
document.body.insertBefore(newBr, element);

Or use CSS. The display:block may be of value.

BalusC
A: 

You could either, insert br element after the new input, or wrap it inside a div element:

function newTextBox(element) {                
    instance++; 
    var newInput = document.createElement("INPUT"); 
    newInput.id = "text" + instance; 
    newInput.name = "text" + instance; 
    newInput.type = "text"; 

    var div = document.createElement('div'); 
    div.appendChild(newInput); 
    document.body.insertBefore(div, element); 
}

Check the above example here.

CMS