2013-04-05 55 views
-2

我有一個多輸入的形式,我想添加的功能,其中第一個輸入是可見的,其他隱藏和添加更多按鈕單擊時,它會顯示接下來的輸入爲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 /> 

再次感謝您。

+0

您可以使用JavaScript。我會建議使用jquery根據需要添加額外的輸入元素。 – Jrod 2013-04-05 17:06:47

+0

我環顧四周,但還沒有嘗試過任何東西,我是新來的JavaScript和jQuery。對不起 – im2shae 2013-04-05 17:23:32

回答

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,它可能工作

+0

嗨Jeyvison,我只是試過了,它不工作。我可能做錯了什麼? – im2shae 2013-04-05 21:06:20

+0

嘿傢伙之前,你完全關閉這一點,我一直在試圖用jQuery完成這一點。有人會給它看看,讓我知道它是否會工作?這裏是例子:http://jsfiddle.net/kngMg/ – im2shae 2013-04-05 22:11:22

+0

@ im2shae我可以做一個下拉列表? – DogFace 2015-03-25 17:44:50