What changes to my HTML and JavaScript code do I need to make, in order for my character_count to work?

Question

I am currently working on a WordPress website, with WooCommerce functionality.

One of my tasks is to insert a Custom Text Field on the Product Page, where shoppers are able to assign a piece of text they would like to see on their Product. To speed up the process, I have used a Plugin. To generate this Custom Field, the Plugin Outputs the following code on the Product Page:

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>

I would now like to Output the Character Count to the Product Page. After browsing the net, I can see the following code would help with this:

JavaScript

$('textarea').keyup(updateCount);
$('textarea').keydown(updateCount);

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

At present, the code does not work. Using the HTML above, is anyone aware what I would need to change the 'textarea' in the JavaScript code to, in order for this code to work?

Once I have got the code working, I can then simply enter <span id="character_count"></span> for the code to be complete.

Answer 1

Your jQuery selector $('textarea') is incorrect as there is no textarea in your HTML. It looks like you want to use $('.product-custom-text') instead. Of course it would be better to select it using an ID rather than a class by adding an ID to your input tag.

The selectors for jQuery are the same for CSS. So if you want to exactly select an element, use it's ID.

Your code becomes:

$('.product-custom-text').keyup(updateCount);
$('.product-custom-text').keydown(updateCount);

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

EDIT:

To include a character count only in products which have the text box, I would include it in the same scope of the table and use CSS to position it correctly.

For example:

 $('.product-custom-text').keyup(updateCount); $('.product-custom-text').keydown(updateCount); function updateCount() { var cs = $(this).val().length; $(this).next().next().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> <span id="character_count"></span> </td> </tr> <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> <span id="character_count"></span> </td> </tr> </tbody> </table> </div> 

This update contradicts my former part about wanting to select with an ID, in this case we ant to select by class as there are multiple products on the same page.

Take note of the .next().next() portion of the code. This skips the validation message span and grabs the span for the character count. This can be optimized but works for now. You can try it live in the example window.

Answer 2

You do not have any <textarea> s on the page. Add an id="whatever" attribute to the <input /> element, and change the $('textarea') selectors to $('#whatever') .