Wordpress Contact-form 7 - 使用 Jquery 的预订表单功能答案

【问题标题】：Wordpress Contact-form 7 - Booking form functionality with JqueryWordpress Contact-form 7 - 使用 Jquery 的预订表单功能
【发布时间】：2017-01-17 10:18:34
【问题描述】：

我使用 WordPress 插件 Contact-form 7 创建了一个表单。我目前有一个字段是一个下拉列表，理想情况下，从该列表中选择任何选项并在下面有一个描述会很棒每次选择一个主题。

原因是我目前正在设计一个用于教育目的的预订表格，并且下拉列表包含各种主题。一旦您单击该主题，如果每次它都会自动在其下方显示该课程的描述，那就太好了。

.enquiry-contain {
    padding:100px 0;
  }

  .school-enquiry {
    background-color:rgba(0, 0, 0, 0.72);
    border-radius:10px;
    padding:50px;
  }

  .bg-image {

    width:100%;
    background: url(https://www.durrell.org/wildlife/wp-content/uploads/2017/01/MG_3919-v2.jpg) fixed;
    color: #fff;
    height: 100%;
    margin: 0;
    background-position: center 0;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .wc-durrell-footer {
    margin-top:0;
  }

  .wpcf7-text, .wpcf7-date, .wpcf7-select, .wpcf7-textarea{
    color: black;
    font-family: 'AvantGardeGothicITCW01B 731069';
    padding:5px;
    border-radius: 5px;≈
  }

  .wpcf7-textarea, .session-choice {    
    width: 100%;
  }

<?php get_header(); ?>

<section class="bg-image">

<div class="container enquiry-contain">

<h1 style="text-align:center;">Jersey Booking Form</h1>
<div class="row" style="margin: 0 3px 0 3px;">
<div class="col-md-2 hidden-sm"></div>
<div class="col-md-1 hidden-sm"></div>
<div class="school-enquiry col-md-6">
<h6 style="color:#70D100;">Please complete all fields below before you click submit</h6>
<?php echo do_shortcode('[contact-form-7 id="10012426" title="Jersey school booking form"]'); ?>
</div>
</div>
  
</div>

</section>

<?php get_footer(); ?>

这是 WordPress Contact-Form 7 代码：

[text* your-name placeholder "Name of teacher *"]
[text* school-name placeholder "Name of school *"]
[email* your-email placeholder "Email address"]
[tel* phone-number placeholder "Phone number"]

可能的访问日期：

[date* date-of-visit placeholder "Potential date of visit"]

潜在访问时间：

[select* time-of-visit include_blank "9:30PM " "10:30PM "
 "11:30PM " "12:30PM " "13:30PM " "14:30PM " "15:30PM " "16:30PM"]

选择您的会话：

[select* taught-sessions class:session-choice 
   "KS1 - Classification " 
   "KS1 - Food chains and habitats " 
   "KS2 - Gerald Durrell " 
   "KS2 - Rainforest " 
   "KS2 - Teeth " 
   "KS3 - The Gerald Durrell Story " 
   "KS3 - The Gerald Durrell story " 
   "KS3 - Ethics illegal trade in wildlife" 
   "KS3 - Biodiversity and conservation explored " 
   "KS3* - Introduction to Durrell " 
   "KS3* - Animal observations** " 
   "KS4 - Animal observations** " 
   "KS4 - Ethics - Mountain chickens " 
   "KS4 - Biodiversity and conservation extended " 
   "KS4* - Microbiology in the workplace** " 
   "AS & A-LEVEL - Animal observations** " 
   "AS & A-LEVEL - Geography case study* "
 ]

有关会议的更多信息：

[textarea Additional-information maxlength:200 
  placeholder "Additional information... 
  e.g physical or learning difficulties"]

[submit "Submit"]

【问题讨论】：

标签： javascript php jquery wordpress contact-form-7

【解决方案1】：

您必须具体说明您的问题。我们不能仅仅看到您的表格就回答您的问题。您将哪个描述针对哪个主题的数据存储在哪里？

你可以做类似的事情，例如下拉菜单有

class="subject"

然后您从中选择任何主题。

 sub1="MATH";
 SUB2="English";
 Desc1="MATH is Love";
 Desc2="English is important";

$(".subject").change(function()
     var sub= (this).val();
 if(sub== sub1)
   {
      $(".desc").html(Desc1);
   }
  else{
     $(".desc").html(Desc2);
   }
   });

desc 是给要显示描述的 div 或输入的类。

【讨论】：