javascript - 使用参数列表调用表单提交上的方法

Question

我正在捕获表单提交事件并将 div 添加到 DOM，代码http://jsfiddle.net/testtracker/7rkX4/7/ 现在我想将一些参数传递给函数，如评论者的姓名、添加时间评论等.我希望它是这样的。

html

<form onsubmit="addComment('john deo','post_id')">
    <input ......>
    <input ......>
</form>

javascript

function addComment(commenter_name,post_id){
  perform operation....
}

Answer 1

您发布的代码工作正常。它在 jsfiddle 中不起作用的原因是因为document.ready默认情况下您的函数是在一种块中声明的（请参阅onLoad左侧下拉列表中的？）

绑定事件处理程序的正确方法是在 javascript 中绑定它们。这将避免范围问题。

如果您需要让内联事件处理程序正常工作，您可以将您的函数显式定义为全局：

window.addComment = function (commenter_name,post_id){
    perform operation....
};

Answer 2

例如，您可以将评论者的姓名存储在 html 中。

试试这个（见演示：http: //jsfiddle.net/7rkX4/8/）。

HTML

<div class="post">
  <ul class="comments"></ul>

  <div class="comment_entry">
    <form method="post" action="#">
      <input type="hidden" name="name" value="Neha" />
      <input type="text" name="comment" placeholder="Leave comment" />
      <input type="submit" value="submit" />
    </form>
  </div>
</div>

<div class="post">
  <ul class="comments"></ul>

  <div class="comment_entry">
    <form method="post" action="#">
      <input type="hidden" name="name" value="Danil" />
      <input type="text"  name="comment" placeholder="Leave comment" />
      <input type="submit" value="submit" />
    </form>
  </div>
</div>​

JavaScript

$(document).ready(function () {
  $('.comment_entry form').submit(function (e) {
    e.preventDefault();

    var name = $('input[name="name"]', this).val();
    var comment = $('input[name="comment"]', this).val();

    $(this).parent().prev().append('<li><a class="commenter_name" href="/">' + name + '</a><br />' + comment + '</li>');
  });
});​

Answer 3

如果我理解正确，您想在提交时向表单添加一些变量值对。为什么不使用 向表单添加一些输入字段type="hidden"，然后您可以根据需要在 javascript 代码中修改它们的值。