仅勾选复选框时显示文本框且未勾选时不入库的实现问题

Hey there! I totally get how frustrating this can be—something that seems straightforward ends up stumping you. The issue here is that even though you're hiding the textbox visually with JavaScript, the form still sends its value to the server when submitted. Let's fix this with a two-pronged approach (frontend for user experience, backend for data safety):

1. 前端优化：确保未勾选时文本框不提交值 #

First, let's adjust your frontend code to either disable the textbox or clear its value when the checkbox isn't checked. Disabled form fields aren't included in form submissions, which is perfect here. Also, don't forget to add a name attribute to your checkbox—right now it doesn't have one, so your backend can't tell if it was checked!

Updated HTML #

<table>
<tr>
<td>
<!-- Added name="NCFtxt" so backend can detect if it's checked -->
<input type="checkbox" name="NCFtxt" id="NCFtxt" onclick="obtenerNCF()"> Marcar casilla para generar Comprobante Fiscal
</td>
</tr>
<tr>
<td>
NCF: <input readonly="readonly" name="txtNCF" type="text" id="txtNCF" value="<?php echo $cobro->ncf; echo $ncf; ?>" />
</td>
</tr>
</table>

Updated JavaScript #

<script language="javascript">
// Initialize: hide and disable the textbox on page load
$(document).ready(function() {
  $("#txtNCF").hide().prop('disabled', true);
});

function obtenerNCF() {
  const checkbox = document.getElementById("NCFtxt");
  const ncfInput = $("#txtNCF");
  
  if (checkbox.checked) {
    // Show and enable the textbox when checked
    ncfInput.show().prop('disabled', false);
  } else {
    // Hide, disable, and clear the textbox when unchecked
    ncfInput.hide().prop('disabled', true).val('');
  }
}
</script>

2. 后端校验：永远不要信任前端输入 #

Frontend controls can be bypassed (e.g., someone could use browser dev tools to enable the textbox even if the checkbox is unchecked). So you must add a check on your backend to only process the txtNCF value if the checkbox was actually checked.

Here's how to do it in PHP (assuming this is your form submission handler):

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  // Check if the checkbox was checked
  if (isset($_POST['NCFtxt']) && $_POST['NCFtxt'] === 'on') {
    // Only process the NCF value if the checkbox is checked
    $ncfValue = isset($_POST['txtNCF']) ? trim($_POST['txtNCF']) : '';
    // Now save $ncfValue to your database
    // Example:
    // $stmt = $pdo->prepare("INSERT INTO your_table (ncf) VALUES (?)");
    // $stmt->execute([$ncfValue]);
  } else {
    // Checkbox not checked: don't save the NCF value
    // You can set the field to NULL, leave it empty, or skip updating it entirely
    $ncfValue = null;
    // Example:
    // $stmt = $pdo->prepare("INSERT INTO your_table (ncf) VALUES (?)");
    // $stmt->execute([$ncfValue]);
  }
}

Why this works #

• The frontend changes make sure that in normal use, the textbox's value isn't sent to the server when the checkbox is unchecked.
• The backend check acts as a safety net: even if someone manipulates the frontend, your server will ignore the NCF value unless the checkbox was properly checked.

内容的提问来源于stack exchange，提问作者I. Valera