通过点击事件添加文本框

通过js为表单添加地址

表单

<form action="register" method="post" enctype="multipart/form-data"> 用户名：<input type="text" name="name"/><br> 密码：<input type="text" name="password"/><br> 性别：<input type="radio" name="sex" value="男"/>男 <input type="radio" name="sex" value="女"/>女<br> 兴趣：<input type="checkbox" name="hobby" value="运动"/>运动 <input type="checkbox" name="hobby" value="唱歌"/>唱歌 <input type="checkbox" name="hobby" value="跳舞"/>跳舞 <input type="checkbox" name="hobby" value="其它"/>其它<br> 生日<input type="date" name="birthday"/><br> 头像<input type="file" name="head"/><br><div id="f_add"> <input type="button" value="添加地址" id="address" /></div> 权限：<input type="checkbox" name="roleList[0].rolePower" value="普通用户"/>普通用户 <input type="checkbox" name="roleList[1].rolePower" value="管理员"/>管理员 <%-- <input type="text" name="addr"/><br>--%> <input type="submit" value ="确定"/> <input type="reset" value="重置"/> </form>

通过该js，可以为表单添加多个点击事件

window.onload = function () { var address=document.getElementById("address"); var i=0; address.onclick = function () { var f_add = document.getElementById("f_add"); var input1 = document.createElement("input"); input1.type = "text"; input1.name = "addressList["+i+"].type"; input1.placeholder="请输入地类型，如：家/公司"; f_add.appendChild(input1); var newline= document.createElement("br"); f_add.appendChild(newline); var input2 = document.createElement("input"); input2.type = "text"; input2.name = "addressList["+i+"].addr"; input2.placeholder="请输入详细地址"; f_add.appendChild(input2); // var newline= document.createElement("br"); f_add.appendChild(newline); i=i+1; } }

通过该js可以为表单添加单个地址

window.onload = function () { var addButton = document.getElementById('address'); var i=0; addButton.onclick = function () { var f_add = document.getElementById("f_add"); var aDiv = document.createElement('div'); aDiv.name = "addressLis"; aDiv.innerHTML = '类型：<input type="text" name="addressList[0].type"/><br>详细地址：<input type="text" name="addressList[0].addr"/><br>'; f_add.appendChild(aDiv); i=i+1; } }; }

效果如下： 点击前： 点击几次后：