同一页面多元素POST提交与SQL集成的实现问题

Hey, I see where you're getting stuck here—let's fix this step by step. The core issue is that you're trying to use a frontend JavaScript $_POST variable like it's PHP's server-side $_POST, which doesn't work because page refreshes wipe out frontend state. Here's how to properly capture the button's ID data and pass it along with the modal form:

1. 核心问题分析 #

• Your frontend $_POST array is just a JS variable—it disappears as soon as the form submits and the page reloads.
• The modal form isn't including the mainpart and subpart values from the Add button when it submits to the server.
• Trying to read "POST data" in evaluate_form() before the form is submitted won't work, since the POST request hasn't been sent to the server yet.

2. 实现方案 #

步骤1：给模态框表单添加隐藏字段 #

Add hidden inputs to your modal form to store the mainpart and subpart values. These will be submitted along with the rest of the form data:

<form id="form1" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="POST">
  <!-- Hidden fields to store Add button data -->
  <input type="hidden" id="mainpart" name="mainpart" value="">
  <input type="hidden" id="subpart" name="subpart" value="">
  
  <!-- Your existing form fields -->
  <div class="form-group">
    <label for="address">Address for sale:</label>
    <textarea class="form-control" id="address" name="address" rows="6"></textarea>
  </div>
  <div class="form-group">
    <label for="numsales">Number of sales:</label>
    <input type="number" value="1" class="form-control only-number" id="numsales" name="numsales">
  </div>
  <div class="form-group">
    <label for="quota">Quota:</label>
    <input type="number" value="1" class="form-control only-number" id="quota" name="quota">
  </div>
  
  <!-- Modal footer buttons -->
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
    <button type="submit" class="btn btn-primary">Save</button>
  </div>
</form>

步骤2：修改send_id()函数 #

Instead of storing values in a frontend $_POST variable, set the hidden fields' values when the Add button is clicked:

$(document).ready(function() {
  function send_id(var1, var2) {
    // Set hidden field values
    $('#mainpart').val(var1);
    $('#subpart').val(var2);
    console.log("Captured mainpart: " + var1 + ", subpart: " + var2);
  }

  // Remove the frontend $_POST and evaluate_form() since we'll handle this server-side
});

步骤3：服务器端（PHP）处理数据 #

When the form submits, PHP will receive all the data (including mainpart, subpart, and form fields) in the $_POST superglobal. Use this to construct your SQL statement—always use prepared statements to prevent SQL injection:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  // Sanitize and retrieve POST data
  $mainpart = $_POST['mainpart'];
  $subpart = $_POST['subpart'];
  $address = $_POST['address'];
  $numsales = $_POST['numsales'];
  $quota = $_POST['quota'];

  // Example: Prepare and execute SQL (use your database connection)
  $conn = new mysqli("localhost", "username", "password", "database_name");
  
  // Check connection
  if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
  }

  // Prepared statement to prevent SQL injection
  $stmt = $conn->prepare("INSERT INTO your_table_name (mainpart, subpart, address, numsales, quota) VALUES (?, ?, ?, ?, ?)");
  $stmt->bind_param("sssii", $mainpart, $subpart, $address, $numsales, $quota);

  if ($stmt->execute()) {
    echo "New record created successfully";
  } else {
    echo "Error: " . $stmt->error;
  }

  $stmt->close();
  $conn->close();
}
?>

可选：无刷新AJAX提交（如果不想刷新页面） #

If you want to submit the form without reloading the page, use AJAX instead of traditional form submission. Modify the form submit handler:

$(document).ready(function() {
  function send_id(var1, var2) {
    $('#mainpart').val(var1);
    $('#subpart').val(var2);
  }

  // Handle form submission via AJAX
  $('#form1').submit(function(e) {
    e.preventDefault(); // Prevent default form reload

    $.ajax({
      url: $(this).attr('action'),
      type: 'POST',
      data: $(this).serialize(),
      success: function(response) {
        alert("Data saved successfully!");
        $('#modal1').modal('hide'); // Close modal after success
        // Optional: Refresh table or update UI here
      },
      error: function(xhr, status, error) {
        alert("Error saving data: " + error);
      }
    });
  });
});

完整代码示例 #

Here's the full working code combining all parts:

<?php
// Server-side handling (add your database credentials)
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $mainpart = $_POST['mainpart'];
  $subpart = $_POST['subpart'];
  $address = $_POST['address'];
  $numsales = $_POST['numsales'];
  $quota = $_POST['quota'];

  // Replace with your database setup
  $conn = new mysqli("localhost", "root", "", "your_db");
  if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
  }

  $stmt = $conn->prepare("INSERT INTO sales_records (mainpart, subpart, address, numsales, quota) VALUES (?, ?, ?, ?, ?)");
  $stmt->bind_param("sssii", $mainpart, $subpart, $address, $numsales, $quota);
  $stmt->execute();
  $stmt->close();
  $conn->close();
}
?>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script>
    $(document).ready(function() {
      function send_id(var1, var2) {
        $('#mainpart').val(var1);
        $('#subpart').val(var2);
        console.log("Captured mainpart: " + var1 + ", subpart: " + var2);
      }

      // Optional AJAX submit (uncomment if you want no-refresh)
      // $('#form1').submit(function(e) {
      //   e.preventDefault();
      //   $.ajax({
      //     url: $(this).attr('action'),
      //     type: 'POST',
      //     data: $(this).serialize(),
      //     success: function() {
      //       alert("Saved!");
      //       $('#modal1').modal('hide');
      //     }
      //   });
      // });
    })
  </script>
</head>
<body>
  <!-- Modal -->
  <div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Add Sale Record</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form id="form1" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="POST">
            <input type="hidden" id="mainpart" name="mainpart" value="">
            <input type="hidden" id="subpart" name="subpart" value="">
            
            <div class="form-group">
              <label for="address">Address for sale:</label>
              <textarea class="form-control" id="address" name="address" rows="6"></textarea>
            </div>
            <div class="form-group">
              <label for="numsales">Number of sales:</label>
              <input type="number" value="1" class="form-control only-number" id="numsales" name="numsales">
            </div>
            <div class="form-group">
              <label for="quota">Quota:</label>
              <input type="number" value="1" class="form-control only-number" id="quota" name="quota">
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
              <button type="submit" class="btn btn-primary">Save</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <h2>Performance Calculation Form</h2>
    <div class="tables">
      <div id="1">
        <form>
          <table class="table table-striped table-bordered">
            <thead>
              <tr>
                <th class="col-md-10" colspan="2">1. Sales</th>
                <th class="col-md-2"></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="col-md-8">a) Sales to a </td>
                <td class="col-md-2">
                  <p class="text-center">20</p>
                </td>
                <td style="text-align: center">
                  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1" onclick="send_id('1','a')">Add</button>
                </td>
              </tr>
              <tr>
                <td class="col-md-10" colspan="2">Subtotal </td>
                <td class="col-md-2"><input type="text" class="form-control" id="usr"></td>
              </tr>
            </tbody>
          </table>
          <button type="submit" id="submit" name="submit" value="KAYDET"> Submit</button>
        </form>
      </div>
    </div>
  </div>
</body>
</html>

关键注意事项 #

• Never trust user input: Always use prepared statements for SQL queries to avoid SQL injection attacks—this is non-negotiable for security.
• The frontend and backend $_POST are completely separate: Frontend JS can't access server-side $_POST until the form is submitted.
• If you use AJAX, make sure your PHP script returns a proper response (like JSON) if you need to handle success/error in the frontend.

内容的提问来源于stack exchange，提问作者colt.exe