Javascript Dynamically adding text boxes with value

Question

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.

Despite the minimal attempt of HTML5 to standardise innerHTML, it is inconsistent across browsers, especially regarding attributes and properties. Do not rely on it for non-trivial purposes. — RobG
– RobG, Commented Oct 11, 2011 at 10:44

Sahil Muthoo · Accepted Answer · 2011-10-11 10:22:55Z

2

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);
}

edited Oct 11, 2011 at 10:22

answered Oct 11, 2011 at 10:14

Sahil Muthoo

12.6k2 gold badges32 silver badges39 bronze badges

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

1 Comment

Gatekeeper Over a year ago

yeah thats the right way to add elements to page... not to append some html text string

hungryMind · Accepted Answer · 2011-10-11 10:09:11Z

0

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>

answered Oct 11, 2011 at 10:09

hungryMind

7,0214 gold badges32 silver badges46 bronze badges

3 Comments

hungryMind Over a year ago

DOM does not recommend same name for two elements. But using JQuery, (change reference[] to reference) u can get the values with selector $("#reference"). If you want these values on server side, which language you are using?

hungryMind Over a year ago

not sure on php, check this forums.digitalpoint.com/showthread.php?t=31836

RobG Over a year ago

@hungryMind - there is nothing wrong with giving multiple elements the same name where it is specified as an attribute in the HTML standard. Please provide a reference where "DOM" says otherwise.

Collectives™ on Stack Overflow

Javascript Dynamically adding text boxes with value

2 Answers 2

1 Comment

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Related