在 JQuery 中提交表单答案

【问题标题】：Submit form in JQuery在 JQuery 中提交表单
【发布时间】：2012-11-11 20:18:23
【问题描述】：

在我的 Rails 视图中，我有一个 HTML 表单

<form name="input">
Username: <input type="text" name="user"> <br/>
<input type="button" id="submit_form" value="Submit">
</form>

点击提交按钮时，我想用JQuery调用控制器download，同时也传递user参数。（在routes.rb 我指定match "download" => "Posts#download"）

我应该如何使用 JQuery 来做到这一点？

$("#submit_form").click(function() {
  // what should I put here?
});

【问题讨论】：

另外，您应该在表单中添加一个 id 以便能够通过 jQuery 更轻松地选择它。

标签： jquery ruby-on-rails forms

【解决方案1】：

你可以这样做：

/* attach a submit handler to the form */
  $("#submit_form").submit(function(event) {

    /* stop form from submitting normally */
    event.preventDefault(); 

    /* get some values from elements on the page: */
    var $form = $( this ),
        term = $form.find( 'input[name="user"]' ).val(),

    /* Send the data using post and fire some callback */
    $.post( "/download", { s: term },
      function( data ) {
       //some callback
      }
    );
  });

来源：从 jQuery 文档修改 example

【讨论】：

这很准确。

【解决方案2】：

$("#submit_form").click(function() {
  // what should I put here?
  $('form[name="input"]').submit();
});

或者您可以使用 id="submit_form" 将 type="submit" 设置为您的输入，而不设置任何处理程序

【讨论】：

【解决方案3】：

我不是Rails开发者但是不能把路由放在forms action中然后使用submit，如下：

<form name="input" action="/Download">

$("#submit_form").click(function() {
  $("#input").submit();
});

【讨论】：

【解决方案4】：

jQuery 提供了一个 .submit() http://api.jquery.com/submit/

您不需要绑定到输入按钮的点击方法，因为提交按钮已经知道提交表单。

你要找的是

$("form[name='input']").submit(function(){
  //do something before function gets submitted
});

在该函数中，您需要对服务器进行 ajax 调用并使用 preventDefault 取消表单的原始提交。

【讨论】：

【解决方案5】：

如果我理解正确，您正在尝试通过 jQuery 提交表单，而不是正常的后期处理。我建议使用jQuery's form submit function

基本上你会寻找类似的东西：

$("form").submit(function() {
  var data = $(this).serialize();
  $.ajax({
    url: "controller/action",
    type: "POST",
    data: data
    // plus anyother options you are wanting
  }).done(function() { 
    // a success function
  });
  return false;
  });

希望对您有所帮助。

【讨论】：