user3227726 user3227726 - 13 days ago 6
HTML Question

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

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.

Answer

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