How do I insert several elements in a div using JavaScript?

up vote
0
down vote

favorite

I try to do a dynamic for ans I am very new with JS. With what I do, new added field keeps on deleting the previous:

function add_input() {

  var s = document.getElementById('ref').value;

  var i = 0;

    while ( i < s) {

      document.getElementById('the_list').innerHTML =

        '<p><input type="text" name="holder_'+ i +'" /></p>';

        

        i++;

    }

}

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

edited Nov 22 at 7:22

jnuK

1,4651325

asked Nov 22 at 5:49

Alain Briez

Do you want to delete the previous div on the creation of next div?
– Priyanshi Srivastava
Nov 22 at 5:59

Use appendChild instead innerHtml.
– Shashidhara
Nov 22 at 6:00

1

Possible duplicate of stackoverflow.com/questions/17650776/…
– DevProf
Nov 22 at 6:04

Read this MDN-appendChild
– Suman Kundu
Nov 22 at 6:09

add a comment |

up vote
0
down vote

favorite

I try to do a dynamic for ans I am very new with JS. With what I do, new added field keeps on deleting the previous:

function add_input() {

  var s = document.getElementById('ref').value;

  var i = 0;

    while ( i < s) {

      document.getElementById('the_list').innerHTML =

        '<p><input type="text" name="holder_'+ i +'" /></p>';

        

        i++;

    }

}

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

edited Nov 22 at 7:22

jnuK

1,4651325

asked Nov 22 at 5:49

Alain Briez

Do you want to delete the previous div on the creation of next div?
– Priyanshi Srivastava
Nov 22 at 5:59

Use appendChild instead innerHtml.
– Shashidhara
Nov 22 at 6:00

1

Possible duplicate of stackoverflow.com/questions/17650776/…
– DevProf
Nov 22 at 6:04

Read this MDN-appendChild
– Suman Kundu
Nov 22 at 6:09

add a comment |

up vote
0
down vote

favorite

I try to do a dynamic for ans I am very new with JS. With what I do, new added field keeps on deleting the previous:

function add_input() {

  var s = document.getElementById('ref').value;

  var i = 0;

    while ( i < s) {

      document.getElementById('the_list').innerHTML =

        '<p><input type="text" name="holder_'+ i +'" /></p>';

        

        i++;

    }

}

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

edited Nov 22 at 7:22

jnuK

1,4651325

asked Nov 22 at 5:49

Alain Briez

I try to do a dynamic for ans I am very new with JS. With what I do, new added field keeps on deleting the previous:

function add_input() {

  var s = document.getElementById('ref').value;

  var i = 0;

    while ( i < s) {

      document.getElementById('the_list').innerHTML =

        '<p><input type="text" name="holder_'+ i +'" /></p>';

        

        i++;

    }

}

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

function add_input() {

  var s = document.getElementById('ref').value;

  var i = 0;

    while ( i < s) {

      document.getElementById('the_list').innerHTML =

        '<p><input type="text" name="holder_'+ i +'" /></p>';

        

        i++;

    }

}

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

function add_input() {

  var s = document.getElementById('ref').value;

  var i = 0;

    while ( i < s) {

      document.getElementById('the_list').innerHTML =

        '<p><input type="text" name="holder_'+ i +'" /></p>';

        

        i++;

    }

}

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

javascript html

edited Nov 22 at 7:22

jnuK

1,4651325

asked Nov 22 at 5:49

Alain Briez

edited Nov 22 at 7:22

jnuK

1,4651325

asked Nov 22 at 5:49

Alain Briez

edited Nov 22 at 7:22

jnuK

1,4651325

edited Nov 22 at 7:22

jnuK

1,4651325

edited Nov 22 at 7:22

jnuK

1,4651325

asked Nov 22 at 5:49

Alain Briez

asked Nov 22 at 5:49

Alain Briez

asked Nov 22 at 5:49

Alain Briez

Do you want to delete the previous div on the creation of next div?
– Priyanshi Srivastava
Nov 22 at 5:59

Use appendChild instead innerHtml.
– Shashidhara
Nov 22 at 6:00

1

Possible duplicate of stackoverflow.com/questions/17650776/…
– DevProf
Nov 22 at 6:04

Read this MDN-appendChild
– Suman Kundu
Nov 22 at 6:09

add a comment |

Do you want to delete the previous div on the creation of next div?
– Priyanshi Srivastava
Nov 22 at 5:59

Use appendChild instead innerHtml.
– Shashidhara
Nov 22 at 6:00

1

Possible duplicate of stackoverflow.com/questions/17650776/…
– DevProf
Nov 22 at 6:04

Read this MDN-appendChild
– Suman Kundu
Nov 22 at 6:09

Do you want to delete the previous div on the creation of next div?
– Priyanshi Srivastava
Nov 22 at 5:59

Use appendChild instead innerHtml.
– Shashidhara
Nov 22 at 6:00

Possible duplicate of stackoverflow.com/questions/17650776/…
– DevProf
Nov 22 at 6:04

Read this MDN-appendChild
– Suman Kundu
Nov 22 at 6:09

add a comment |

5 Answers
5

active

oldest

votes

up vote
0
down vote

use += to add the new element with previous elements.

function add_input() {

        var s = document.getElementById('ref').value;

        var i = 0;

            while ( i < s) {

            console.log(s);

            document.getElementById('the_list').innerHTML +='<p><input type="text" name="holder_'+ i +'" ></p>';

                        i++;

            }

    }

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

answered Nov 22 at 6:06

Ismail Rubad

7181621

add a comment |

up vote
0
down vote

To directly answer your problem, you should use += instead of = when you add new HTML into it because by using =, you are overriding existing child elements inside it (deleting them).

So by using +=, you are just appending after existing child elements instead of overriding them.

function add_input() {

  var s = document.getElementById('ref').value;

  var i = 0;

    while (i < s) {

      document.getElementById('the_list').innerHTML += '<p><input type="text" name="holder_'+ i +'" /></p>';

      i++;

    }

}

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

Better yet, you should use DOM method appendChild directly instead of adding raw HTML:

function add_input() {

  var theList = document.getElementById('the_list');

  var s = document.getElementById('ref').value;

  var i = 0;

  var p;

  var input;

  while ( i < s) {

    p = document.createElement('p');

    input = document.createElement('input');

    input.setAttribute('type', 'text');

    input.setAttribute('name', 'holder_' + i);

    p.appendChild(input);

    theList.appendChild(p);

    i++;

  }

}

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

answered Nov 22 at 6:11

Yong Quan

1,6441518

add a comment |

up vote
0
down vote

Actually, in your while code, you are missing + sign due to which each time the loop is adding only one element removing previously added input fields.

Just update your function like

 function add_input() {

        var s = document.getElementById('ref').value;

        document.getElementById('the_list').innerHTML = ""; // setting innerHTML of div to empty

        var i = 0;

            while ( i < s) {

            document.getElementById('the_list').innerHTML +='<p><input type="text" name="holder_'+ i +'" /></p>';

            //You are missing that + sign

                        i++;

            }

    }

answered Nov 22 at 6:13

Sajjad Ali

20218

add a comment |

up vote
0
down vote

This should work..

<script type="text/javascript">

    function add_input(){

        var s = document.getElementById('ref').value;

        var i = 0;

            while ( i < s) {

              var ele = document.createElement("INPUT");

              ele.setAttribute("type", "text");

              ele.setAttribute("value", "Hello World!"); 

              ele.setAttribute("name", "holder_"+i); 

              document.getElementById('the_list').appendChild(ele);

              i++;

            }

    }

 </script>

answered Nov 22 at 6:13

Shashidhara

384211

add a comment |

up vote
0
down vote

Try this

 function add_input() {

        

        $( "#the_list" ).empty();//if you want to delete previous elements otherwise remove this

        var s = document.getElementById('ref').value;

        var i = 0;

            while ( i < s) {

$('#the_list').append('<p><input type="text" name="holder_'+ i +'" /></p>');  

                        i++;

            }

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

edited Nov 22 at 6:30

answered Nov 22 at 6:09

Priyanshi Srivastava

17510

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53424614%2fhow-do-i-insert-several-elements-in-a-div-using-javascript%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

5 Answers
5

active

oldest

votes

5 Answers
5

active

oldest

votes

up vote
0
down vote

use += to add the new element with previous elements.

function add_input() {

        var s = document.getElementById('ref').value;

        var i = 0;

            while ( i < s) {

            console.log(s);

            document.getElementById('the_list').innerHTML +='<p><input type="text" name="holder_'+ i +'" ></p>';

                        i++;

            }

    }

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

answered Nov 22 at 6:06

Ismail Rubad

7181621

add a comment |

up vote
0
down vote

use += to add the new element with previous elements.

function add_input() {

        var s = document.getElementById('ref').value;

        var i = 0;

            while ( i < s) {

            console.log(s);

            document.getElementById('the_list').innerHTML +='<p><input type="text" name="holder_'+ i +'" ></p>';

                        i++;

            }

    }

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

answered Nov 22 at 6:06

Ismail Rubad

7181621

add a comment |

up vote
0
down vote

use += to add the new element with previous elements.

function add_input() {

        var s = document.getElementById('ref').value;

        var i = 0;

            while ( i < s) {

            console.log(s);

            document.getElementById('the_list').innerHTML +='<p><input type="text" name="holder_'+ i +'" ></p>';

                        i++;

            }

    }

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

answered Nov 22 at 6:06

Ismail Rubad

7181621

use += to add the new element with previous elements.

function add_input() {

        var s = document.getElementById('ref').value;

        var i = 0;

            while ( i < s) {

            console.log(s);

            document.getElementById('the_list').innerHTML +='<p><input type="text" name="holder_'+ i +'" ></p>';

                        i++;

            }

    }

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

function add_input() {

        var s = document.getElementById('ref').value;

        var i = 0;

            while ( i < s) {

            console.log(s);

            document.getElementById('the_list').innerHTML +='<p><input type="text" name="holder_'+ i +'" ></p>';

                        i++;

            }

    }

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

function add_input() {

        var s = document.getElementById('ref').value;

        var i = 0;

            while ( i < s) {

            console.log(s);

            document.getElementById('the_list').innerHTML +='<p><input type="text" name="holder_'+ i +'" ></p>';

                        i++;

            }

    }

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

answered Nov 22 at 6:06

Ismail Rubad

7181621

answered Nov 22 at 6:06

Ismail Rubad

7181621

answered Nov 22 at 6:06

Ismail Rubad

7181621

answered Nov 22 at 6:06

Ismail Rubad

7181621

add a comment |

up vote
0
down vote

To directly answer your problem, you should use += instead of = when you add new HTML into it because by using =, you are overriding existing child elements inside it (deleting them).

So by using +=, you are just appending after existing child elements instead of overriding them.

function add_input() {

  var s = document.getElementById('ref').value;

  var i = 0;

    while (i < s) {

      document.getElementById('the_list').innerHTML += '<p><input type="text" name="holder_'+ i +'" /></p>';

      i++;

    }

}

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

Better yet, you should use DOM method appendChild directly instead of adding raw HTML:

function add_input() {

  var theList = document.getElementById('the_list');

  var s = document.getElementById('ref').value;

  var i = 0;

  var p;

  var input;

  while ( i < s) {

    p = document.createElement('p');

    input = document.createElement('input');

    input.setAttribute('type', 'text');

    input.setAttribute('name', 'holder_' + i);

    p.appendChild(input);

    theList.appendChild(p);

    i++;

  }

}

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

answered Nov 22 at 6:11

Yong Quan

1,6441518

add a comment |

up vote
0
down vote

To directly answer your problem, you should use += instead of = when you add new HTML into it because by using =, you are overriding existing child elements inside it (deleting them).

So by using +=, you are just appending after existing child elements instead of overriding them.

function add_input() {

  var s = document.getElementById('ref').value;

  var i = 0;

    while (i < s) {

      document.getElementById('the_list').innerHTML += '<p><input type="text" name="holder_'+ i +'" /></p>';

      i++;

    }

}

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

Better yet, you should use DOM method appendChild directly instead of adding raw HTML:

function add_input() {

  var theList = document.getElementById('the_list');

  var s = document.getElementById('ref').value;

  var i = 0;

  var p;

  var input;

  while ( i < s) {

    p = document.createElement('p');

    input = document.createElement('input');

    input.setAttribute('type', 'text');

    input.setAttribute('name', 'holder_' + i);

    p.appendChild(input);

    theList.appendChild(p);

    i++;

  }

}

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

answered Nov 22 at 6:11

Yong Quan

1,6441518

add a comment |

up vote
0
down vote

To directly answer your problem, you should use += instead of = when you add new HTML into it because by using =, you are overriding existing child elements inside it (deleting them).

So by using +=, you are just appending after existing child elements instead of overriding them.

function add_input() {

  var s = document.getElementById('ref').value;

  var i = 0;

    while (i < s) {

      document.getElementById('the_list').innerHTML += '<p><input type="text" name="holder_'+ i +'" /></p>';

      i++;

    }

}

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

Better yet, you should use DOM method appendChild directly instead of adding raw HTML:

function add_input() {

  var theList = document.getElementById('the_list');

  var s = document.getElementById('ref').value;

  var i = 0;

  var p;

  var input;

  while ( i < s) {

    p = document.createElement('p');

    input = document.createElement('input');

    input.setAttribute('type', 'text');

    input.setAttribute('name', 'holder_' + i);

    p.appendChild(input);

    theList.appendChild(p);

    i++;

  }

}

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

answered Nov 22 at 6:11

Yong Quan

1,6441518

To directly answer your problem, you should use += instead of = when you add new HTML into it because by using =, you are overriding existing child elements inside it (deleting them).

So by using +=, you are just appending after existing child elements instead of overriding them.

function add_input() {

  var s = document.getElementById('ref').value;

  var i = 0;

    while (i < s) {

      document.getElementById('the_list').innerHTML += '<p><input type="text" name="holder_'+ i +'" /></p>';

      i++;

    }

}

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

Better yet, you should use DOM method appendChild directly instead of adding raw HTML:

function add_input() {

  var theList = document.getElementById('the_list');

  var s = document.getElementById('ref').value;

  var i = 0;

  var p;

  var input;

  while ( i < s) {

    p = document.createElement('p');

    input = document.createElement('input');

    input.setAttribute('type', 'text');

    input.setAttribute('name', 'holder_' + i);

    p.appendChild(input);

    theList.appendChild(p);

    i++;

  }

}

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

function add_input() {

  var s = document.getElementById('ref').value;

  var i = 0;

    while (i < s) {

      document.getElementById('the_list').innerHTML += '<p><input type="text" name="holder_'+ i +'" /></p>';

      i++;

    }

}

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

function add_input() {

  var s = document.getElementById('ref').value;

  var i = 0;

    while (i < s) {

      document.getElementById('the_list').innerHTML += '<p><input type="text" name="holder_'+ i +'" /></p>';

      i++;

    }

}

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

function add_input() {

  var theList = document.getElementById('the_list');

  var s = document.getElementById('ref').value;

  var i = 0;

  var p;

  var input;

  while ( i < s) {

    p = document.createElement('p');

    input = document.createElement('input');

    input.setAttribute('type', 'text');

    input.setAttribute('name', 'holder_' + i);

    p.appendChild(input);

    theList.appendChild(p);

    i++;

  }

}

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

function add_input() {

  var theList = document.getElementById('the_list');

  var s = document.getElementById('ref').value;

  var i = 0;

  var p;

  var input;

  while ( i < s) {

    p = document.createElement('p');

    input = document.createElement('input');

    input.setAttribute('type', 'text');

    input.setAttribute('name', 'holder_' + i);

    p.appendChild(input);

    theList.appendChild(p);

    i++;

  }

}

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

answered Nov 22 at 6:11

Yong Quan

1,6441518

answered Nov 22 at 6:11

Yong Quan

1,6441518

answered Nov 22 at 6:11

Yong Quan

1,6441518

answered Nov 22 at 6:11

Yong Quan

1,6441518

add a comment |

up vote
0
down vote

Actually, in your while code, you are missing + sign due to which each time the loop is adding only one element removing previously added input fields.

Just update your function like

 function add_input() {

        var s = document.getElementById('ref').value;

        document.getElementById('the_list').innerHTML = ""; // setting innerHTML of div to empty

        var i = 0;

            while ( i < s) {

            document.getElementById('the_list').innerHTML +='<p><input type="text" name="holder_'+ i +'" /></p>';

            //You are missing that + sign

                        i++;

            }

    }

answered Nov 22 at 6:13

Sajjad Ali

20218

add a comment |

up vote
0
down vote

Actually, in your while code, you are missing + sign due to which each time the loop is adding only one element removing previously added input fields.

Just update your function like

 function add_input() {

        var s = document.getElementById('ref').value;

        document.getElementById('the_list').innerHTML = ""; // setting innerHTML of div to empty

        var i = 0;

            while ( i < s) {

            document.getElementById('the_list').innerHTML +='<p><input type="text" name="holder_'+ i +'" /></p>';

            //You are missing that + sign

                        i++;

            }

    }

answered Nov 22 at 6:13

Sajjad Ali

20218

add a comment |

up vote
0
down vote

Actually, in your while code, you are missing + sign due to which each time the loop is adding only one element removing previously added input fields.

Just update your function like

 function add_input() {

        var s = document.getElementById('ref').value;

        document.getElementById('the_list').innerHTML = ""; // setting innerHTML of div to empty

        var i = 0;

            while ( i < s) {

            document.getElementById('the_list').innerHTML +='<p><input type="text" name="holder_'+ i +'" /></p>';

            //You are missing that + sign

                        i++;

            }

    }

answered Nov 22 at 6:13

Sajjad Ali

20218

Actually, in your while code, you are missing + sign due to which each time the loop is adding only one element removing previously added input fields.

Just update your function like

 function add_input() {

        var s = document.getElementById('ref').value;

        document.getElementById('the_list').innerHTML = ""; // setting innerHTML of div to empty

        var i = 0;

            while ( i < s) {

            document.getElementById('the_list').innerHTML +='<p><input type="text" name="holder_'+ i +'" /></p>';

            //You are missing that + sign

                        i++;

            }

    }

answered Nov 22 at 6:13

Sajjad Ali

20218

answered Nov 22 at 6:13

Sajjad Ali

20218

answered Nov 22 at 6:13

Sajjad Ali

20218

answered Nov 22 at 6:13

Sajjad Ali

20218

add a comment |

up vote
0
down vote

This should work..

<script type="text/javascript">

    function add_input(){

        var s = document.getElementById('ref').value;

        var i = 0;

            while ( i < s) {

              var ele = document.createElement("INPUT");

              ele.setAttribute("type", "text");

              ele.setAttribute("value", "Hello World!"); 

              ele.setAttribute("name", "holder_"+i); 

              document.getElementById('the_list').appendChild(ele);

              i++;

            }

    }

 </script>

answered Nov 22 at 6:13

Shashidhara

384211

add a comment |

up vote
0
down vote

This should work..

<script type="text/javascript">

    function add_input(){

        var s = document.getElementById('ref').value;

        var i = 0;

            while ( i < s) {

              var ele = document.createElement("INPUT");

              ele.setAttribute("type", "text");

              ele.setAttribute("value", "Hello World!"); 

              ele.setAttribute("name", "holder_"+i); 

              document.getElementById('the_list').appendChild(ele);

              i++;

            }

    }

 </script>

answered Nov 22 at 6:13

Shashidhara

384211

add a comment |

up vote
0
down vote

This should work..

<script type="text/javascript">

    function add_input(){

        var s = document.getElementById('ref').value;

        var i = 0;

            while ( i < s) {

              var ele = document.createElement("INPUT");

              ele.setAttribute("type", "text");

              ele.setAttribute("value", "Hello World!"); 

              ele.setAttribute("name", "holder_"+i); 

              document.getElementById('the_list').appendChild(ele);

              i++;

            }

    }

 </script>

answered Nov 22 at 6:13

Shashidhara

384211

This should work..

<script type="text/javascript">

    function add_input(){

        var s = document.getElementById('ref').value;

        var i = 0;

            while ( i < s) {

              var ele = document.createElement("INPUT");

              ele.setAttribute("type", "text");

              ele.setAttribute("value", "Hello World!"); 

              ele.setAttribute("name", "holder_"+i); 

              document.getElementById('the_list').appendChild(ele);

              i++;

            }

    }

 </script>

answered Nov 22 at 6:13

Shashidhara

384211

answered Nov 22 at 6:13

Shashidhara

384211

answered Nov 22 at 6:13

Shashidhara

384211

answered Nov 22 at 6:13

Shashidhara

384211

add a comment |

up vote
0
down vote

Try this

 function add_input() {

        

        $( "#the_list" ).empty();//if you want to delete previous elements otherwise remove this

        var s = document.getElementById('ref').value;

        var i = 0;

            while ( i < s) {

$('#the_list').append('<p><input type="text" name="holder_'+ i +'" /></p>');  

                        i++;

            }

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

edited Nov 22 at 6:30

answered Nov 22 at 6:09

Priyanshi Srivastava

17510

add a comment |

up vote
0
down vote

Try this

 function add_input() {

        

        $( "#the_list" ).empty();//if you want to delete previous elements otherwise remove this

        var s = document.getElementById('ref').value;

        var i = 0;

            while ( i < s) {

$('#the_list').append('<p><input type="text" name="holder_'+ i +'" /></p>');  

                        i++;

            }

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

edited Nov 22 at 6:30

answered Nov 22 at 6:09

Priyanshi Srivastava

17510

add a comment |

up vote
0
down vote

Try this

 function add_input() {

        

        $( "#the_list" ).empty();//if you want to delete previous elements otherwise remove this

        var s = document.getElementById('ref').value;

        var i = 0;

            while ( i < s) {

$('#the_list').append('<p><input type="text" name="holder_'+ i +'" /></p>');  

                        i++;

            }

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

edited Nov 22 at 6:30

answered Nov 22 at 6:09

Priyanshi Srivastava

17510

Try this

 function add_input() {

        

        $( "#the_list" ).empty();//if you want to delete previous elements otherwise remove this

        var s = document.getElementById('ref').value;

        var i = 0;

            while ( i < s) {

$('#the_list').append('<p><input type="text" name="holder_'+ i +'" /></p>');  

                        i++;

            }

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

 function add_input() {

        

        $( "#the_list" ).empty();//if you want to delete previous elements otherwise remove this

        var s = document.getElementById('ref').value;

        var i = 0;

            while ( i < s) {

$('#the_list').append('<p><input type="text" name="holder_'+ i +'" /></p>');  

                        i++;

            }

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

 function add_input() {

        

        $( "#the_list" ).empty();//if you want to delete previous elements otherwise remove this

        var s = document.getElementById('ref').value;

        var i = 0;

            while ( i < s) {

$('#the_list').append('<p><input type="text" name="holder_'+ i +'" /></p>');  

                        i++;

            }

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="number" name="ref" id="ref" onchange="add_input();">

<div id="the_list"></div>

edited Nov 22 at 6:30

answered Nov 22 at 6:09

Priyanshi Srivastava

17510

edited Nov 22 at 6:30

answered Nov 22 at 6:09

Priyanshi Srivastava

17510

answered Nov 22 at 6:09

Priyanshi Srivastava

17510

answered Nov 22 at 6:09

Priyanshi Srivastava

17510

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Qfyilyi