動的なJQUERY配列はいくつかのレコードで動作します

Question

StackOverflowの助けを借りて、フィールドを持つ1行のエントリを作成してから、各フィールドを配列に追加しますが、Hours SQL文は動作しません。最初の2レコードの空白のSQLエントリがあり、別のレコードで正しく動作しますが、間違っていることはわかりません。どんな助けでも大歓迎です。

<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" 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> 
    <tr> 



var rownumhours = 1; 

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() + '"> Show_Overtime: <input type="text" name="show_overtime_hours[' + rownumhours + ']" size="1" value="' + 
    (($(obj).closest('span.headings').find('[name="add_overtime_hours"]').is(':checked')) ? '1' : '0') + '"> 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); 

    $(obj).closest('span.headings').find('[name="add_start"]').val(""); 
    $(obj).closest('span.headings').find('[name="add_finish"]').val(""); 
    $(obj).closest('span.headings').find('[name="add_date"]').val(""); 
    $(obj).closest('span.headings').find('[name="show_overtime_hours"]').val(""); 
     $(obj).closest('span.headings').find('[name="add_overtime_hours"]').removeAttr('checked'); 
} 
function removeRow(rnum) { 
    jQuery('#rownumhours' + rnum).remove(); 
} 

私はそれがしたいが、その後大きな問題があるように、それは正しくページに表示されているデータベースに正常に追加されませんです。

データベースに挿入するSQLをechoしました。次のように表示されます。

INSERT INTO hours(job_number,start_time,finish_time,date,overtime) 
     VALUES('904','','','','') 
INSERT INTO hours(job_number,start_time,finish_time,date,overtime) 
     VALUES('904','','','','') 
INSERT INTO hours(job_number,start_time,finish_time,date,overtime) 
     VALUES('904','10:10','11:11','2017-01-03','') // 

 if (
       !empty($_POST['add_start']) && !empty($_POST['add_finish']) && !empty($_POST['add_date']) && !empty($_POST['show_overtime_hours'])&& 
       is_array($_POST['add_start']) && is_array($_POST['add_finish']) && is_array($_POST['add_date']) && is_array($_POST['show_overtime_hours'])&& 
       count($_POST['show_overtime_hours']) && count($_POST['add_finish']) && count($_POST['add_date']) === count($_POST['add_start']) 
       ) { 
       $add_start_array = $_POST['add_start']; 
       $add_finish_array = $_POST['add_finish']; 
       $add_overtime_hours_array = $_POST['show_overtime_hours']; 
       $add_date_array =$_POST['add_date'];      
        for ($i = 0; $i < count($add_start_array); $i++) { 
         $add_start_values = $mysqli->real_escape_string($add_start_array[$i]); 
         $add_finish_values = $mysqli->real_escape_string($add_finish_array[$i]); 
         $add_date_values = $mysqli-> real_escape_string($add_date_array[$i]); 
         $add_overtime_hours_boolean = $mysqli-> real_escape_string($add_overtime_hours_array[$i]); 
         $sql_add_hours = "INSERT INTO hours(job_number,start_time,finish_time,date,overtime) VALUES('$increment_job_number','$add_start_values','$add_finish_values','$add_date_values','$add_overtime_hours_boolean')"; 

         $mysqli-> query($sql_add_hours); 
         // This next section is for debugging only 
         //echo ($add_date_values); 
         //echo ($add_start_values); 
         //echo ($add_finish_values); 
         echo ($sql_add_hours); 
         //echo ($add_overtime_hours_values); 

       } 

Answer 1

クイックフィックス

あなたが動的にフィールドの新しい行を追加する前にrownumhoursをインクリメント。

最速修正そこでフィールドの新しく追加された行が1、最大のインデックスを有するであろう0

var rownumhours = 0; 

にrownumhours値を変更しています。

また、最初の/デフォルトの行にnameタグに[]を追加します。

<input type="time" name="add_start[]" size="4"> <!-- this will have an index of 0 --> 
<!-- DO THE SAME WITH FIRST/DEFAULT SET OF FIELDS --> 

---

勧告

しかし、あなたが実際に行うことができますことは、インデックスの割り当てを気にしないことです。

ちょうどフィールドの特定の行に[]を置く：

<td colspan="3" align="left"> 
     <div id="hoursrow"> 
      <p> 
       <span class="text">Hours Labour :</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" size="1" maxlength="1" /> 
         </span> 
        </span> 
        <span class="text"> 
         <span class="hours"> 
          <input onclick="addhours(this, event);" type="button" value="Add Labour" /> 
         </span> 
        </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> 

その後rownumhoursを削除して、動的に追加入力フィールドのインデックスを割り当てない：

var hoursrow = '<p id="rownumhours' + rownumhours + '">Start Time: <input type="time" name="add_start[]" size="4" value="' + $(obj).closest('span.headings').find('[name="add_start"]').val() + '"> /*** JUST CONTINUE THE REST OF THE INPUT FIELDS ***/ 

Answer 2

[OK]を次のように、SQLの一部である、いくつかの検査を行った後、実際jQueryのから製造HTMLコンポーネントの最初の基である：

"Start Time:" 
<input type="time" name="add_start[2]" size="4" value="23:57"> 
"Finish Time:" 
<input type="time" name="add_finish[2]" size="4" value="22:57"> 
"Date:" 
<input type="date" name="add_date[2]" value="2017-01-13"> 
"Show_overtime:" 
<input type="text" name="show_overtime_hours[2]" size="1" value="0"> 
"Overtime:" 
<input type="checkbox" name="add_overtime_hours[2]" size="1" value="on"> 
<input type="button" value="Remove" onclick="removeRow(2)"> 

あなたがそこにいる...カウンター（rownumhours）は2から始まる。これらのアレイのためのPHPの部分でこのよう 、最初のエントリ：

$add_start_array = $_POST['add_start']; 
$add_finish_array = $_POST['add_finish']; 
$add_overtime_hours_array = $_POST['show_overtime_hours']; 
$add_date_array =$_POST['add_date']; 

また2インデックスで、しかし、あなたのループは、ゼロから始めると、位置についてしたがってエントリが空です。

のでrownumhoursは-1からjavascriptの一部で開始します。

var rownumhours = -1;

Answer 3

はのためのとてもありがとうございました手伝い。すみません、返信には数日かかりました。私はrownumhours ++をオフにして、[]を使って名前を変更して、自分自身でそれを行うのに十分な賢さは知らなかった。

Mysqlのセクションがうまく働いていたと私は唯一のは、ここから始めましょうエントリ

var rownumhours = 0; 

function addhours(obj, e) { 
    var hoursrow = '<p id="rownumhours' + rownumhours + '">Start Time: <input type="time" name="add_start[]" size="4" value="' + 
    $(obj).closest('span.headings').find('[name="add_start"]').val() + '"> Finish Time: <input type="time" name="add_finish[]" value="' + 
    $(obj).closest('span.headings').find('[name="add_finish"]').val() + '"> Date: <input type="date" name="add_date[]" value="' + 
    $(obj).closest('span.headings').find('[name="add_date"]').val() + '"> <input type="hidden" name="show_overtime_hours[]" size="1" value="' + 
    (($(obj).closest('span.headings').find('[name="add_overtime_hours"]').is(':checked')) ? '1' : '0') + '"> Overtime: <input type="checkbox" name="add_overtime_hours[]" 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); 
    rownumhours++; 

    $(obj).closest('span.headings').find('[name="add_start"]').val(""); 
    $(obj).closest('span.headings').find('[name="add_finish"]').val(""); 
    $(obj).closest('span.headings').find('[name="add_date"]').val(""); 
    $(obj).closest('span.headings').find('[name="show_overtime_hours"]').val(""); 
    $(obj).closest('span.headings').find('[name="add_overtime_hours"]').removeAttr('checked'); 
    } 
function removeRow(rnum) { 
    jQuery('#rownumhours' + rnum).remove(); 
    } 

</script>