如何将单选按钮与输入文本字段联系起来？答案

【问题标题】：How to tie radio button with input text fields?如何将单选按钮与输入文本字段联系起来？
【发布时间】：2019-05-26 22:11:51
【问题描述】：

这是员工的注册表单。如果员工是临时的或永久的，则必须签入单选按钮。如果是临时的，他应该填写输入的合同号，如果是永久的雇佣日期。如何将单选按钮与输入绑定，以便他无法“交叉完成”，例如，如果他是临时的，请填写招聘日期。我想让他只有在他按下了那个特定的单选按钮时才能填写每个输入。

php 代码：

<?php include 'dbconfig.php';?>
<?php header('Content-Type: text/html; charset=utf-8');?>
<!DOCTYPE HTML PUCLIC "-//W3C//DTDHTML
4.0 Transitional//EN"><HTML>
  <HEAD>
      <link rel="stylesheet" type="text/css" href="logintest.css">
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </HEAD>
  <button class="btn" TYPE="submit" name="goback" onclick="window.location.href='login.php'">Go Back </button>

      <?php
      error_reporting(E_ALL); ini_set('display_errors', 1);
      if(isset($_POST['submit']))
      {
        $sql = "INSERT INTO employee (empID,EFirst,ELast,username, passcode)
        VALUES ('".$_POST["empID"]."','".$_POST["EFirst"]."','".$_POST["ELast"]."','".$_POST["username"]."','".$_POST["passcode"]."')";

        $result = mysqli_query($conn,$sql);
        $answer=$_POST['kind'];
        if($answer='permament'){
          $sql1 = "INSERT INTO permament_employee (empID,Hiring_Date) VALUES ('".$_POST["empID"]."','".$_POST["date"]."')";
          $result1 = mysqli_query($conn,$sql1);
        }

        if ($answer='temporary'){
          $sql2= "INSERT INTO temporary_employee(empID) VALUES ('".$_POST["empID"]."')";
          $result2 = mysqli_query($conn,$sql2);
        }
        echo "<script> location.replace('login.php') </script>";
      }
      ?>

    <FORM METHOD="post" ACTION="">
        <div class="input-group">
        <label>id</label>
           <INPUT TYPE="text" name="empID" SIZE="30" required>
        </div>
        <div class="input-group">
           <label>First Name</label>
           <INPUT TYPE="text" name="EFirst" SIZE="30" required>
        </div>
        <div class="input-group">
           <label>Last Name</label>
           <INPUT TYPE="text" name="ELast" SIZE="30" required>
        </div>
        <div class="input-group">
            <label>username</label>
            <INPUT TYPE="text" name="username" SIZE="30" required>  
        </div> 
        <div class="input-group">
             <label>password</label>
             <INPUT TYPE="password" name="passcode" SIZE="30" required>
        </div>   
        <div class="input-group">
          <div class="some-class">
          <label> Permament  <input type="radio" name="kind" value="permament" id="permament" required>  <br>   <input type="date" name="date" value="date" id="date" required>  <br> </label>
          <label> Temporary  <input type="radio" name="kind" value="temporary" id="temporary" required>  <br>  <input type="number" name="ContractNr" value="ContractNr" id="ContractNr" placeholder="Contract Number" required>  <br>     </label>
          </div>
        </div>
        <br>
        <br>
        <br>
        <br>

        <button class="btn" TYPE="submit" name="submit">Submit Info </button>
        <button class="btn" TYPE="reset" name="Reset">Reset </button>
    </FORM>

</HTML>

【问题讨论】：

看看这个问题的解决方案：stackoverflow.com/questions/17621515/…

标签： javascript php html css

【解决方案1】：

你需要javascript。您必须在单选按钮上绑定“更改”事件，并根据单选按钮选择的值设置输入的可见性。

【讨论】：

【解决方案2】：

如果您使用的是 jQuery，您可以添加以下内容：

<script>
    $(‘input[name=“kind”]’).change(function(){
        if($(this).val() == ‘temporary’){
            $(‘input[name=“date”]).hide();
            $(‘input[name=“ContractNr”]).show();
        }else{
            $(‘input[name=“date”]).show();
            $(‘input[name=“ContractNr”]).hide();
        }
    });
</script>

或者，如果您只想禁用：

<script>
    $(‘input[name=“kind”]’).change(function(){
        if($(this).val() == ‘temporary’){
            $(‘input[name=“date”]).prop(‘disabled’, true);
            $(‘input[name=“ContractNr”]).prop(‘disabled’, false);
        }else{
            $(‘input[name=“date”]).prop(‘disabled’, false);
            $(‘input[name=“ContractNr”]).prop(‘disabled’, true);
        }
    });
</script>

【讨论】：

这似乎是正确的，但是当我使用向下箭头选择日期和向上或向下箭头选择数字时，我可以选择它
您如何点击它们？上面的代码应该只显示相应的输入吗？这是在您选择单选选项之前吗？
代码实际上并没有隐藏输入字段，点击后显示。它的作用是，当我选择让我们说临时我可以单击永久输入并使用向下箭头选择一个日期，但是我不能用键盘输入日期，所以它部分工作
你想隐藏它吗？另一种选择是禁用输入。
这两个选项（隐藏或禁用）中的任何一个都可以