如何将数据从javascript返回到html表单?

时间:2014-09-23 14:42:39

标签: javascript jquery html

我想知道是否有人可以提供帮助?我想要做的是从javascript代码中检索单词计数到一个表单,然后将其与表单的其余部分一起传递给php,这将检查单词计数是一定长度,否则它不会成为提交。

javascript如下。

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

我的问题是将wordCount返回到表单中的隐藏字段。我对javascript不太好,我不知道如何修改此代码使其工作。其余我可以搞清楚,但我被困在这里。感谢您的帮助,非常感谢。

5 个答案:

答案 0 :(得分:1)

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

使用.val()代替.html(),因为.val()引用输入字段的值。

答案 1 :(得分:0)

表单中的HTML应包含隐藏的输入字段:

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

然后在你的JS里面:

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

一起嵌入你的功能:

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

答案 2 :(得分:0)

如果表单中有INPUT字段,请使用val()

$( '#的wordCount')。VAL(的wordCount)

这适用于这样的字段:

请注意“id”和“class”之间存在差异。 jQuery允许您根据属性选择元素。使用“#”选择“id”属性,就像你在CSS中一样。因此,请确保在隐藏字段中定义了“id ='wordCount'”。

答案 3 :(得分:0)

您展示的代码不仅仅是javascript它还包含jquery,请确保包含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

使用javascript,您可以为输入使用值,也可以为div或其他基于文本的元素使用innerHtml

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

另外使用表单提交而不是考虑使用jquery $ .ajax(表单提交没有任何问题,但是知道jquery也有好处,例如你来做异步请求

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

您将需要使用隐藏字段,例如以下内容,并以

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

然后使用三种方法设置其值,即元素html,元素值或javascript变量$('#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

答案 4 :(得分:0)

看看这个http://www.hscripts.com/scripts/JavaScript/word-count.php

网上有很多例子,只是google&#34; javascript计算文本框中的单词&#34;

一些重要的说明:

  • 一个没有空格的很长的字符串仍然只有一个字,所以不要忘记设置字段的最大长度
  • 如果您这样做是作为一种验证,请注意您不能信任表单字段,因为它可以轻松操作,所以不要忘记检查服务器端的字数。表格已提交。