CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Mahogan
Mahogan

Reputation: 63

Javascript to automatically Count Characters in Form Input Box and Enter result in Form Quantity Input Box?

I have a working javascript that will automatically Count the Characters of a TextArea and input the Result in another text area.

However, I am trying to modify this to work with an existing shopping cart form and in this form it must be in an fails.

This form has an area where the customer types text, the script will count the characters and the result number is the quantity of items that they purchase.

Below is the example of my code where the works. Included is my shortened example of my shopping cart form.

How can I get this to work with the form?

Here is my javascript:

<script type="text/javascript">
function countChars(countfrom,displayto) {
  var len = document.getElementById(countfrom).value.length;
  document.getElementById(displayto).innerHTML = len;
}
</script>

Here is my HTML:

<body>

    <!-- This example updates correctly to a <textarea> HOWEVER, it needs to work with a Form <input type="text";> as shown below -->

    <textarea id="enter-your-text-input" onkeyup="countChars('enter-your-text-input','character-count-input');" name="product1[]" maxlength="200" value="" style="position:absolute; left:27px; top:28px; width:320px; color:#4B4B4B; font-size:18.0px; height:26px; width:320px;/*Tag Style*/"></textarea>
    <textarea id="character-count-input" name="qty1" value="characters" style="position:absolute; left:247px; top:72px; width:100px; color:#4B4B4B; font-size:18.0px; height:26px; width:100px;/*Tag Style*/"></textarea>

    <!-- I NEED to Count the Characters and display the results in this form-->
    <form id="shopping-cart-form" onsubmit="return validate_shopping-cart-form(this)" action="http://www.someaddress.com" method="post" target="cart" style="margin:0;position:absolute;left:0px;top:120px;width:372px;height:546px;">
        <input type="text" id="enter-your-text-input" onkeyup="countChars('enter-your-text-input','character-count-input');" name="product1[]" maxlength="200" value="" style="position:absolute; left:27px; top:28px; width:320px; color:#4B4B4B; font-size:18.0px; height:26px; width:320px;/*Tag Style*/"></textarea>
        <input type="text" id="character-count-input" name="qty1" value="characters" style="position:absolute; left:247px; top:72px; width:100px; color:#4B4B4B; font-size:18.0px; height:26px; width:100px;/*Tag Style*/"></textarea>
    </form>

</body>

Upvotes: 1

Views: 5018

Answers (1)

Xriuk
Xriuk

Reputation: 392

With an <input> element you need to assign the value via .value, here's the corrected code:

function countChars(countfrom,displayto) {
  var len = document.getElementById(countfrom).value.length;
  document.getElementById(displayto).value = len;
}

Upvotes: 4

Related Questions