How can I validate length of text after form and data is loaded?

I have developed simple form that users will input data.  I've written validation scripts to show the user how many characters remain available.  The script works great so long as the form that is loaded is expecting new data entry.  Now I'd like to use that same form for users to edit previously entered data.  What do I need to change in this script so the length of data loaded is taken into account when the window is loaded?

My form has an input
<input type="text" name="fieldname" id="fieldname"       maxlength="20" placeholder="Field Name"
value="<?php echo $row['FieldName']; ?>">

and my form has a feedback message
<p style="text-align: right" id="feedback_fieldname"></p>

Here is my validation script:
<!--Inform User Remaining Length of input fields-->
<script>
window.onload = function() {

    var text_max_fieldname = 20;
    $('#feedback_fieldname').html(text_max_fieldname + ' characters remain ');

    $('#fieldname').keyup(function() {
        var text_length_fieldname = $('#fieldname').val().length;
        var text_remaining_fieldname = text_max_fieldname - text_length_fieldname;

        $('#feedback_fieldname').html(text_remaining_fieldname + ' characters remain ');
    });

}
</script>
SueJStevensDatabase Application DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Brian TaoSenior Business Solutions ConsultantCommented:
Add
$('#fieldname').keyup();

Open in new window

to the last line of your window.onload function, so that it becomes
window.onload = function() {

    var text_max_fieldname = 20;
    $('#feedback_fieldname').html(text_max_fieldname + ' characters remain ');

    $('#fieldname').keyup(function() {
        var text_length_fieldname = $('#fieldname').val().length;
        var text_remaining_fieldname = text_max_fieldname - text_length_fieldname;

        $('#feedback_fieldname').html(text_remaining_fieldname + ' characters remain ');
    });
    $('#fieldname').keyup();
}

Open in new window


It fires the keyup event after you declare the handler.  See https://jsfiddle.net/dvdyhdps/

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SueJStevensDatabase Application DeveloperAuthor Commented:
Brian,
Thank you!  I really appreciate the feedback.  Because I am a newbie, I especially appreciate that you created a model via jsfiddle for me.  Closing this question and awarding points.
SueJStevensDatabase Application DeveloperAuthor Commented:
I appreciate the quick response and thorough answer.
Brian TaoSenior Business Solutions ConsultantCommented:
Glad that helps.  Thanks for the points.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.