CODEWITHSUNDEEP
jquerywordpresshtmlhidden
Richard Gloudeman
Richard Gloudeman

Reputation: 13

Wordpress is blocking my jquery script

**Script Noob Disclaimer**

On my website I want it to add fields to the contact form to act as line items for my product but for some reason wordpress isn't allowing my functions to work. Here's what it is suppose to do http://jsfiddle.net/LQ85Z/1/ and here's how my site is handling it http://ocblinds.com/order-now/. My website isn't allowing the divs to be shown. Can anyone see what I'm doing wrong?

$(function() {
$('#select').change(function() {
    if ($(this).val() == "1") {
        $('#line_1').show();
        $('#line_2').hide();
        $('#line_3').hide();
        $('#line_4').hide();
        $('#line_5').hide();
        $('#line_6').hide();
        $('#line_7').hide();
        $('#line_8').hide();
        $('#line_9').hide();
        $('#line_10').hide();

        }
    });
});
$(function() {
$('#select').change(function() {
    if ($(this).val() == "2") {
        $('#line_1').show();
        $('#line_2').show();
        $('#line_3').hide();
        $('#line_4').hide();
        $('#line_5').hide();
        $('#line_6').hide();
        $('#line_7').hide();
        $('#line_8').hide();
        $('#line_9').hide();
        $('#line_10').hide();
        }
    });
});
    $(function() {
    $('#select').change(function() {
    if ($(this).val() == "3") {
        $('#line_1').show();
        $('#line_2').show();
        $('#line_3').show();
        $('#line_4').hide();
        $('#line_5').hide();
        $('#line_6').hide();
        $('#line_7').hide();
        $('#line_8').hide();
        $('#line_9').hide();
        $('#line_10').hide();

        }
    });
});
    $(function() {
    $('#select').change(function() {
    if ($(this).val() == "4") {
        $('#line_1').show();
        $('#line_2').show();
        $('#line_3').show();
        $('#line_4').show();
        $('#line_5').hide();
        $('#line_6').hide();
        $('#line_7').hide();
        $('#line_8').hide();
        $('#line_9').hide();
        $('#line_10').hide();
        }
    });
});
    $(function() {
    $('#select').change(function() {
    if ($(this).val() == "5") {
        $('#line_1').show();
        $('#line_2').show();
        $('#line_3').show();
        $('#line_4').show();
        $('#line_5').show();
        $('#line_6').hide();
        $('#line_7').hide();
        $('#line_8').hide();
        $('#line_9').hide();
        $('#line_10').hide();
        }
    });
});
    $(function() {
    $('#select').change(function() {
    if ($(this).val() == "6") {
        $('#line_1').show();
        $('#line_2').show();
        $('#line_3').show();
        $('#line_4').show();
        $('#line_5').show();
        $('#line_6').show();
        $('#line_7').hide();
        $('#line_8').hide();
        $('#line_9').hide();
        $('#line_10').hide();
        }
    });
});
    $(function() {
    $('#select').change(function() {
    if ($(this).val() == "7") {
        $('#line_1').show();
        $('#line_2').show();
        $('#line_3').show();
        $('#line_4').show();
        $('#line_5').show();
        $('#line_6').show();
        $('#line_7').show();
        $('#line_8').hide();
        $('#line_9').hide();
        $('#line_10').hide();
        }
    });
});
    $(function() {
    $('#select').change(function() {
    if ($(this).val() == "8") {
        $('#line_1').show();
        $('#line_2').show();
        $('#line_3').show();
        $('#line_4').show();
        $('#line_5').show();
        $('#line_6').show();
        $('#line_7').show();
        $('#line_8').show();
        $('#line_9').hide();
        $('#line_10').hide();
        }
    });
});
    $(function() {
    $('#select').change(function() {
    if ($(this).val() == "9") {
        $('#line_1').show();
        $('#line_2').show();
        $('#line_3').show();
        $('#line_4').show();
        $('#line_5').show();
        $('#line_6').show();
        $('#line_7').show();
        $('#line_8').show();
        $('#line_9').show();
        $('#line_10').hide();
        }
        });
    });
        $(function() {
        $('#select').change(function() {
    if ($(this).val() == "10") {
        $('#line_1').show();
        $('#line_2').show();
        $('#line_3').show();
        $('#line_4').show();
        $('#line_5').show();
        $('#line_6').show();
        $('#line_7').show();
        $('#line_8').show();
        $('#line_9').show();
        $('#line_10').show();
        }
    });
});​

Upvotes: 1

Views: 147

Answers (2)

Wojciech Zylinski
Wojciech Zylinski

Reputation: 2035

The problem you have comes from the fact that you have an illegal character embedded at the bottom of your orderform.js script:

$(function() {
    $('#select').change(function() {
        if ($(this).val() == "10") {
            $('#line_1').show();
            $('#line_2').show();
            $('#line_3').show();
            $('#line_4').show();
            $('#line_5').show();
            $('#line_6').show();
            $('#line_7').show();
            $('#line_8').show();
            $('#line_9').show();
            $('#line_10').show();
        }
    });
});​

Remove it and it will work fine.

You also seem to have embedded your javascript code inside the page itself (it's present in both the page source AND orderform.js). Remove the duplicate that's in the source code, especially that it also contains illegal characters:

<script type="text/javascript">// <![CDATA[
    $(function() {
    $('#select').change(function() {
        if ($(this).val() == "1") {
            $('#line_1').show();
            $('#line_2').hide();
            $('#line_3').hide();
            $('#line_4').hide();
            $('#line_5').hide();
            $('#line_6').hide();
            $('#line_7').hide();
            $('#line_8').hide();
            $('#line_9').hide();
            $('#line_10').hide();</p>
<p>        }
    });
});

(Notice </p> and <p>)

You can also optimize your code:

$(function() {
    $('#select').change(function() {
        var i, show = parseInt($(this).val(), 10);
        for (i = 1; i <= show; i++) {
            $('#line_' + i).show();
        }
        for (i = show; i < 10; i++) {
            $('#line_' + i).hide();
        }  
    });
});

or by using the other answer to your question (more elegant).

Upvotes: 1

Matthew Blancarte
Matthew Blancarte

Reputation: 8301

WordPress runs jQuery in no-conflict mode, so it isn't globally available as $. The following method will allow you to use $ on .ready():

jQuery(document).ready(function ($) {
  // Put your scripting here...
});

Upvotes: 0

Related Questions