提交表单后渲染表单

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"}/