jquery show-hide DIV with CONTACT FORM 7 dropdown menu (select field)

0
votes

I am trying to make a dropdown menu (as required field) with CONTACT FORM 7, which is when each option is selected, then a div that contains a certain message (different message on each options) is showing under that dropdown menu.

My Contact Form 7 select field generated code is something like this:

[select* menu-163 id:reason include_blank "I want to hire you" "I want to ask you a question" "I want to say hello"]


And these 3 sample DIVs, each of them needs to shows up when we move our selection from the first default blank option to any certain defined options:

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


The jquery that I'm using:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/showhidereason.js"></script>
<script>
$(document).ready(function () {
   $('.note').hide();
   $('#reason').change(function () {
      $('.note').hide();
      $('#'+$(this).val()).show();
   });
});
</script>


The problem is:

It seems the jquery code can't get/recognize the ID of the select field, which is #reason that I have defined for my CONTACT FORM 7 dropdown menu. That is why my div (hidden messages) are not showing at all when I select any of the dropdown menu option.

The jquery code above is working fine (div/hidden messages are showing up) when I try making the select field with common HTML code instead of the generated ones from Contact Form 7, but then this very select field/dropdown menu is losing the "required effect" from the contact form validation function (because it's not a Contact Form 7 generated code).

You can see the jquery code is working, as well as the "required effect" is failing at this sample webpage: http://lavertibrands.com/contact/

So, I decided to stick with the generated select field/dropdown code from Contact Form 7, but having this issue on how to make the jquery code recognize the #reason ID in order to make the div (hidden messages) shows up.

Is there any advice for me to make those div showing up? Thank you so much in advance.

2
javascriptjqueryhtmldrop-down-menu

2 Answers

0
votes

The selected value of the "reason" field does not correspond to the #id of your divs.

Try this:

<script>
$(document).ready(function () {
  $('.note').hide();

  $('#reason').change(function () {
    $('.note').hide();
    var val = $(this).val();
    $('#hire').hide();
    $('#question').hide();
    $('#hello').hide();
    if (val == 'I want to hire you') {
      $('#hire').show();
    }
    else if (val == 'I want to ask you a question') {
      $('#question').show();
    }
    else if (val == 'I want to say hello') {
      $('#hello').show();
    }
  });
});
</script>

See DEMO

0
votes

You can change div ids with values, equal to option values. Then on change in select find needed div using option value

HTML:

<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>

JavaScript:

$('.note').hide();

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

Demo is HERE