Question

在下面的表格中，要求用户输入一系列奶油科学测试结果。但是我想要它，以便用户只需要填写“phos＆＃39;如果奶油早先作为罐子或植物输入“＃”类型的盒子。框。我该怎么做呢？

<div class="jumbotron loginandcreateuser">
  <form method="post" action="cream.php">
    <table>
      <tr><th>Time</th><td><input type="time" name="cream_time"></td></tr>
      <tr><th>Provenance</th><td>
        <select name="prov">
          <option value="org">Org</option>
          <option value="conv">Conv</option>
        </select>
      </td></tr>
      <tr><th>Size</th><td><input type="text" name="size"></td></tr>
      <tr><th>Type</th><td>
        <select name="type">
          <option value="tank">tank</option>
          <option value="plant">plant</option>
          <option value="product">product</option>
        </select>
      </td></tr>
      <tr><th>Grade</th><td>
        <select name="grade">
          <option value="DC">DC</option>
          <option value="SC">SC</option>
          <option value="WC">WC</option>
        </select>
      </td></tr>
      <tr><th>Customer</th><td><input type="text" name="customer"></td></tr>
      <tr><th>Usebydate</th><td><input type="date" name="usebydate"></td></tr>
      <tr><th>Temp</th><td><input type="number" name="temp"></td></tr>
      <tr><th>B/fat</th><td><input type="number" name="b_fat"></td></tr>
      <tr><th>Phos</th><td><input type="number" name="phos"></td></tr>
    </table>
  <input type="submit" value="submit" name="submit"><br>
</div>

Answer 1

这可以通过一些javascript验证轻松解决...下面我得到了值并添加了一个事件监听器，以便在选择选项时触发一个函数。

该功能检查选定的选项是否为tank或plant ...如果是，则显示phos字段，否则我们隐藏phos字段。

<div class="jumbotron loginandcreateuser">
  <form method="post" action="cream.php">
    <table>
      <tr><th>Time</th><td><input type="time" name="cream_time"></td></tr>
      <tr><th>Provenance</th><td>
        <select name="prov">
          <option value="org">Org</option>
          <option value="conv">Conv</option>
        </select>
      </td></tr>
      <tr><th>Size</th><td><input type="text" name="size"></td></tr>
      <tr><th>Type</th><td>
        <select id="type" name="type">
          <option value="tank">tank</option>
          <option value="plant">plant</option>
          <option value="product">product</option>
        </select>
      </td></tr>
      <tr><th>Grade</th><td>
        <select name="grade">
          <option value="DC">DC</option>
          <option value="SC">SC</option>
          <option value="WC">WC</option>
        </select>
      </td></tr>
      <tr><th>Customer</th><td><input type="text" name="customer"></td></tr>
      <tr><th>Usebydate</th><td><input type="date" name="usebydate"></td></tr>
      <tr><th>Temp</th><td><input type="number" name="temp"></td></tr>
      <tr><th>B/fat</th><td><input type="number" name="b_fat"></td></tr>
      <tr id="phos" style="display: none"><th>Phos</th><td><input type="number" name="phos"></td></tr>
    </table>
  <input type="submit" value="submit" name="submit"><br>
</div>

<script>

    document.getElementById("type").addEventListener("change", enablePhosTextarea);

    function enablePhosTextarea() {
        type = document.getElementById("type");
        value = type.value;
        if (value === 'tank' || value === 'plant') {
            document.getElementById("phos").removeAttribute("style", "display: none;");
        } else {
            document.getElementById("phos").setAttribute("style", "display: none;");
        }
    }

</script>

在这里试试： https://jsfiddle.net/f34184u1/

Answer 2

当前没有任何表单控件设置为必需，因此现在，无论选择哪种类型，您的用户都不必填写phos输入。

就客户端交互而言，根据另一个控件的值，有多种不同的方法可以使用JavaScript来有条件地设置控件（或其他答案中建议的可见控件）。

这有助于提供更好的用户体验，但无论您决定在客户端执行什么操作，都必须验证服务器端的输入。无论是有意还是无意，都可以轻松绕过客户端验证，因此您需要验证应用程序中实际使用的部分是否有适当的输入。

以下是您在cream.php中执行此操作的基本示例：

session_start();              // start the session so you can store potential errors
unset($_SESSION['errors']);   // clear any errors from previous attempts

// Check for invalid input
if (in_array($_POST['type'], ['tank', 'plant']) && $_POST['phos'] = '') {

    // store an error in the session
    $_SESSION['errors']['phos'] = 'You must enter a value for Phos for tank/plant types.';

    // redirect back to your input form
    header('Location: path/to/yourinputform.php');
    exit();
}

// If no input validation errors are encountered, then go ahead with
// however you're normally processing the input data.

然后在您的登录表单中，检查会话是否有错误，并将其显示在适当的位置（如果有）。除此之外还有更多，但这应该给你一般的想法。

许多各种各样的PHP框架（Laravel，Symfony等）都有这种类型的内置方法，可以简化这一过程并处理您自己可能遇到的各种问题。

Answer 3

您将需要使用Javascript

PHP表单 - 如果选择了某个选项，则只需填写输入

3 个答案: