JQuery клон, чтобы добавить больше полей

Question

JQuery клон, чтобы добавить больше полей

$(function () {
$("#addButton").on("click", function () {

var newRow = $(".addrows").first().clone().addClass("newAdded");                        newRow.appendTo("#TextBoxesGroup");

});<form enctype="application/x-www-form-urlencoded" action="" method="post">

<table id="TextBoxesGroup" style="width:auto;margin:0 auto;" >
<tr class="addrows"><td  class="required">
Start Time:<br/>
<input type="text" name="StartTime[]" id="StartTime" value="" class="time" size="5">
<button name="starttimenow" id="starttimenow" type="button" onclick="var currentDate = new Date(); var hours = currentDate.getHours(); var minutes = currentDate.getMinutes(); if(hours < 10) { hours = &#39;0&#39; + hours; } if(minutes < 10) { minutes = &#39;0&#39; + minutes; } $(&#39;#StartTime&#39;).val(hours + &#39;:&#39; + minutes);">Now</button>
</td>
<td  class='required' colspan="2">Start Date:<br/>
<input type="text" name="StartDate[]" id="StartDate" value="" class="date" autocomplete="off" size="6">
<button name="startdatetoday" id="startdatetoday" type="button" onclick="var currentDate = new Date(); var month=currentDate.getMonth()+1; if(month < 10) { month = &#39;0&#39; + month; } var day = currentDate.getDate(); if(day < 10) { day = &#39;0&#39; + day; } var year = currentDate.getFullYear(); $(&#39;#StartDate&#39;).val(day + &#39;/&#39; + month + &#39;/&#39; + year)">Today</button>
</td>
<td class='required' >End Time:<br/>
<input type="text" name="EndTime[]" id="EndTime" value="" class="time" size="5">
<button name="endtimenow" id="endtimenow" type="button" onclick="var currentDate = new Date(); var hours = currentDate.getHours(); var minutes = currentDate.getMinutes(); if(hours < 10) { hours = &#39;0&#39; + hours; } if(minutes < 10) { minutes = &#39;0&#39; + minutes; } $(&#39;#EndTime&#39;).val(hours + &#39;:&#39; + minutes);">Now</button>
</td>
<td class='required' colspan="2" >End Date:<br/>
<input type="text" name="EndDate[]" id="EndDate" value="" class="date" autocomplete="off" size="6">
<button name="enddatetoday" id="enddatetoday" type="button" onclick="var currentDate = new Date(); var month=currentDate.getMonth()+1; if(month < 10) { month = &#39;0&#39; + month; } var day = currentDate.getDate(); if(day < 10) { day = &#39;0&#39; + day; } var year = currentDate.getFullYear(); $(&#39;#EndDate&#39;).val(day + &#39;/&#39; + month + &#39;/&#39; + year)">Today</button>
</td></tr>
</table>
<table>
<tr>
<td>
<input type="button" id="addButton" value="+" />
</td>

</tr>
<tr><td colspan="18" align="center">
<input type="submit" name="Submit" id="Submit" value="Submit" class="formsubmit">
</td></tr>
</table>
</form>

Выше приведен рабочий пример из моей формы. Мне нужно создать количество полей, когда я нажимаю кнопку +. Новые поля должны быть пустыми. Также, когда я нажимаю кнопку «сейчас / сегодня», мне нужно отображать дату и время в точных полях, отличных от первого поля.

Пожалуйста, помогите мне.
Спасибо!

1

clone jquery php

Решение

Другие решения

использование $(this).prev();

<button name="starttimenow" id="starttimenow" type="button" onclick="var currentDate = new Date(); var hours = currentDate.getHours(); var minutes = currentDate.getMinutes(); if(hours < 10) { hours = &#39;0&#39; + hours; } if(minutes < 10) { minutes = &#39;0&#39; + minutes; } $(this).prev().val(hours + &#39;:&#39; + minutes);">Now</button>

http://jsfiddle.net/XeELs/425/

1

$("#addButton").on("click", function () {
var newRow = $(".addrows").first().clone().addClass("newAdded");
newRow.appendTo("#TextBoxesGroup");
$('.newAdded:last-child input').val('');
});

0

Источник

Accepted Answer

Очистить клонированные поля ввода с помощью val(''):

$("#addButton").on("click", function () {
var newRow = $(".addrows").first().clone().addClass("newAdded");
newRow.find(':input').val('');
newRow.appendTo("#TextBoxesGroup");
});

И для ссылки на правильные поля строки используйте классы вместо идентификаторов и prev способ найти подходящий элемент:

<input type="text" name="StartTime[]" class="StartTime" value="" class="time" size="5">

JS:

$(this).prev('.StartTime').val(hours + &#39;:&#39; + minutes);

Демо-версия: http://jsfiddle.net/XeELs/424/

1