带有 AJAX 和 POST <input type=submit> 的 Rails 表单答案

【问题标题】：Rails Form with both AJAX and POST <input type=submit>带有 AJAX 和 POST <input type=submit> 的 Rails 表单
【发布时间】：2016-01-02 12:23:06
【问题描述】：

这个问题与this one 非常相似，但我的问题没有完全解决。

所以我确实有一个带有许多按钮的表单。每个按钮都有不同的提交信息：使用 rails submit_tag helper 生成 HTML 之类的

<!-- AJAX buttons -->
<input type="submit" value="Preview" name="commit">
<input type="submit" value="Send me a preview" name="commit">
<!-- POST buttons -->
<input type="submit" value="Send to me" name="commit">
<input type="submit" value="Send to all" name="commit">

表单原本是非 AJAX 的，但我想通过 AJAX 提交，上面有两个按钮。但是（并且在前面提到的问题中没有解决这个问题），我还必须确保我在参数中传递了正确的提交消息。

使用这样的代码

<% text = "Preview" # etc.
<%= submit_tag( text, 
        onclick: " 
            var form = $(this).closest('form');
            form.data( 'remote', 'true' );
            form.submit();
            form.removeAttr('data-remote');
            return false") %>

不起作用，因为调用form.submit() 将提交表单而没有按下按钮的提交消息。

该表单旨在多次使用：示例场景将是

用户想要发送可自定义的电子邮件
用户填写表格，单击“预览”按钮 (AJAX)，这会产生快速预览。他可以根据需要重复多次。
用户想要获得私人预览，他点击“给我发送预览”，所以他收到了一封实际的电子邮件（仍然是 AJAX）
用户对一切都很满意并希望发送电子邮件。因此，他单击了一个 POST 按钮，该按钮将更改页面并显示确认消息

【问题讨论】：

请解释反对意见。我不明白这个问题是如何违反准则的......？

标签： javascript ruby-on-rails ajax

【解决方案1】：

好的，这是我找到的解决方案

Rails 视图（ajax 这里只是一个布尔值，我们是否希望按钮在 AJAX 中执行）

<%= submit_tag( text, data: data, 
    onclick: (ajax ? "ajaxSubmit(event)" : ""), class: html_class) %>

javascript代码

function ajaxSubmit(e){
    e.preventDefault();
    var target = $(e.target)
    var form = target.closest('form')
    var tmp = form.data('remote')
    var input = $('<input />').attr('type', 'hidden')
        .attr('name', "commit")
        .attr('value', target.val())
        .appendTo(form);
    form.data('remote', true)
    form.submit()
    if(!tmp){
        form.removeAttr('data-remote');
    }
    input.remove()
    return false;
}

【讨论】：