Question

我正在尝试使用jQuery获取textarea的值，我将通过AJAX提交，但它无效。

<div class = 'post_updates'>
 <div class = 'comment_updates'>
  <div class = 'commentdiv'>
     <textarea autocomplete = 'off' class='commenttext form-control' rows = '1' 
      placeholder='Have your say...'></textarea>
     <button class='comment btn btn-xs btn-primary onespacedown' value = '7' 
      type='submit'>Comment</button>
  </div>
 </div>
</div>

jQuery代码：

$('.commentdiv').on('click', '.comment', function () {
   var $this = $(this);
   var user_commnet = $this.parents('.commentdiv').find('.commenttext').val();
   var post = $this.val();

   //AJAX code goes here

   alert ('Comment: ' + user_comment + 'ID: ' + post);
})

欢迎任何帮助！

Answer 1

唯一的问题是一个小错字，你写的是user_commnet而不是user_comment。

只需更改一项即可：working JSFiddle

$('.commentdiv').on('click', '.comment', function () {
   var $this = $(this);
   var user_comment = $this.parents('.commentdiv').find('.commenttext').val();
   var post = $this.val();

   //AJAX code goes here

   alert ('Comment: ' + user_comment + 'ID: ' + post);
});

另外，请考虑使用.closest()代替.parents()。略快/更敏感，因为它一旦找到.commentdiv就会停止，而不是一直遍历到根并可能返回多个元素。

Answer 2

一定是

 $('.commentdiv').on('click', '.comment', function () {
   var $this = $(this);
   var user_commnet = $('.commenttext').val();
   var post = $(this).val();

   //AJAX code goes here

   alert ('Comment: ' + user_commnet + 'ID: ' + post);
})

参见演示 http://jsfiddle.net/haduythuan/fgjN4/

Answer 3

我已经尝试过你的代码，如果你将javascript代码包含在$（document）.ready（function（）{......}）中，它就可以工作了。

另外，更改变量名称user_comment。

像这样：

<script>
$(document).ready(function(){
  $('.commentdiv').on('click', '.comment', function () {
   var $this = $(this);
   var user_comment = $this.parents('.commentdiv').find('.commenttext').val();
   var post = $this.val();

   //AJAX code goes here

   alert ('Comment: ' + user_comment + 'ID: ' + post);
  });
});
</script>

Answer 4

更好的方法是使用<form>元素并绑定“submit”事件处理程序，例如

HTML：

<form id="form">
    <textarea name="comment"></textarea>
    <input type="submit">
</form>

JavaScript：

$('#form').on('submit', function (e) {
    // get the <textarea> value
    var val = this.elements.comment.value;

    // prevent form submission
    e.preventDefault();

    // submit value via Ajax
    // ...
});

现场演示： http://jsfiddle.net/r5BYz/3/

我的方法更好，因为：

标记不可知。 TEXTAREA和提交按钮可以在FORM元素中的任何位置。
它为优雅的退化奠定了基础。（如果JavaScript失败，表单通常会提交您在服务器上设置回退机制。）
表单的.elements数组用于访问其TEXTAREA元素，而不是不必要地使用jQuery的DOM遍历方法。

在jQuery中获取textarea的值

4 个答案: