如何從復選框選中的行訪問不同的值

Question

我目前的頁面邏輯依賴於我的復選框的值標簽。 想要將不同的數據發送到我的下一頁，但這樣做會破壞我當前頁面上的代碼。

我想發送行號而不是價格。 我想將座位值存儲到會話數據中，但是當我只能將一個值綁定到復選框時，我不知道如何引用不同列中的數據。

echo "input type='checkbox' name='check_list[]' value=\"$price;\";

到

echo "input type='checkbox' name='check_list[]' value=\"$seat;\";

打破下面的總成本字段

foreach($res as $row) {


      $seat = $row['RowNumber'];  
      $price = $row['Zone.PriceMultiplier * 15.00'];

       echo "<tr>";
       echo "<td>".$seat."</td>";
       echo "<td>".$price."</td>";
       echo "<td><input type='checkbox' name='check_list[]' value=\"$price;\" </td>";

       echo "</tr>";

    }

文本字段的代碼。

echo "<script> function calculateCheckbox() {


  var el = document.getElementById('output');
  var products = el.getElementsByTagName('input');
  var len = products.length;

  for (var i = 0; i < len; i++) {
    if (products[i].type === 'checkbox') {
      products[i].onclick = updateCost;
    }
  }
}
</script>";


echo "<script> function updateCost(e) {

  var myForm = this.form;
  var val = parseFloat(myForm.elements['total-cost'].value);


  if (this.checked) {
    val += parseFloat(this.value);
  } else {
    val -= parseFloat(this.value);
  }

  myForm.elements['total-cost'].value = val} 
</script>";

我在這里嘗試了非 JS 解決方案，但沒有奏效。

HTML 通過一個復選框提交多個值？

我是否需要使用 JS 來解決這個問題。

Answer 1

您遇到了將不相關數據從表單傳遞到服務器的問題。

如果您只是發送座位，您應該可以在服務器上查找價格。

此外，您無論如何都不應該從表單中發送價格，因為這些數據很容易被篡改。

// Form - just send the chosen seats
echo "<td><input type='checkbox' name='check_list[]' value=\"$seat;\" </td>";

// Form processing.
$seats = $_POST['check_list'];

$total = 0;
foreach ($seats as $seat) {
    $total += your_nifty_price_service($seat);
}

編輯

更進一步，您可以使用 AJAX 從服務器檢索價格。

摘錄自

• 如何使用 jQuery 通過 Ajax 發送復選框數組的值？
• 如何通過ajax更新輸入文本的值？

形式

<form ...>
    <input type="text" id="total-price" name="price">

    <input type="checkbox" class="seats" name="check_list[] value="<?php echo $seat; ?>">;
    <input type="checkbox" class="seats" name="check_list[] value="<?php echo $seat; ?>">;

    ...
</form>

<script>
    $('#calculate-price').click(function() {

        $.ajax({
            url: "your-form-processor.php",
            type: "post",
            data: $('.seats:checked').serialize(),
            success: function(data) {
                $("#total-price").val(data);
            }
        });
    });
</script>

---

your-form-processor.php

// Check this is a POST request & do validation
// ...

$seats = $_POST['check_list'];

$total = 0;
foreach ($seats as $seat) {
    $total += your_nifty_price_service($seat);
}
return $total;