Craig Craig - 6 months ago 27
Javascript Question

How can I get my JavaScript to work on website? (Current code is working on Fiddle just not on website)

I want to create a Character Counter for a Custom Field on a Product Page. I am trying to use the following JavaScript and HTML code to achieve such a function:

HTML:

<div class="fields-group-1">

<table class="fields_table product-custom-text-wrapper" cellspacing="0">
<tbody>
<tr>
<td class="label"><label class=" product-custom-text-label" for="custom_text">Custom Text</label></td>
<td class="value">
<input type="text" class="field product-custom-text" name="custom_text" value="" placeholder="Enter Custom Text ..." maxlength="16" type="text" pattern="mandatory" mandatory="no" />
<span class="validation-message is-valid-1"></span>
</td>
</tr>
</tbody>
</table>


</div>

<span id="character_count"></span> //This is where I am attempting to output the Character Count.


JavaScript:

<script type="text/javascript">
$('.product-custom-text').keyup(updateCount);
$('.product-custom-text').keydown(updateCount);

function updateCount() {
var cs = $(this).val().length;
$('#character_count').text(cs);
}
</script>


When running this within the Fiddle program, I can generate the Character Counter. However, when I place the above code into the website, the Character Counter does not seem to work. I have checked the Source Code and all of the coding is there.

I can see that someone else has experienced a similar issue to myself, as per th question at: Code works in fiddle, but not on webpage. As a newbie to JavaScript, I am not 100% sure of a suitable fix.

Is anyone able to point me in the right direction as to the relevant changes I would need to make in order for my above coding to work?

Answer Source

You can change your binding like below:

jQuery(document).on('keyup', '.product-custom-text', updateCount);
jQuery(document).on('keydown', '.product-custom-text', updateCount);

This binding does not require to be inside $( document ).ready(function() { function, because it will work for available DOM elements

You need to use document.ready for keyup event. Before this moment DOM elements you're referring in jQuery selectors aren't available.

jQuery(document).on('keyup', '.product-custom-text', updateCount);
jQuery(document).on('keydown', '.product-custom-text', updateCount);

function updateCount() {
    var cs = $(this).val().length;
    jQuery('#character_count').text(cs);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fields-group-1">    

    <table class="fields_table  product-custom-text-wrapper" cellspacing="0">
        <tbody>
            <tr>
                <td class="label"><label class=" product-custom-text-label" for="custom_text">Custom Text</label></td>
                <td class="value">
                <input type="text" class="field product-custom-text" name="custom_text" value="" placeholder="Enter Custom Text ..." maxlength="16" type="text" pattern="mandatory" mandatory="no"  />
                    <span class="validation-message is-valid-1"></span>
                </td>
            </tr>
        </tbody>
    </table>


</div>

<span id="character_count"></span>

Edit: As per discussion, In wordpress sites, there might be chances of having $ confliction, so try using jQuery insted of $. Updated answer!