CODEWITHSUNDEEP
javascriptajax
ravi404
ravi404

Reputation: 7309

Javascript Dynamically adding text boxes with value

I'm new to javascript. I am trying to add multiple text box dynamically on run time.. 

        <script type="text/javascript">
            function ajax(){
                var x = document.getElementById("ajax").innerHTML;
                x= x + '<input name="reference[]" type="text" />';
                document.getElementById("ajax").innerHTML = x;
            }
        </script>

This is an on click event. Here my problem is that every time add a new text box the value of my previous text box disappears and an all the text boxes are empty each time the function is called.

Upvotes: 1

Views: 3843

Answers (2)

Sahil Muthoo
Sahil Muthoo

Reputation: 12506

I would suggest using document.createElement and document.appendChild

Example

function ajax() {
    var textBox = document.createElement('input');
    textBox.name = 'reference[]';
    textBox.type = 'text';
    document.getElementById("ajax").appendChild(textBox);
}

Upvotes: 2

hungryMind
hungryMind

Reputation: 7009

Append to existing content not overwriting it

Append:

document.getElementById("ajax").innerHTML += x;

Overwrite

document.getElementById("ajax").innerHTML = x;

Use this 

<script type="text/javascript">
            function ajax(){
                var x = '<input name="reference[]" type="text" />';
                document.getElementById("ajax").innerHTML += x;
            }
</script>

Upvotes: 0

Related Questions