Javascript?:How to dynamically add text inputs/for

2019-05-01 20:42发布

I am building a web form where there is a list of inputs. So far, so good.

However, how can I add a link/button to add say another 5 fields to the list. eg:

<input>
<input>
<input>
<input>

<a href="" onclick="">Add 10 more fields</a>

I have looked through many similar q's on this site, however none seem to describe how to add multiple fields.

Thanks for any help,

Harley

EDIT: Thanks all for help, looks like jquery append is the way to go. However I appreciate the alternative that does not use jquery.

7条回答
甜甜的少女心
2楼-- · 2019-05-01 21:38

<script type='text/javascript'>
    var counter = 1;
    var limit = 3;
    function addInput(divName) {

        var newdiv = document.createElement('div');
        newdiv.innerHTML = "<br><input type='text' name='myInputs" + counter + "'> <input type='text' name='myInputs" + counter + "'> <select><option value='88888'>888888888</option></select>";
        document.getElementById(divName).appendChild(newdiv);
        counter++;
    }
</script>

<form method="POST">
    <div id="dynamicInput">

        <input type="button" value="Add another text input" onclick="addInput('dynamicInput');">
</form>

查看更多
登录 后发表回答