你如何從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

你在表單內的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 2

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

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

Answer 3

如果你在你的表單輸入字段，使用VAL（）

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

這將工作的領域是這樣的：

請注意，「id」和「class」之間有區別。 jQuery允許你根據屬性選擇元素。 「id」屬性被選擇爲「＃」，就像你在CSS中做的一樣。所以請確保你在隱藏字段中定義了「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 

使用您使用值基於對股利或其他文本輸入或innerHTML的JavaScript的元素

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

而且不是使用表單提交考慮使用jQuery $就（有什麼不對錶單提交但也有知道的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

有很多的例子在線，只是谷歌 「在文本框的JavaScript計數的話」

一些imporntant注意事項：

• 一個很長的字符串沒有空格仍然是1個字，所以不要忘記設置字段的最大長度
• 如果你作爲一種驗證來做這件事，應該意識到你不能信任表單域，因爲它可以很容易地被操縱，所以不要忘記在表單提交後檢查服務器端的字數。