提交表单后呈现表单

Question

我试图在提交之前的表单后呈现表单。 例如，假设我有一个仅具有选择下拉菜单的表单。 您选择一个选项，单击“继续”（提交按钮），页面重新加载后，它将根据所选类别呈现新表单。

仅供参考，我正在尝试在Rails应用程序中执行此操作。

这是一个示例： http : //popcornindiana.com/contact-us

Answer 1

您提供的示例是逐页的示例。 如果您要这样做，则您的表单应提交到另一页，然后在其上将下一个表单作为单独的文档一起提供。 请注意，当您提交一种表单时，URL会如何变化。 完全不同的页面。

现在，如果您要制作单页表单（单击“提交”并且页面不会刷新，而是刷新表单），那么您正在使用异步表单提交 。 有许多方法可以做到这一点，包括使用jQuery或AngularJS之类的大型框架进行滚动。

这是两种可能的方法，您可以根据自己的需要选择哪种方法。

我会查找有关这两种方法的教程。 问题的性质表明您可能对此没有足够的经验，因此我想查找有关如何提交表单的教程，然后决定采取哪种方法。

Answer 2

为每个选择项在其参数中编写特定的URL。 并在控制器中使用redirect_to params [：url]。

Answer 3

这实际上比我想象的要容易得多。 我想我会更加困惑，因为我在用Rails术语而不是古旧的HTML进行思考。 无论如何，我将分享完整的解决方案：

1. 为视图创建路由，一个示例是：

    config/routes.rb # this one is the hub, where you choose the contact form you need get 'contact' => 'contacts#contact_page' # this is the 'new' action, where the contact will be created get '/contacts/love-us' => 'contacts#love_us' 

2. 创建控制器动作：

    app/controllers/contacts_controller.rb class ContactsController < ApplicationController before_action :send_email, except: [:create] def create @contact = Contact.new(params[:contact]) @contact.request = request if @contact.deliver @thank = "Thank you!" @message = "We received your inquiry." else @error = "Cannot send message" end end # to the select where you choose the contact form def contact_page end # to the actual contact form def love_us @the_subject = "Tell us you love us" end # def ... other actions to other contact forms private def send_email @contact = Contact.new end end 

3. 在此示例中，为每个表单创建一个视图：

    app/views/contacts/love-us.html.haml .contact-page %h3 Tell Us You Love Us = form_for @contact do |f| .hide = f.text_field :nickname, hint: 'Leave this empty!' = f.hidden_field :mail_subject, value: @the_subject = f.label :name = f.text_field :name = f.label :message = f.text_area :message = f.submit "Send Message" 

4. 创建“ contact_page”视图以选择所需的联系表

    app/views/contact/contact_page.html.haml .contact-form %h5 Select a Subject: %form{class: "emailform", name: "emailform"} %select{name: "location", class: "store-select"} %option{selected: "selected", :value => "/contact"} = "---" %option{value: "/contacts/where-to-buy"} WHERE TO BUY %option{value: "/contacts/nutritional-ingredients"} NUTRITIONAL AND / OR INGREDIENTS %option{value: "/contacts/order-status"} ORDER STATUS AND TRACKING %option{value: "/contacts/product-complaint"} SPECIFIC PRODUCT COMPLAINT %option{value: "/contacts/company-related"} COMPANY RELATED OR OTHER %option{value: "/contacts/love-us"} TELL US YOU LOVE US %input{name: "submit", type: "button", value: "Continue", onclick: "self.location=document.emailform.location.value"}/