javascript - 如果需要，显示字段

Question

我正在尝试用 php 制作一个联系表单。你可以找到它here .

我尝试使带有日期选择器的文本框不可见，直到访问者选中单选按钮“ja”，然后它才需要可见。

表单代码如下:

var FormStuff = {

  init: function() {
    this.applyConditionalRequired();
    this.bindUIActions();
  },

  bindUIActions: function() {
    $("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
  },

  applyConditionalRequired: function() {

    $(".require-if-active").each(function() {
      var el = $(this);
      if ($(el.data("require-pair")).is(":checked")) {
        el.prop("required", true);
      } else {
        el.prop("required", false);
      }
    });

  }

};

FormStuff.init();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form method="post" action="mail.php">
  <!--< ?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>-->
  <table id="contactForm">
    <tr>
      <th colspan="2">Contact</th>
    </tr>
    <div>
      <tr>
        <td><label>Reservatie: </label></td>
        <td>
          <table>
            <tr>
              <td id="nospacing"><input type="radio" name="reservatie" value="Ja" id="ja"></td>
              <td id="nospacing"><label for="reservatie">Ja</label></td>
              <td id="nospacing"><input type="radio" name="reservatie" value="Nee" id="nee"></td>
              <td id="nospacing"><label for="reservatie">Nee</label></td>
            </tr>
          </table>
        </td>

      </tr>
      <div class="reveal-if-active">
        <tr>
          <td><label for="reservering">Reserveringsdatum: </label></td>
          <td><input type="text" id="reservering" autocomplete="off" name="reservering" class="require-if-active" data-require-pair="#ja"></td>
        </tr>
      </div>
    </div>
    <tr>
      <td><input type="submit" name="submit" value="Verzenden" /></td>
      <td><input type="reset" value="Formulier wissen" class="alt" /></td>
    </tr>
  </table>
</form>

Answer 1

您使用 $('input[type="radio"]').click(function(){}) 来检测您的输入更改，请参阅代码片段。

var FormStuff = {

  init: function() {
    this.applyConditionalRequired();
    this.bindUIActions();
  },

  bindUIActions: function() {
    $("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
  },

  applyConditionalRequired: function() {

    $(".require-if-active").each(function() {
      var el = $(this);
      if ($(el.data("require-pair")).is(":checked")) {
        el.prop("required", true);
      } else {
        el.prop("required", false);
      }
    });

  }

};

FormStuff.init();
 /* this is the function to handle you need */
$(function(){
  $('input[type="radio"]').click(function(){
    if ($('input[type="radio"]#ja').is(':checked'))
    {
      $(".reveal-if-active").show();
    }
    else if('input[type="radio"]#nee'){
     $(".reveal-if-active").hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form method="post" action="mail.php">
  <!--< ?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>-->
  <table id="contactForm">
    <tr>
      <th colspan="2">Contact</th>
    </tr>
    <div>
      <tr>
        <td><label>Reservatie: </label></td>
        <td>
          <table>
            <tr>
              <td id="nospacing"><input type="radio" name="reservatie" value="Ja" id="ja"></td>
              <td id="nospacing"><label for="reservatie">Ja</label></td>
              <td id="nospacing"><input type="radio" name="reservatie" value="Nee" id="nee"></td>
              <td id="nospacing"><label for="reservatie">Nee</label></td>
            </tr>
          </table>
        </td>

      </tr>
      <div >
        <!-- make the tr the element to hide and show -->
        <tr class="reveal-if-active" style="display:none">
          <td  ><label for="reservering">Reserveringsdatum: </label></td>
          <td><input type="text" id="reservering"  autocomplete="off" name="reservering" class="require-if-active" data-require-pair="#ja"></td>
        </tr>
      </div>
    </div>
    <tr>
      <td><input type="submit" name="submit" value="Verzenden" /></td>
      <td><input type="reset" value="Formulier wissen" class="alt" /></td>
    </tr>
  </table>
</form>