Флажок Динамический jquery при добавлении новой строки

Question

У меня проблема с флажками с использованием jquery и php. Я добавляю строки часов, и я хочу добавить флажок Overtime, который находится в форме, но когда я использую jquery для добавления данных в новую строку, чтобы добавить несколько строк для добавления в базу данных после того, как я не могу ее получить установите флажок Мои данные формы, как показано ниже.

Я хочу добавить флажок (Проверено/не проверено), а также значение 0 не проверено и 1 если отмечено.

поле называется add_overtime_hours

<!-- this ext section is the Adding Hours on the jobsheet --> 
<script type="text/javascript"> 
var rownumhours = 0; 
function addhours(frm) { 
rownumhours ++; 
<!-- the next part creates the html to add dynamic fields into the Div hoursrow 
var hoursrow = '<p id="rownumhours'+rownumhours+'">Start Time: <input type="text" name="add_start[]" size="4" value="'+frm.add_start.value+'"> Finish Time: <input type="text" name="add_finish[]" value="'+frm.add_finish.value+'"> Date: <input type="text" name="add_date[]" value="'+frm.add_date.value+'"> Overtime: <input type="checkbox" name="add_overtime_hours[]" size="1" value="'+frm.add_overtime_hours.value+' "> <input type="button" value="Remove" onclick="removeRow('+rownumhours+');"></p>'; 
<!-- the next part looks at the partsrow div lower in the page and then appends the values to the row variable above --> 
jQuery('#hoursrow').append(hoursrow); 
frm.add_start.value = ''; 
frm.add_finish.value = ''; 
frm.add_overtime_hours.value = 'N'; 
frm.add_date.value = ''; 
} 

function removeRow(rnum) { 
    jQuery('#rownumhours'+rnum).remove(); 
} 
</script> 

<tr> 
<td colspan="3" align="left"> 
    <div id="hoursrow"> 
     <p> 
      <span class="text">Hours Labour :</span></span> 
     </p> 
     <p> 
      <span class="headings"><span class="text"><span class="hours">Start Time: 
      <input type="time" name="add_start" size="4" />Finish Time: 
      <input type="time" name="add_finish" size="4" />Date: 
      <input type="date" name="add_date" size="4" />OVT: 
      <input type="checkbox" name="add_overtime_hours" id="add_overtime_hours" Value="1" size="1" maxlength="1" /> 
      </span></span> 
      <span class="text"><span class="hours"> 
       <input onclick="addhours(this.form);" type="button" value="Add Labour" /> 
       </span></span> 
     </p> 
     <p class="headings"><span class="text"><span class="hours"> 
      <span class="info">(This row will not be saved unless you click on "Add Labour" first) </span></span></span> 
     </p> 
    </div> 
</td> 
<td width="7"></td> 
</tr> 
<tr> 
    <td>&nbsp;</td> 
</tr> 

спасибо за любую помощь, которая может быть предоставлена ​​на то, что я делаю неправильно.

спасибо

Answer 1

У вас есть некоторые ошибки в коде.

Я исправил их, поэтому окончательный код находится в следующем фрагменте.

Для того, чтобы различать имена каждого поля я использовал следующие критерии:

name="add_finish[1]" 
name="add_finish[2]" 
...... 

Конечно, каждое имя имеет другой префикс в соответствии с именем поля.

Таким образом, вы можете использовать имена, организованные на вашей стороне сервера.

var rownumhours = 0; 
 

 
function addhours(obj, e) { 
 
    rownumhours++; 
 
    var hoursrow = '<p id="rownumhours' + rownumhours + '">Start Time: <input type="time" name="add_start[' + rownumhours + ']" size="4" value="' + 
 
     $(obj).closest('span.headings').find('[name="add_start"]').val() + '"> Finish Time: <input type="time" name="add_finish[' + rownumhours + ']" value="' + 
 
     $(obj).closest('span.headings').find('[name="add_finish"]').val() + '"> Date: <input type="date" name="add_date[' + rownumhours + ']" value="' + 
 
     $(obj).closest('span.headings').find('[name="add_date"]').val() + '"> Overtime: <input type="checkbox" name="add_overtime_hours[' + rownumhours + ']" size="1" value="' + 
 
     $(obj).closest('span.headings').find('[name="add_overtime_hours"]').val() + '"' + 
 
     (($(obj).closest('span.headings').find('[name="add_overtime_hours"]').is(':checked')) ? 'checked' : '') + 
 
     ' "> <input type="button" value="Remove" onclick="removeRow(' + 
 
     rownumhours + ');"></p>'; 
 
    jQuery('#hoursrow').append(hoursrow); 
 
} 
 

 
function removeRow(rnum) { 
 
    jQuery('#rownumhours' + rnum).remove(); 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td colspan="3" align="left"> 
 
      <div id="hoursrow"> 
 
       <td>&nbsp;</td> 
 
       <p><span class="text">Hours Labour :</span></span></p> 
 

 
       <p> <span class="headings"><span class="text"><span class="hours">Start Time: 
 
      <input type="time" name="add_start" size="4"/> 
 
      Finish Time: 
 
      <input type="time" name="add_finish" size="4"/> 
 
      Date: 
 
      <input type="date" name="add_date" size="4"/> 
 
      OVT: 
 
      <input type="checkbox" name="add_overtime_hours" id="add_overtime_hours" Value="1" size="1" maxlength="1"/> 
 
      </span></span><span class="text"><span class="hours"> 
 
     <input onclick="addhours(this, event);" type="button" value="Add Labour"/> 
 
     </span></span></p> 
 

 
       <p class="headings"><span class="text"><span class="hours"> 
 
      <span class="info">(This row will not be saved unless you click on "Add Labour" first) </span></span></span> 
 
       </p> 
 
      </div> 
 
     </td> 
 
     <td width="7"></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Пример того, как вы можете получить все add_overtime_hours является:

$myboxes = $_POST['add_overtime_hours']; 
if(empty($myboxes)) { 
    echo("You didn't select any boxes."); 
} else { 
    $i = count($myboxes); 
    echo("You selected $i box(es): "); 
    for($j=0; $j < $i; $j++) { 
     echo($myboxes[$i] . " "); 
    } 
} 

 Show_Overtime: <input type="text" name="add_overtime_hours[]" size="1" value="' + (($(obj).closest('span.headings').find('[name="add_overtime_hours"]').is(':checked')) ? 'checked' : '1')' "> 

Answer 2

Спасибо gaetanoM Это отличное решение. Теперь я должен пройти все это, чтобы понять это. спасибо