Question

我对jQuery比较陌生。我有一个表单（https://jsfiddle.net/drewdeakin/zsu8khm4/2/），如果用户选择“其他”，将显示2个字段。

如果用户提交表单，并且表单返回错误（使用PHP处理表单验证），如何获取隐藏字段以显示用户是否选择了“其他”？

这是我正在使用的jquery：

    $(document).ready(function() {

      $('.location-other').hide();
      $('.location').change(function(){
        if($('.location option:selected').val() == 'other') {
          $('.location-other').show();
        } else {
          $('.location-other').hide();
        }
      });

    });

HTML表单预先提交：

<form>

  <h2>Location</h2>

  <div class="field">
    <label for="business_id" class="label">Venue</label>
    <div class="select">
      <select name="business_id" class="location">
        <option value="3">Location 1</option>
        <option value="7">Location 2</option>
        <option value="other">Other</option>
      </select>

    </div>

    <div class="location-other">

      <p>
        <label for="event_location_name" class="label">Venue name</label>
        <input type="text" class="input" id="event_location_name" name="event_location_name" value="" />
      </p>

      <p>
        <label for="event_location_address" class="label">Address</label>
        <input type="text" class="input" id="event_location_address" name="event_location_address" value="" />
      </p>

    </div>

  </div>
  <p class="field">
    <button name="event_insert" class="button is-primary">Save and continue &rarr;</button>
  </p>

</form>

HTML表单后提交：

<form>

  <h2>Location</h2>

  <div class="field">
    <label for="business_id" class="label">Venue</label>
    <div class="select">
      <select name="business_id" class="location">
        <option value="3">Location 1</option>
        <option value="7">Location 2</option>
        <option value="other" selected>Other</option>
      </select>

    </div>

    <div class="location-other">

      <p>
        <label for="event_location_name" class="label">Venue name</label>
        <input type="text" class="input" id="event_location_name" name="event_location_name" value="Name" />
      </p>

      <p>
        <label for="event_location_address" class="label">Address</label>
        <input type="text" class="input" id="event_location_address" name="event_location_address" value="Address" />
      </p>

    </div>

  </div>
  <p class="field">
    <button name="event_insert" class="button is-primary">Save and continue &rarr;</button>
  </p>

</form>

Answer 1

请参考以下代码。另外，请检查评论中的小提琴链接。如果表单中存在错误，则可以使用return false阻止按钮操作触发其他代码。因此，您的表单状态将保持不变，并且如果您选择了其他选项，则它将仅使隐藏字段保持可见状态。如果没有错误，则可以继续提交操作。我假设您已经检查过错误。

    <form>

  <h2>Location</h2>

  <div class="field">
    <label for="business_id" class="label">Venue</label>
    <div class="select">
      <select name="business_id" class="location">
        <option value="3">Location 1</option>
        <option value="7">Location 2</option>
        <option value="other">Other</option>
      </select>

    </div>

    <div class="location-other">

      <p>
        <label for="event_location_name" class="label">Venue name</label>
        <input type="text" class="input" id="event_location_name" name="event_location_name" value="" />
      </p>

      <p>
        <label for="event_location_address" class="label">Address</label>
        <input type="text" class="input" id="event_location_address" name="event_location_address" value="" />
      </p>

    </div>

  </div>
  <p class="field">
    <button id="saveData" name="event_insert" class="button is-primary"> Save and continue →</button>
  </p>

</form>

    $(document).ready(function() {

      $('.location-other').hide();
      $('.location').change(function(){
        if($('.location option:selected').val() == 'other') {
          $('.location-other').show();
        } else {
          $('.location-other').hide();
        }
      });     
      $( "#saveData" ).click(function() {
        var isError = true;
        if(isError){
            return false
        }
        else{
            alert("submitted");
        }
      });

    });

Answer 2

仅记得以以下形式打印出所选选项：

<option value="other" selected>Other</option>

然后您可以使用jQuery检查所选位置：

$(document).ready(function() {
    check_location();

    $('.location').change(check_location);
});

function check_location() {
    if($('.location option:selected').val() == 'other') {
        $('.location-other').show();
    } else {
        $('.location-other').hide();
    }
}

表单提交失败后显示隐藏字段

2 个答案: