How do you return data from javascript into a html form?

Question

I was wondering if anyone can help? What I am trying to do is retrieve the word count from javascript code into a form and then pass it into php along with the rest of the form which will check that the word count is a certain length or else it won't be submitted.

The javascript is as follows.

    counter = function() {
       var value = $('#msg').val();

       if (value.length == 0) {
          $('#wordCount').html(0);
          $('#totalChars').html(0);
          $('#charCount').html(0);
          $('#charCountNoSpace').html(0);
          return;
       }

       var regex = /\s+/gi;
       var wordCount = value.trim().replace(regex, ' ').split(' ').length;
       var totalChars = value.length;
       var charCount = value.trim().length;
       var charCountNoSpace = value.replace(regex, '').length;

       $('#wordCount').html(wordCount);
       $('#totalChars').html(totalChars);
       $('#charCount').html(charCount);
       $('#charCountNoSpace').html(charCountNoSpace);
   };

   $(document).ready(function() {
      $('#count').click(counter);
      $('#msg').change(counter);
      $('#msg').keydown(counter);
      $('#msg').keypress(counter);
      $('#msg').keyup(counter);
      $('#msg').blur(counter);
      $('#msg').focus(counter);
   });

My problem is returning wordCount into a hidden field in a form. I am not too good with javascript and am not sure how to modify this code to make it work. The rest I can figure out but am stuck here. Thank you for your help, it is greatly appreciated.

Answer 1

$('#wordCount').val(wordCount);
$('#totalChars').val(totalChars);
$('#charCount').val(charCount);
$('#charCountNoSpace').val(charCountNoSpace);

Use .val() instead of .html(), because .val() refers to the value of an input field.

Answer 2

Your HTML inside the form should include a hidden input field:

<input type="hidden" id="word_count" name="word_count" value="0" />

Then inside your JS:

$('#word_count').val(wordCount);

All together embedded inside your function:

    counter = function() {
       var value = $('#msg').val();

       if (value.length == 0) {
          $('#wordCount').html(0);
          $('#totalChars').html(0);
          $('#charCount').html(0);
          $('#charCountNoSpace').html(0);
          return;
       }

       var regex = /\s+/gi;
       var wordCount = value.trim().replace(regex, ' ').split(' ').length;
       var totalChars = value.length;
       var charCount = value.trim().length;
       var charCountNoSpace = value.replace(regex, '').length;

       $('#wordCount').html(wordCount);
       $('#word_count').val(wordCount);
       $('#totalChars').html(totalChars);
       $('#charCount').html(charCount);
       $('#charCountNoSpace').html(charCountNoSpace);
   };

   $(document).ready(function() {
      $('#count').click(counter);
      $('#msg').change(counter);
      $('#msg').keydown(counter);
      $('#msg').keypress(counter);
      $('#msg').keyup(counter);
      $('#msg').blur(counter);
      $('#msg').focus(counter);
   });

Answer 3

If you have INPUT fields in your form, use val()

$('#wordCount').val(wordCount)

That would work for a field like this:

Be aware that there's a difference between "id" and "class". jQuery allows you to select elements based on their properties. The "id" property gets selected with "#", just like you'd do it in CSS. So make sure you have that "id='wordCount'" defined in your hidden field.

Answer 4

The Code that you are showing is not just javascript it also includes jquery, please make sure you included jquery

<script src = "http://code.jquery.com/jquery-1.11.1.min.js"></script>
$('#field').val('asdf'); //Sets Value of a input type="text"
$('#field').html('sadf'); //Sets the html of a div

Using javascript you use either value for a input or innerHtml for a div or other text based element

document.getElementById('field').value = 'asdfsadf';
document.getElementById('field').innerHtml= 'asdfsadf';

Also instead of using a form submit consider using jquery $.ajax(there is nothing wrong with form submits but there are benefits to knowing jquery as well such as you came make async requests

http://api.jquery.com/jquery.ajax/

You will want to use a hidden field such as the following and have it in the form

<form id="myform" action='posttome.php'>
    <input type="hidden" id="wordCount"/>
    <input type="submit" value="sbumit"> //Submits Form
</form>

Then set its value by using of of three methods, a an elements html, an elements value, or a javascript variable $('#wordCount').val()

$('#wordCount').val($('#wordCountSoruceDiv').html()); // Sets the value to another divs html
$('#wordCount').val($('#wordCountSourceInput').val()); // Sets the value to another inputs value
$('#wordCount').val(wordCountVariable); // Sets the value to a variable

Answer 5

Have a look at this http://www.hscripts.com/scripts/JavaScript/word-count.php

There are plenty of examples online, just google "javascript count words in textbox"

Some imporntant notes:

• A very long string with no spaces is still 1 word so don't forget to set the max length for fields
• If you are doing this as a sort of validation be aware of the fact that you can not trust a form field because it can be easily manipulated, so don't forget to check the word count on the server side after the form is submitted.