チェックボックス新しい行を追加するときの動的jquery

Question

jqueryとphpを使用したチェックボックスに問題があります。私は数時間の行を追加していますが、フォーム上のOvertimeチェックボックスを追加したいのですが、jqueryを使用してデータを新しい行に追加して、チェックボックスを追加してください。私のフォームデータは以下の通りです。

チェックボックスをオンにしたい場合はチェックボックスをオンにし、チェックされていない場合は0をチェックします。

フィールドは、私が間違っているのかに付与することができる任意の助けてくれてありがとう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それは素晴らしいソリューションです、ありがとうございました。私は今それを理解するためにそれをすべて通らなければなりません。 ありがとう