доброе время суток.
задача:
есть форма. на этой форме есть поле с телефоном. есть так же кнопочка добавить.
требуется при нажатии на кнопочку добавлять еще 1 поле с телефонами.
максимальное число полей с телефонами 3.
вопрос - как это все можно реализовать на jquery?
вариант есть такой скрыть все это дело display:none и при нажатии просто менять свойство на видимое
так же можно сделать через клонирование.
буду признателен любой помощи.
пример html верстки:
<div id="ph">
<div class="form_label" >Телефон*</div>
<div class="form_input" >
<select class="select_border" id="phone_tip" name="phone_tip">
<option value="0">1Городской</option>
<option value="1">Сотовый</option>
</select>
<input maxlength="2" type="text" class="select_border" id="gor_sot" name="gor_sot" value=" 8" disabled="disabled" />
<input maxlength="3" type="text" class="select_border" id="phone_kod" name="phone_kod" />
<input maxlength="9" type="text" class="select_border" id="phone_nomer" name="phone_nomer" />
<input id="ind" style="display: none"></input>
</div>
<div class="phone_add_change">
<img src="images/phone_add.png" id="phone_add" name="phone_add" alt="" />
</div>
<div class="form_input_msg" id="err_phone">
<div class="msg_tip" style="display:block">
<div class="tip_l" id="err_phone_tip_l"></div>
<div class="tip_c" id="err_phone_tip_c">Только цифры</div>
<div class="tip_r" id="err_phone_tip_r"></div>
<img src="images/check.png" alt="" />
</div>
</div>
</div>
<div id="ph2" style="display: none">
<div class="form_label" id="phone_label2" style=""> </div>
<div class="form_input" id="phone_input2" style="">
<select class="select_border" id="phone_tip2" name="phone_tip2">
<option value="0">2Городской</option>
<option value="1">Сотовый</option>
</select>
<input maxlength="2" type="text" class="select_border" id="gor_sot2" name="gor_sot2" value=" 8" disabled="disabled" />
<input maxlength="3" type="text" class="select_border" id="phone_kod2" name="phone_kod2" />
<input maxlength="9" type="text" class="select_border" id="phone_nomer2" name="phone_nomer2" />
</div>
<div class="phone_add_change" id="phone_add_change2">
<img src="images/phone_del.png" id="phone_del2" name="phone_del2" alt="" />
</div>
<div class="form_input_msg" id="err_phone2" style="">
<div class="msg_tip">
<div class="tip_err_l" id="err_icq_tip_l"></div>
<div class="tip_err_c" id="err_icq_tip_c">Только цифры</div>
<div class="tip_err_r" id="err_icq_tip_r"></div>
<img src="images/check.png" alt="" />
</div>
</div>
</div>
<div id="ph3" style="display: none;">
<div class="form_label" id="phone_label3" style=""> </div>
<div class="form_input" id="phone_input3" style="">
<select class="select_border" id="phone_tip3" name="phone_tip3">
<option value="0">3Городской</option>
<option value="1">Сотовый</option>
</select>
<input maxlength="2" type="text" class="select_border" id="gor_sot3" name="gor_sot3" value=" 8" disabled="disabled" />
<input maxlength="3" type="text" class="select_border" id="phone_kod3" name="phone_kod3" />
<input maxlength="9" type="text" class="select_border" id="phone_nomer3" name="phone_nomer3" />
</div>
<div class="phone_add_change" id="phone_add_change3" style="" onMouseOver="phone_add_change('phone_add3','over_del')" onMouseOut="phone_add_change('phone_add3','out_del')">
<img src="images/phone_del.png" id="phone_del3" name="phone_del3" alt="" onclick='phone_del_number("phone_label3","phone_input3","phone_add_change3","err_phone3","phone_tip3","phone_kod3","phone_nomer3");' />
</div>
<div class="form_input_msg" id="err_phone3" style="">
<div class="msg_tip">
<div class="tip_err_l" id="err_icq_tip_l"></div>
<div class="tip_err_c" id="err_icq_tip_c">Только цифры</div>
<div class="tip_err_r" id="err_icq_tip_r"></div>
<img src="images/check.png" alt="" />
</div>
</div>
</div>