【问题标题】:How to submit two forms with one submit button with rails and javascript如何使用一个带有rails和javascript的提交按钮提交两个表单
【发布时间】:2013-10-09 00:10:15
【问题描述】:

在要求用户提供帐户详细信息之前,我需要允许用户输入评论并提交。提供这些详细信息后,它们将用于创建新用户,并且他们写的评论也被提交并属于该新用户。目前,我根本不知道如何在两个表单上触发提交操作,将所有信息传递给服务器以执行这些任务。

基本上是我想要的:

  • 用户撰写评论,提交
  • 提交按钮显示联系信息表单
  • 用户填写,提交
  • 两种形式的数据都已提交

我有什么:

_feedback.html.erb

  <%= simple_form_for [@post, Comment.new] do |f| %>
      <%= f.input :body, :label => false, :input_html => { :maxlength => '500', :rows => '4', :placeholder => '...'}  %>
      <% if current_user.guest != true %>
        <%= f.button :submit, "Submit" %>
      <% end %>
  <% end %>
  <% if current_user.guest == true %>
    <input type="submit" value="Submit" onclick="contactDisplay()"></input>
  <% end %>

show.html.erb

<% if current_user.guest == true %>
  <div id="contact" class="post-contact">
    <%= simple_form_for(@user, :html => { :multipart => true }, defaults: { label: false, required: true }) do |f| %>
      <%= f.input :name, :input_html => { :placeholder => 'Your Name', :id => 'name'} %>
      <%= f.input :email, :input_html => { :placeholder => 'Your Email', :id => 'email'} %>
    <% end %>
    <input type="submit" value="Submit" onclick="submitContact()"></input>
  </div>
<% end %>
<%= render 'posts/show/feedback' %>

posts.js

function contactDisplay(){
var contact = document.getElementById('contact'); 
    contact.style.display='block';
}

function submitContact(){
    document.getElementById("new_comment").submit();
    document.getElementById("new_user").submit();
}

【问题讨论】:

  • 你不需要两份表格,为什么不一份呢?
  • 您不能同时提交两个表单。见stackoverflow.com/a/17541013/134115
  • @Ibu 他们是不同的型号。
  • @Vaheh 我认为这是不可能的。我的问题是如何去做。我很欣赏这个链接,但它不是很有帮助,因为我对 AJAX 不是很了解
  • 你将不得不在这个上使用 ajax。如果你用jQuery

标签: javascript ruby-on-rails forms simple-form


【解决方案1】:

您可以使用嵌套表单 :) 这是一个关于如何做到这一点的 railscasts http://railscasts.com/episodes/196-nested-model-form-part-1

【讨论】:

    猜你喜欢
    • 2014-10-08
    • 2014-11-25
    • 2016-04-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-04-12
    • 2011-06-03
    相关资源
    最近更新 更多