1. 首頁
  2. 問答
  3. n次動態添加表單元素集

n次動態添加表單元素集

2010-07-01 21 views
0

我正在研究一個讓用戶輸入餐廳開放時間的應用程序。我有這樣的表單代碼設置：n次動態添加表單元素集

<div class="hourswrapper"> 
      Days: 
      <input type="checkbox" name="day1[]" value="1" />M 
      <input type="checkbox" name="day1[]" value="2" />Tu 
      <input type="checkbox" name="day1[]" value="3" />W 
      <input type="checkbox" name="day1[]" value="4" />Th 
      <input type="checkbox" name="day1[]" value="5" />F 
      <input type="checkbox" name="day1[]" value="6" />Sa 
      <input type="checkbox" name="day1[]" value="7" />Su 
      <br /> 
      Opening Time: 
      <select name="starthour1"> 
       <option value="12">12</option> 
       <option value="01">1</option> 
       <option value="02">2</option> 
       <option value="03">3</option> 
       <option value="04">4</option> 
       <option value="05">5</option> 
       <option value="06">6</option> 
       <option value="07">7</option> 
       <option value="08">8</option> 
       <option value="09">9</option> 
       <option value="10">10</option> 
       <option value="11">11</option> 
      </select> : 
      <select name="startminute1"> 
       <option value="00">00</option> 
       <option value="15">15</option> 
       <option value="30">30</option> 
       <option value="45">45</option> 
       <option value="59">59</option> 
      </select> 
      <select name="startwhen1"> 
       <option value="am">am</option> 
       <option value="pm">pm</option> 
      </select><br /> 
      Closing Time: 
      <select name="endhour1"> 
       <option value="12">12</option> 
       <option value="01">1</option> 
       <option value="02">2</option> 
       <option value="03">3</option> 
       <option value="04">4</option> 
       <option value="05">5</option> 
       <option value="06">6</option> 
       <option value="07">7</option> 
       <option value="08">8</option> 
       <option value="09">9</option> 
       <option value="10">10</option> 
       <option value="11">11</option> 
      </select> : 
      <select name="endminute1"> 
       <option value="00">00</option> 
       <option value="15">15</option> 
       <option value="30">30</option> 
       <option value="45">45</option> 
       <option value="59">59</option> 
      </select> 
      <select name="endwhen1"> 
       <option value="am">am</option> 
       <option value="pm">pm</option> 
      </select><br /> 
      <input type="checkbox" name="24hours[]" value="yes" />Open 24 Hours 
     </div>

所以基本上人選擇一組小時，並標記哪些日子適用於。當然也可能有多組小時數（例如，如果一家餐廳每天開放12-2個，而另一個則是12-5個）。我希望有一個「添加更多小時」按鈕，可以在按下時複製相同的代碼，但是很多時候都是必需的。

這是什麼最好的方法呢？你如何動態添加一個表單元素而不需要在開始時隱藏它？我如何爲每組小時數輸入設置不同的數字名稱，然後知道有多少訪問（使用PHP post）？我假設我需要一個JavaScript函數來跟蹤已添加的數量。

或者，我願意提供關於如何以不同方式呈現小時輸入/更好的建議，也許這種方式不需要動態創建表單元素。我想限制用戶的輸入，所以我不必擔心解析奇怪的條目，這就是爲什麼我不想每天都只有一個文本輸入框。

謝謝。

來源

2010-07-01 vee

+0

任何人都可以幫忙嗎？ – vee 2010-07-01 18:45:06

回答

0

，所以最好使用JavaScript/jQuery動態添加新的元素，然後使用的foreach在你的PHP腳本來處理所有的投入？

希望這會有所幫助。

Y.J.

來源

2010-07-01 20:38:05

0

下面是基於該複選框被選中上覆制輸入小時的快速小例子。每個小時div獲得其自己的唯一ID（請參見下面的代碼的attr('id',hrsDivID)部分）。模仿這個來重命名你的輸入/選擇。有關更多信息，請參見http://jquery.com/和http://api.jquery.com/。

<head> 
    <script type="text/javascript" src="/shared/javascript/jquery.js"></script> 
</head> 
<div id="hours" style='display:none'> 
    Opening Time: 
    <select name="starthour1"> 
     <option value="12">12</option> 
     <option value="01">1</option> 
     <option value="02">2</option> 
     <option value="03">3</option> 
     <option value="04">4</option> 
     <option value="05">5</option> 
     <option value="06">6</option> 
     <option value="07">7</option> 
     <option value="08">8</option> 
     <option value="09">9</option> 
     <option value="10">10</option> 
     <option value="11">11</option> 
    </select> : 
    <select name="startminute1"> 
     <option value="00">00</option> 
     <option value="15">15</option> 
     <option value="30">30</option> 
     <option value="45">45</option> 
     <option value="59">59</option> 
    </select> 
    <select name="startwhen1"> 
     <option value="am">am</option> 
     <option value="pm">pm</option> 
    </select><br /> 
    Closing Time: 
    <select name="endhour1"> 
     <option value="12">12</option> 
     <option value="01">1</option> 
     <option value="02">2</option> 
     <option value="03">3</option> 
     <option value="04">4</option> 
     <option value="05">5</option> 
     <option value="06">6</option> 
     <option value="07">7</option> 
     <option value="08">8</option> 
     <option value="09">9</option> 
     <option value="10">10</option> 
     <option value="11">11</option> 
    </select> : 
    <select name="endminute1"> 
     <option value="00">00</option> 
     <option value="15">15</option> 
     <option value="30">30</option> 
     <option value="45">45</option> 
     <option value="59">59</option> 
    </select> 
    <select name="endwhen1"> 
     <option value="am">am</option> 
     <option value="pm">pm</option> 
    </select><br /> 
    <input type="checkbox" name="24hours[]" value="yes" />Open 24 Hours 
</div> 
Days: 
<div id='day1'> 
      <input type="checkbox" name="day1[]" value="1" onClick="addHours('day1');" >M 
</div> 
<div id='day2'> 
      <input type="checkbox" name="day1[]" value="2" onClick="addHours('day2');" />Tu 
</div> 
<div id='day3'> 
      <input type="checkbox" name="day1[]" value="3" onClick="addHours('day3');" />W 
</div> 
<div id='day4'> 
      <input type="checkbox" name="day1[]" value="4" onClick="addHours('day4');" />Th 
</div> 
<div id='day5'> 
      <input type="checkbox" name="day1[]" value="5" onClick="addHours('day5');" />F 
</div> 
<div id='day6'> 
      <input type="checkbox" name="day1[]" value="6" onClick="addHours('day6');"/>Sa 
</div> 
<div id='day7'> 
      <input type="checkbox" name="day1[]" value="7" onClick="addHours('day7');"/>Su 
</div> 
<script> 
function addHours(divID){ 
    var d = document.getElementById(divID); 
    var hrsDivID = divID+'_hours_div'; 
    $('#hours').clone().attr('id',hrsDivID).css('display','').appendTo(d); 
    return false; 
} 
</script>

來源

2010-07-01 20:45:08 stormdrain

相關問題

 相關問題