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

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

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 '18 at 7:22

jnuK

1,5781626

asked Nov 22 '18 at 5:49

Alain Briez

Do you want to delete the previous div on the creation of next div?

– the_ultimate_developer
Nov 22 '18 at 5:59

Use appendChild instead innerHtml.

– Shashidhara
Nov 22 '18 at 6:00

1

Possible duplicate of stackoverflow.com/questions/17650776/…

– DevProf
Nov 22 '18 at 6:04

Read this MDN-appendChild

– Suman Kundu
Nov 22 '18 at 6:09

add a comment |

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 '18 at 7:22

jnuK

1,5781626

asked Nov 22 '18 at 5:49

Alain Briez

Do you want to delete the previous div on the creation of next div?

– the_ultimate_developer
Nov 22 '18 at 5:59

Use appendChild instead innerHtml.

– Shashidhara
Nov 22 '18 at 6:00

1

Possible duplicate of stackoverflow.com/questions/17650776/…

– DevProf
Nov 22 '18 at 6:04

Read this MDN-appendChild

– Suman Kundu
Nov 22 '18 at 6:09

add a comment |

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 '18 at 7:22

jnuK

1,5781626

asked Nov 22 '18 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 '18 at 7:22

jnuK

1,5781626

asked Nov 22 '18 at 5:49

Alain Briez

edited Nov 22 '18 at 7:22

jnuK

1,5781626

asked Nov 22 '18 at 5:49

Alain Briez

edited Nov 22 '18 at 7:22

jnuK

1,5781626

edited Nov 22 '18 at 7:22

jnuK

1,5781626

edited Nov 22 '18 at 7:22

jnuK

1,5781626

asked Nov 22 '18 at 5:49

Alain Briez

asked Nov 22 '18 at 5:49

Alain Briez

asked Nov 22 '18 at 5:49

Alain Briez

Do you want to delete the previous div on the creation of next div?

– the_ultimate_developer
Nov 22 '18 at 5:59

Use appendChild instead innerHtml.

– Shashidhara
Nov 22 '18 at 6:00

1

Possible duplicate of stackoverflow.com/questions/17650776/…

– DevProf
Nov 22 '18 at 6:04

Read this MDN-appendChild

– Suman Kundu
Nov 22 '18 at 6:09

add a comment |

Do you want to delete the previous div on the creation of next div?

– the_ultimate_developer
Nov 22 '18 at 5:59

Use appendChild instead innerHtml.

– Shashidhara
Nov 22 '18 at 6:00

1

Possible duplicate of stackoverflow.com/questions/17650776/…

– DevProf
Nov 22 '18 at 6:04

Read this MDN-appendChild

– Suman Kundu
Nov 22 '18 at 6:09

Do you want to delete the previous div on the creation of next div?

– the_ultimate_developer
Nov 22 '18 at 5:59

Use appendChild instead innerHtml.

– Shashidhara
Nov 22 '18 at 6:00

Possible duplicate of stackoverflow.com/questions/17650776/…

– DevProf
Nov 22 '18 at 6:04

Read this MDN-appendChild

– Suman Kundu
Nov 22 '18 at 6:09

add a comment |

5 Answers
5

active

oldest

votes

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 '18 at 6:06

Ismail Rubad

7941722

add a comment |

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 '18 at 6:11

Yong Quan

3,0612928

add a comment |

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 '18 at 6:13

Sajjad Ali

224210

add a comment |

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 '18 at 6:13

Shashidhara

482412

add a comment |

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 '18 at 6:30

answered Nov 22 '18 at 6:09

the_ultimate_developer

1,047823

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',
autoActivateHeartbeat: false,
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

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 '18 at 6:06

Ismail Rubad

7941722

add a comment |

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 '18 at 6:06

Ismail Rubad

7941722

add a comment |

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 '18 at 6:06

Ismail Rubad

7941722

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 '18 at 6:06

Ismail Rubad

7941722

answered Nov 22 '18 at 6:06

Ismail Rubad

7941722

answered Nov 22 '18 at 6:06

Ismail Rubad

7941722

answered Nov 22 '18 at 6:06

Ismail Rubad

7941722

add a comment |

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 '18 at 6:11

Yong Quan

3,0612928

add a comment |

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 '18 at 6:11

Yong Quan

3,0612928

add a comment |

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 '18 at 6:11

Yong Quan

3,0612928

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 '18 at 6:11

Yong Quan

3,0612928

answered Nov 22 '18 at 6:11

Yong Quan

3,0612928

answered Nov 22 '18 at 6:11

Yong Quan

3,0612928

answered Nov 22 '18 at 6:11

Yong Quan

3,0612928

add a comment |

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 '18 at 6:13

Sajjad Ali

224210

add a comment |

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 '18 at 6:13

Sajjad Ali

224210

add a comment |

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 '18 at 6:13

Sajjad Ali

224210

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 '18 at 6:13

Sajjad Ali

224210

answered Nov 22 '18 at 6:13

Sajjad Ali

224210

answered Nov 22 '18 at 6:13

Sajjad Ali

224210

answered Nov 22 '18 at 6:13

Sajjad Ali

224210

add a comment |

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 '18 at 6:13

Shashidhara

482412

add a comment |

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 '18 at 6:13

Shashidhara

482412

add a comment |

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 '18 at 6:13

Shashidhara

482412

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 '18 at 6:13

Shashidhara

482412

answered Nov 22 '18 at 6:13

Shashidhara

482412

answered Nov 22 '18 at 6:13

Shashidhara

482412

answered Nov 22 '18 at 6:13

Shashidhara

482412

add a comment |

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 '18 at 6:30

answered Nov 22 '18 at 6:09

the_ultimate_developer

1,047823

add a comment |

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 '18 at 6:30

answered Nov 22 '18 at 6:09

the_ultimate_developer

1,047823

add a comment |

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 '18 at 6:30

answered Nov 22 '18 at 6:09

the_ultimate_developer

1,047823

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 '18 at 6:30

answered Nov 22 '18 at 6:09

the_ultimate_developer

1,047823

edited Nov 22 '18 at 6:30

answered Nov 22 '18 at 6:09

the_ultimate_developer

1,047823

answered Nov 22 '18 at 6:09

the_ultimate_developer

1,047823

answered Nov 22 '18 at 6:09

the_ultimate_developer

1,047823

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.

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

搜尋此網誌

Agfdhyk