使用onblur触发函数时无法传递多个表单变量到PHP的问题求助

问题根因 #

1. 你的AJAX配置里重复写了data字段：JS对象中重名属性会被后定义的覆盖，导致每次请求仅能传递最后一个data对应的参数，另一个参数直接丢失
2. 页面里的orderId隐藏域仅设置了name属性，没有设置id属性，你用$("#orderId")的ID选择器无法匹配到对应元素，拿不到orderId的值
3. 多个位置重复使用了相同的IDorder-availability-status，ID为全局唯一标识，重复ID会导致返回结果无法渲染到对应位置

修正方案 #

第一步：修改JS代码 #

将AJAX的data字段改为对象格式，把所有要传递的参数放在同一个data里：

// 失焦时传入当前触发元素，方便定位所属表单
function submitPrice(obj) {
  $("#loaderIcon").show();
  // 获取当前输入框所属表单里的orderId值
  const orderId = $(obj).closest('form').find('input[name="orderId"]').val();
  jQuery.ajax({
    url: "updatestatus.php",
    // 所有参数放在同一个data对象中
    data: {
      finalprice: $("#fprice").val(),
      orderId: orderId
    },
    type: "POST",
    success: function(data) {
      // 渲染到当前表单对应的状态提示位
      $(obj).closest('td').next().find('.status-msg').html(data);
      $("#loaderIcon").hide();
    },
    error: function() {}
  });
}

function submitReso(obj) {
  $("#loaderIcon").show();
  const orderId = $(obj).closest('form').find('input[name="orderId"]').val();
  jQuery.ajax({
    url: "updatestatus.php",
    data: {
      resolution: $("#reso").val(),
      orderId: orderId
    },
    type: "POST",
    success: function(data) {
      $(obj).closest('td').next().find('.status-msg').html(data);
      $("#loaderIcon").hide();
    },
    error: function() {}
  });
}

function submitState(obj) {
  $("#loaderIcon").show();
  const orderId = $(obj).closest('form').find('input[name="orderId"]').val();
  jQuery.ajax({
    url: "updatestatus.php",
    data: {
      status: $("#status").val(),
      orderId: orderId
    },
    type: "POST",
    success: function(data) {
      $(obj).closest('td').next().find('.status-msg').html(data);
      $("#loaderIcon").hide();
    },
    error: function() {}
  });
}

第二步：修改HTML代码 #

1. 给三个触发事件的元素加上this传参
2. 将原来重复的IDorder-availability-status改为classstatus-msg

<table class="table">
  <tbody class="table-body">
    <tr style="padding-top:15px">
      <td><strong>Current Order Status</strong></label>
      </td>
      <td>::</td>
      <td>
        <p><span class="statecolor badge badge-pill"><?php echo $row["status"];?></span></p>
      </td>
    </tr>
    <tr style="padding-top:15px">
      <td><strong>Current Cost</strong></h4>
      </td>
      <td>::</td>
      <td>
        <h4>&#x20B9;
          <?php echo $row["finaltotal"]; ?>
        </h4>
      </td>
    </tr>
    <form action="" method="post" id="priceform">
      <tr style="padding-top:15px">
        <td><strong>Enter Final Repair Cost</strong></h4>
        </td>
        <td>::</td>
        <input type="hidden" name="orderId" value="<?php echo $row['orderId'];?>">
        <!-- 调用函数时传入this -->
        <td><input type="text" class="form-control form-control-sm" placeholder="Enter Price" id="fprice" name="finalprice" onBlur="submitPrice(this)"> </td>
        <td><span class="status-msg"></span></td>
      </tr>
    </form>
    <tr style="padding-top:15px">
      <td><strong>Current Resolution</strong></h4>
      </td>
      <td>::</td>
      <td>
        <h4>
          <?php echo $row["resolution"]; ?>
        </h4>
      </td>
    </tr>
    <form action="" method="post" id="resoform">
      <tr style="padding-top:15px">
        <input type="hidden" name="orderId" value="<?php echo $row['orderId'];?>">
        <td><strong>Update Resolution</strong></h4>
        </td>
        <td>::</td>
        <!-- 调用函数时传入this -->
        <td><textarea class="form-control form-control-sm" placeholder="Enter Final Resolution" id="reso" name="resolution" onBlur="submitReso(this)"></textarea></td>
        <td> <span class="status-msg"></span></td>
      </tr>
    </form>
    <form action="updatestatus.php" method="post" id="statusform">
      <tr style="padding-top:15px">
        <td><strong>Change Order Status</strong></h4>
        </td>
        <td>::</td>
        <td class="align-middle text-right">
          <input type="hidden" name="orderId" value="<?php echo $row['orderId'];?>">
          <!-- 调用函数时传入this -->
          <select name="status" id="status" class="form-control form-control-sm" onChange="submitState(this)">
            <option value="">Change Status</option>
            <option value="confirmed">confirmed</option>
            <option value="pending_inspection">pending_inspction</option>
            <option value="due">due</option>
            <option value="paid">paid</option>
            <option value="picked_up">pickedup</option>
            <option value="shipped">shipped</option>
            <option value="complete">complete</option>
            <option value="onhold">onhold</option>
            <option value="pending_pickup">Pending_pickup</option>
          </select>
        </td>
        <td><span class="status-msg"></span></td>
      </tr>
      <tr>
      <td><a href="javascript:history.back()"><button class="bt_main">Go Back</button></a> </td>
      </tr>

    </form>

  </tbody>
</table>

修正后PHP端直接用$_POST['orderId']、$_POST['finalprice']对应字段就能拿到所有参数。

内容的提问来源于stack exchange，提问作者Mistryonline. tech