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.

you probably have an html part that goes <input id="wordCount" type="hidden"/> somewhere in the form? — njzk2
– njzk2, Commented Sep 23, 2014 at 14:45
Not sure what the problem is... so you want #wordCount to be hidden? just hide it from css. Else I'm not getting you, sorry :S — tfrascaroli
– tfrascaroli, Commented Sep 23, 2014 at 14:45
or is that a display field for the user ? you could have the hidden input field and simply populate it using $("wordCountValue").val(wordCount); — njzk2
– njzk2, Commented Sep 23, 2014 at 14:46

brso05 · Accepted Answer · 2014-09-23 14:51:15Z

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.

edited Sep 23, 2014 at 14:51

answered Sep 23, 2014 at 14:45

brso05

13.3k2 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Patrick Moore · Accepted Answer · 2014-09-23 14:44:51Z

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);
   });

Nicu · Accepted Answer · 2014-09-23 14:51:48Z

0

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.

answered Sep 23, 2014 at 14:51

Nicu

13 bronze badges

Comments

damko · Accepted Answer · 2014-09-23 15:02:22Z

0

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.

answered Sep 23, 2014 at 15:02

damko

2911 silver badge13 bronze badges

Comments

Kevin Nielsen · Accepted Answer · 2014-09-23 15:04:37Z

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

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related