Switching contact forms generated from shortcode via jquery [WordPress]

0 Views

I have 2 contact forms using contact form 7 and I am trying to switch between the 2 of them using a radio button. I have tried the following with normal text but it seems to be acting up with the shortcode.

Here is what I have:

<p><input type='radio' name='contact_type' value='1' />&nbsp; Sales</p>
<p><input type='radio' name='contact_type' value='2' />&nbsp; Support</p>
<div id='sales' style="display: none;">[contact-form-7 id="261" title="Sales"]</div>
<div id='support' style="display: none;">[contact-form-7 id="260" title="Support"]</div>

<script type="text/javascript" src="/scripts/updatepage.js"></script>
<script type="text/javascript">
$('input[name=contact_type]').on('change', function(){
    var n = $(this).val();
    switch(n)
    {
            case '1':
                  $('#sales').style.display = "block";
                  $('#support').style.display = "none";
                  break;
            case '2':
                  $('#support').style.display = "block";
                  $('#sales').style.display = "none";
                  break;
        }
    });
</script>
  • this is all being done in-line at the moment hence no check for DOM loading.
Post Views: 0

Related posts

Leave a Reply

2 comments

  1. You are mixing a Jquery obejct with javascript.

    For example, the object $('#support') has no attribute .style.display

    Try this:

    $('input[name=contact_type]').on('change', function(){
    var n = $(this).val();
    if(n == '1'){
        $('#sales').show();
        $('#support').hide();
    }
    else {
        $('#support').show();
        $('#sales').hide();        
    }
});

    The WordPress shortcode should not effect the the two parent <div>s, just make sure the HTML looks correct after WordPress has rendered the contact forms.

  2. Here is jquery function for that 

    $( document ).ready(function() {
    $('input[name=contact_type]').change(function(){
        var n = $(this).val();
        switch(n)
        {
        case '1':
            $('#sales').show();
            $('#support').hide();
            break;
        case '2':
            $('#support').show();
            $('#sales').hide();
            break;
        }
    })
});