Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 23, 2018 at 12:16 pm #1013297
    lion73

    Hi,
    I have a contact module with two dropdown list (avia_2_1 and avia_3_1) controls.
    I need:
    Second dropdown list not visible when page loaded but visible if a specific value is selected in first dropdown list.
    What is best solution?
    Thanks in advance

    • This topic was modified 6 years, 2 months ago by lion73.
    September 24, 2018 at 4:46 am #1013464
    Rikard

    Hey lion73,

    There is no functionality for that by default in the Contact Form element unfortunately so I think you will need to use a third party plugin. Maybe you could try using this: https://wordpress.org/plugins/cf7-conditional-fields/, together with Contact Form 7?

    Best regards,
    Rikard

    September 24, 2018 at 7:58 am #1013501
    lion73

    Hi Rikard, no this is not a solution for me. I don’t want plugins. I need solve this by code.
    Can someone help me please?
    Thank you

    • This reply was modified 6 years, 2 months ago by lion73.
    September 24, 2018 at 8:52 am #1013515
    Rikard

    Hi,

    We can’t provide custom solution like that unfortunately, it’s beyond the scope of our support. I don’t get why you don’t want to use plugins though, plugins contain code, it’s no different from having code in for instance functions.php.

    Best regards,
    Rikard

    September 24, 2018 at 12:52 pm #1013581
    lion73

    Dear Rikard,
    I’m sorry you do not understand the difference of using a plugin like contact form 7 instead of a few lines of code. Moreover contact form 7 uses an ugly graphic that is not very different to the theme.
    I will try to write the necessary lines of code by myself. Someting like this:
    <script type=”text/javascript”>
    {$add_jquery}
    function showDropdownList() {
    if ($(‘#element_avia_2_1’).val() == ‘MYVALUE’) {
    $(‘#element_avia_3_1’).show();
    } else {
    $(‘element_avia_3_1’).hide();
    }
    }
    </script>
    if ($element->id== ‘MYID’) {
    $add_event = ‘onchange=”javascript:showDropdownList()”‘;
    }
    However I close the discussion with you and ask anyway if someone can propose what I asked.

    Someone can help me please?

    PS
    My two dropdown list in html result as
    <p id=”element_avia_2_1″ class=” first_form form_element form_element_third”>
    and
    <p id=”element_avia_3_1″ class=” form_element form_element_third”>
    To refer to one of these in the css, for example to hide a listbox which is the correct syntax?

    “XXX”{
    display: none !important;
    }
    with #element_avia_3_1 does not work
    with .form_element form_element_third does not work
    Regards

    September 24, 2018 at 2:00 pm #1013615
    Dude

    Hi,

    Please try this code:

    
function avia_footer_scripts_conditional_form(){
?>
<script type="text/javascript">
jQuery("#element_avia_3_1").hide();
setTimeout(function(){ jQuery("#avia_2_1").trigger('change'); }, 500);
jQuery("#avia_2_1").change(function(){
   if(jQuery(this).val()== "Show")
   {    
       jQuery("#element_avia_3_1").show();
   }
    else
    {
        jQuery("#element_avia_3_1").hide();
    }
});
</script> 
<?php
}
add_action('wp_footer', 'avia_footer_scripts_conditional_form');

    Replace “Show” (without the quotes) with the value you want to use to trigger the second dropdown.

    Best regards,
    Peter

    September 24, 2018 at 2:26 pm #1013632
    lion73

    Hi Dude,
    the function works perfectly and I have solved my problem. Great! Thank you very much!
    Dude Rating: 10 +++
    REGARDS
    Lion

    September 24, 2018 at 2:58 pm #1013647
    Dude

    Hi,

    Great, glad I could help you :)

    Best regards,
    Peter

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Change visibility of contact module dropdown list control’ is closed to new replies.