私のウェブサイトには、ドロップダウン式の予約フォームがあります。私のフォームでは、クリックするボタンを追加して、別のフォームが表示されるようにしたいと考えていました。
私はjsfiddleを使用してコードを作成しました.これは私が持っているコードです:
http://jsfiddle.net/Q5RW6/embedded/
HTMLコード
<div id=nav>
<ul>
<ul>
<label id=form1-control>Address</label>
</ul>
<ul>
<label id=form2-control>Airport</label>
</ul>
<ul>
<label id=form3-control>Landmark/Hotel</label>
</ul>
</ul>
</div>
<div id=forms>
<div id=form1>
<form method=post action="">
<label>Street Address:</label>
<input type=text name=name>
<tr>
<p>
<td class="width:110px; height:15px">
<label>City:
<input type=text id=city name=city>
</td>
<td class="width:70px; height:15px">
<p>
<label>State:
<input type="text" id="state" name="state">
</td>
<td>
<p>
<label>Zip Code:
<input type="text" id="zip" name="zip">
</p>
</td>
</tr>
<tr>
</td>
</tr>
</table>
</p>
<p>
<label>Date <span class=""> * </span>
</label>
<input type="text" id="calendar" name="calendar" style="height:25px" />
</p>
<p>
<label>Time</label>
<select id="time" name="time" style="height:25px; width:55px">
<option>--</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select id="time2" name="time2" style="height:25px; width:55px">
<option selected="">--</option>
<option>00</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
<option>32</option>
<option>33</option>
<option>34</option>
<option>35</option>
<option>36</option>
<option>37</option>
<option>38</option>
<option>39</option>
<option>40</option>
<option>41</option>
<option>42</option>
<option>43</option>
<option>44</option>
<option>45</option>
<option>46</option>
<option>47</option>
<option>48</option>
<option>49</option>
<option>50</option>
<option>51</option>
<option>52</option>
<option>53</option>
<option>54</option>
<option>55</option>
<option>56</option>
<option>57</option>
<option>58</option>
<option>59</option>
</select>
<select id="time3" name="time3" style="height:25px; width:55px">
<option selected="">--</option>
<option>AM</option>
<option>PM</option>
</select>
</p>
<p>
<table align="center">
<tr>
<td class="width:110px;">
<label style="font-size:13px">Passenger #: <span class='error'></span>
</label>
<td class="width30">
<input type="number" id="passengers" name="passengers" style="width:50px;margin:3px">
</td>
</td>
<td class="width:70px; height:15px">
<label style="font-size:13px">Luggage #:</label>
<td class="width30">
<input type="number" id="luggages" name="luggages" style="width:50px; margin:3px">
</td>
</td>
<td class="width:50px;" colspan="2">
<label style="font-size:13px">Car Seat:</label>
</td>
<td class="width30">
<input type="number" id="seat" name="seat" style="width:50px; margin:3px">
</td>
</tr>
<tr>
<td>
</tr>
</td>
</table>
</form>
</div>
<div id=form2>
<form method=post action="">
<td class="width:110px; height:15px">
<label style="font-size:13px">Airport Name: <span class='error'></span>
</label>
<td class="width30">
<input type="text" id="airport" name="airport" class="input85" style="width:110px; margin:10px" value="" />
</td>
</td>
<td class="width:70px">
<label style="font-size:13px">Airline/Code:</label>
<td class="width30">
<input type="text" id="airline" name="airline" class="input85" style="width:60px; margin:10px" value="" />
</td>
</td>
<td class="width:50px" colspan="2">
<label style="font-size:13px">Flight #:</label>
</td>
<td class="width:30">
<input type="text" id="fnumber" name="fnumber" class="input85" style="width:40px;margin:10px" value="" />
</td>
</tr>
<tr>
</td>
</tr>
</table>
<table align="center">
<tr>
<td class="width:110px;">
<label style="font-size:13px">Passenger #: <span class='error'></span>
</label>
<td class="width30">
<input type="number" id="passengers" name="passengers" style="width:50px;margin:3px">
</td>
</td>
<td class="width:70px;">
<label style="font-size:13px">Luggage #:</label>
<td class="width30">
<input type="number" id="luggages" name="luggages" style="width:50px; margin:3px">
</td>
</td>
<td class="width:50px;" colspan="2">
<label style="font-size:13px">Car Seat:</label>
</td>
<td class="width30">
<input type="number" id="seat" name="seat" style="width:50px; margin:3px">
</td>
</tr>
<tr>
<td>
</tr>
</td>
</table>
</form>
</div>
<div id=form3>
<form method=post action="">
<label>Full Address:</label>
<input type=text name=name style=width:280px>
</form>
</div>
</div>
質問 すべてが機能するように、コードを自分の Web サイトに正しく転送するにはどうすればよいですか?
