为多个输入添加(+)更多按钮

时间:2013-04-05 16:58:49

标签: html button input add

我有一个多输入表单,我想添加第一个输入可见而其他隐藏的功能,当点击添加更多按钮时,它会显示下一个输入,最多8个。我想保持身份证明的方式。 我该怎么办?谢谢。

<label for="stop1">Stop 1 :</label>
 <input type="text" id="stop1" name="stop1" /><br />
<label for="stop2">Stop 2 :</label>
 <input type="text" id="stop2" name="stop2" /><br />
<label for="stop3">Stop 3 :</label>
 <input type="text" id="stop3" name="stop3" /><br />
<label for="stop4">Stop 4 :</label>
 <input type="text" id="stop4" name="stop4" /><br />
<label for="stop4">Stop 5 :</label>
 <input type="text" id="stop5" name="stop5" /><br />
<label for="stop6">Stop 6 :</label>
 <input type="text" id="stop6" name="stop6" /><br />
<label for="stop7">Stop 7 :</label>
 <input type="text" id="stop7" name="stop7" /><br />
<label for="stop8">Stop 8 :</label>
 <input type="text" id="stop8" name="stop8" /><br />

再次感谢你。

1 个答案:

答案 0 :(得分:0)

您可以尝试这样的事情:

    <script type="text/javascript">

    int countInput = 1;

    function showInput(){
        document.getElementById("stop"+(countInput +1)).style.display = 'block';
    }


function onLoadFunction(){
    var inputs = document.getElementsByTagName("input");

    for (var i = 0; i < inputs.length; i++) { 
        var id = inputs[i].getAttribute("id"); 
        if ( id != "stop1" ) { 
            document.getElementById("stop"+countInput).style.display = 'block';
        }
    countInput++;
    }

    countInput = 1;

}
</script>



<label for="stop1">Stop 1 :</label>
 <input type="text" id="stop1" name="stop1" /><br />
<label for="stop2">Stop 2 :</label>
 <input type="text" id="stop2" name="stop2" /><br />
<label for="stop3">Stop 3 :</label>
 <input type="text" id="stop3" name="stop3" /><br />
<label for="stop4">Stop 4 :</label>
 <input type="text" id="stop4" name="stop4" /><br />
<label for="stop4">Stop 5 :</label>
 <input type="text" id="stop5" name="stop5" /><br />
<label for="stop6">Stop 6 :</label>
 <input type="text" id="stop6" name="stop6" /><br />
<label for="stop7">Stop 7 :</label>
 <input type="text" id="stop7" name="stop7" /><br />
<label for="stop8">Stop 8 :</label>
 <input type="text" id="stop8" name="stop8" /><br />

<button type="button" onclick="showInput"></button>

只需从您网页的onload atribbute调用onLoadFunction即可,