jquery - 在表单提交失败时保留 JQuery CSS 设置

Question

在我创建的 wordpress 上，我使用下拉菜单通过 JQuery 显示 3 个隐藏表单中的 1 个。

第一个问题是当表单无效(即缺少字段、错误的电子邮件等)时，表单会重置页面，因此在您再次从下拉列表中选择该表单之前，所有内容都不再可见。

第二个是表单是一个插件，所以我不直接访问提交操作，如果我进入插件文件，它可能会在不久的将来被更新覆盖。

HTML:

<div class="ginput_container ginput_container_select">
<select id="app_pick" class="medium gfield_select">
    <option value="">Choose Here</option>
    <option value="Greek_Dance">Greek Dance</option>
    <option value="Greek_School">Greek School</option>
    <option value="Youth_Group">Youth Group</option>
</select></div>

JQUERY:

    jQuery(document).ready(function($){

        $('#gform_wrapper_3').hide();


    $('#app_pick').on('change', function() {
  if ( this.value == ''){
    $('.f1').css('display', 'none');
     $('.f2').css('display', 'none');
      $('.f3').css('display', 'none');
  }
  else if ( this.value == 'Greek_Dance'){
    $('.f1').css('display', 'block');
     $('.f2').css('display', 'none');
      $('.f3').css('display', 'none');
  }
  else if ( this.value == 'Greek_School'){
    $('.f1').css('display', 'none');
     $('.f2').css('display', 'block');
      $('.f3').css('display', 'none');
  }
 else if ( this.value == 'Youth_Group'){
    $('.f1').css('display', 'none');
     $('.f2').css('display', 'none');
      $('.f3').css('display', 'block');
  }
else {
    $('.f1').css('display', 'none');
     $('.f2').css('display', 'none');
      $('.f3').css('display', 'none');
  }

});

    });

F1,F2,F3分别是Display: none默认的form。

我的目标是在下拉列表中选择表单 Display: block;提交发生后。

Answer 1

我稍微重构了您的解决方案以摆脱 if-else 结构:

var form = localStorage.getItem('showForm');
if (form) {
  $('.' + form).show();
  $('#app_pick').val(localStorage.getItem('option'))
}

$('#app_pick').on('change', function() {
  var showForm;

  $('.f1, .f2, .f3').hide();

  switch (this.value) {
    case 'Greek_Dance':
      $('.f1').show();
      showForm = 'f1';
      break;
    case 'Greek_School':
      $('.f2').show();
      showForm = 'f2';
      break;
    case 'Youth_Group':
      $('.f3').show();
      showForm = 'f3';
      break;
  }
  localStorage.setItem('showForm', showForm);
  localStorage.setItem('option', this.value);
});

我在这里所做的是将选定的值及其随附的表格保存到 localStorage 中。在页面重新加载时使用它。

---

Example