複選框添加一個新行時動態jquery

我有使用jquery和php複選框的問題。我添加幾小時的行，我想添加一個超時複選框，它是在窗體上，但是當我使用jquery將數據添加到新行以允許添加多行以添加到數據庫後，我無法獲得它添加複選框我的表單數據如下。複選框添加一個新行時動態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>

感謝你能在什麼我做錯了給予任何幫助。

謝謝

來源

2016-08-23 Robert Grain

您的代碼中存在一些錯誤。

我修正了它們，所以最終的代碼在下面的代碼片段中。

爲了區分每個字段的名稱我用下面的標準：

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')' ">

來源

2016-08-23 13:05:09 gaetanoM

你好GaetanoM謝謝你看我的代碼。儘管加班時間似乎還沒有完成，但我已經在主頁中對其進行了修改。另外由於某種原因，我在第一行的日期是2016年8月23日，當它傳播到一條新線時，它顯示2016年8月23日。 –

你好gaetanoM非常感謝你，我不會得到我自己。我現在將去了解.closest，然後將div保存到數據庫中，我需要從更改中更改現有代碼上的任何內容。我假設它仍然創建相同的名稱來填充數據庫。我還想將複選框插入數據庫值，這是否可能呢？非常感謝。 –

非常感謝你我一直試圖複選複選框的值爲0或1，具體取決於複選框是否被選中。我試圖在新的文本框中使用.val，但我無法完全正確地得到它 –

謝謝gaetanoM這是一個很好的解決方案。我現在必須經歷這一切才能理解它。謝謝

來源

2016-08-24 13:28:08

複選框添加一個新行時動態jquery

回答

相關問題