您如何將數據從javascript返回到html表單？

Question

我想知道是否有人可以提供幫助？ 我想做的是從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不太滿意，並且不確定如何修改此代碼以使其正常工作。 其余的我可以弄清楚，但被困在這里。 謝謝您的幫助，不勝感激。

Answer 1

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

使用.val（）而不是.html（），因為.val（）引用輸入字段的值。

Answer 2

表單內的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);
   });

Answer 3

如果表單中有INPUT字段，請使用val（）

$（ '＃的wordCount'）。VAL（的wordCount）

這將適用於這樣的領域：

請注意，“ id”和“ class”之間是有區別的。 jQuery允許您根據元素的屬性選擇元素。 就像使用CSS一樣，“ id”屬性將通過“＃”進行選擇。 因此，請確保在隱藏字段中定義了“ id ='wordCount'”。

Answer 4

您顯示的代碼不僅是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，您可以將value用作輸入，也可以將innerHtml用作div或其他基於文本的元素

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

Answer 5

看看這個http://www.hscripts.com/scripts/JavaScript/word-count.php

在線上有很多示例，例如google“ javascript統計文本框中的單詞”

一些重要的注意事項：

• 沒有空格的非常長的字符串仍然是1個單詞，因此請不要忘記設置字段的最大長度
• 如果您將其作為一種驗證，請注意您不信任表單字段這一事實，因為它很容易操作，因此，提交表單后，請不要忘記在服務器端檢查字數。