【问题标题】:Dynamic JQUERY array works for some records动态 JQUERY 数组适用于某些记录
【发布时间】:2017-01-03 23:19:15
【问题描述】:

感谢 StackOverflow 的帮助,我已经创建了一个带有字段的单行条目,然后这会将每个字段添加到一个数组中,但是 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,它显示以下内容。

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','') //

Sql部分如下

        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);

                }

【问题讨论】:

  • 让我们从这里开始:#1 - 这是从 HTML 到 PHP 的直接“表单”提交吗?还是您使用的是 AJAX? #2 - 当你在你的 PHP 中var_dump($_POST) 时你会得到什么?
  • 此外,如果您停止尝试跟踪 $_POST 值中的索引,而只是将输入命名为 add_start[]add_finish[] 等. 带空括号。 PHP 会自动设置它们的索引。

标签: javascript php jquery mysql sql


【解决方案1】:

好的,经过一番检查,实际上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'];

也位于 2nd-index,但由于您的循环从零开始,因此该位置的条目为空。

所以从-1开始在javascript部分中的rownumhours

var rownumhours = -1;

【讨论】:

  • .. 或从0 开始rownumhours 并将rownumhours++ 作为addHours() 中的最后一条语句
【解决方案2】:

快速修复

在动态添加新的字段行之前增加rownumhours

最快的解决方法是将 rownumhours 值更改为 0

var rownumhours = 0;

因此,新添加的字段行的索引将为 1 及以上。

还将[] 添加到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 ***/

【讨论】:

    【解决方案3】:

    非常感谢大家的帮助。抱歉,过了几天才回复。我已经通过取消 rownumhours ++ 并使用 [] 来进行更改,以便自行处理命名,我不知道它足够聪明,可以自己完成。

    Mysql 部分运行良好,我也离开了 html 部分,因为我只想在条目的多个小时内使用不同的名称

     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>
    

    【讨论】:

      猜你喜欢
      • 2022-10-05
      • 1970-01-01
      • 1970-01-01
      • 2012-10-30
      • 2021-07-06
      • 1970-01-01
      • 1970-01-01
      • 2021-03-30
      • 1970-01-01
      相关资源
      最近更新 更多