在 jQuery 中检索动态生成的 textarea 的值？

Posted 2023-05-09

【中文标题】在 jQuery 中检索动态生成的 textarea 的值？

【英文标题】：Retrieve value of dynamic generated textarea in jQuery?

【发布时间】：2012-06-16 02:11:40

【问题描述】：

<div id="post">
  <form name="postComment" id="commentPost6" action="javascript:void(0);" method="post"
    target="_top" onsubmit="return commentPost(6)">
     <textarea name="comment" id="comment6" class="commentText" 
        cols="10" rows="3" accesskey="1">
     </textarea><br>
     <input type="submit" name="submit" id="commentpost" value="Submit" accesskey="2">
  </form>
</div>

这是我的 post div 标签，我有 multiple div 标签具有相同的 id="post"， 表单和字段是动态生成的，并且 form 和 textarea 的 id 都是唯一的，因此在检索这些值时没有问题，点击提交时，我调用 commentPost 方法。

function commentPost(postId)

    alert("Inside commentpost");
    //how to retrive/access value of textarea here

如何获取 textarea 的值？？ 以防万一

是的，我知道拥有多个具有相同 ID 的元素是无效的 html。

【问题讨论】：

是的，你知道它是无效的。是的，您仍然不明白为什么每个人都说您应该编写有效的 HTML。改用类。

好的，bažmegakapa 如果我使用类，那么我将如何检索值，因为我尝试使用类但它对我没有好处，所以告诉我，如果我错了，我在哪里

【参考方案1】：

$('#comment'+postId).val();

您为什么不简单地使用类而不是 id？ （帖子）

【参考方案2】：

function commentPost(postId)

    alert("Inside commentpost");
    aler($("#commentPost"+postId).find('textarea').val());

这将为您提供 textarea 值

【参考方案3】：

修改后的 HTML（post 现在是一个类，javascript: 从 action 中删除）：

<div class="post">
  <form name="postComment" id="commentPost6" action="" method="post"
    target="_top" onsubmit="return commentPost(this)">
     <textarea name="comment" id="comment6" class="commentText" 
        cols="10" rows="3" accesskey="1">
     </textarea><br>
     <input type="submit" name="submit" id="commentpost" value="Submit" accesskey="2">
  </form>
</div>

Javascript：

function commentPost(form)

    var textAreaValue = $(form).find('.commentText').val();
    console.log(textAreaValue);

---

更好的是，您应该开始编写高级事件处理程序，而不是这些内联的（onsubmit="" 和朋友）。 jQuery 为此提供了great methods。

$('.post form').submit(function (e) 
    var textAreaValue = $(this).find('.commentText').val();
    console.log(textAreaValue);

    e.preventDefault(); //to prevent default event - which is form submission
);

内联事件处理程序非常适合快速测试，但它们很快会导致无法维护、混乱的 HTML 源代码。你应该遵守Separation of Concerns的规则。

【参考方案4】：

试试这个：

取决于您是否以上述形式传递与您的命名标准相匹配的 postId，您有 6 个。

function commentPost(postId) 
        alert("Inside commentpost");
        // One way.
        var $testAreaValue = $('textarea.commentText#comment' + postId).val();
        alert($testAreaValue);
        // second way.
        $testAreaValue = $('#comment' + postId).val();
        alert($testAreaValue);

希望对你有帮助。