Contact Form 7: display/hide div on selection

Question

i'm following this post jquery show-hide DIV with CONTACT FORM 7 dropdown menu (select field) to create a display/hide depending on selection.

I just created the form, but then how wo implement the jquery function? I've to create a html, head, body tags in the contact form 7 page? Beacause i'm trying but does not works.

<select id="reason">
<option>...</option>
<option value="I want to hire you">I want to hire you</option>
<option value="I want to ask you a question">I want to ask you a question</option>
    <option value="I want to say hello">I want to say hello</option>
</select>

<div id="I want to hire you" class="note">I am currently available</div>
<div id="I want to ask you a question" class="note">Feel free to ask</div>
<div id="I want to say hello" class="note">Get in touch</div>

jQuery

$('.note').hide();
$(document).on("change", "#reason", function() {
  $('.note').hide();
  var neededId = $(this).val();
  var divToShow = $(".note").filter("[id='" + neededId + "']");
  divToShow.show();
});

EDIT:

<html>
<head>
<script>
$('.note').hide();

$(document).on("change", "#reason", function () {
$('.note').hide();
var neededId = $(this).val();
var divToShow = $(".note").filter("[id='" + neededId + "']");
divToShow.show();
});
</script>
<body>
<select id="reason">
<option>...</option>
<option value="I want to hire you">I want to hire you</option>
<option value="I want to ask you a question">I want to ask you a question</option>
<option value="I want to say hello">I want to say hello</option>
</select>

<div style="display: none;" id="I want to hire you" class="note">I am currently available</div>
<div style="display: none;" id="I want to ask you a question" class="note">Feel free to ask</div>
<div style="display: none;" id="I want to say hello" class="note">Get in touch</div>
</body>
</html>

Answer 1

Things you forgot are:

To add jquery.js file reference

To wrap code in document.ready and also to mention type of script

Make below changes to your html

<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>"></script>
      //reference to js file from cdn
      <script type="text/javascript">
         $(document).ready(function(){
             //execute code when document is ready
             $('.note').hide();
             $(document).on("change", "#reason", function () {
                 $('.note').hide();
                 var neededId = $(this).val();
                 var divToShow = $(".note").filter("[id='" + neededId + "']");
                 divToShow.show();
             });
        });
      </script>
   <body>
      <select id="reason">
         <option>...</option>
         <option value="I want to hire you">I want to hire you</option>
         <option value="I want to ask you a question">I want to ask you a question</option>
         <option value="I want to say hello">I want to say hello</option>
      </select>
      <div style="display: none;" id="I want to hire you" class="note">I am currently available</div>
      <div style="display: none;" id="I want to ask you a question" class="note">Feel free to ask</div>
      <div style="display: none;" id="I want to say hello" class="note">Get in touch</div>
   </body>
</html>

Contact Form 7: display/hide div on selection

Question

1 answers

solution1
1 ACCPTED 2015-10-23 09:42:40

Contact Form 7: display/hide div on selection

Question

1 answers

solution1 1 ACCPTED 2015-10-23 09:42:40

solution1
1 ACCPTED 2015-10-23 09:42:40