Показать скрытые поля после неудачной отправки формы

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

Просто не забудьте распечатать выбранный параметр в форме:

<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();
    }
}

Answer 2

Пожалуйста, обратитесь ниже код. Также, пожалуйста, проверьте ссылку скрипта в комментарии. Если в форме есть ошибка, вы можете предотвратить дальнейшее выполнение кода кнопкой, используя 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");
        }
      });

    });