Question

I want to create a new object based on certain parameters.

In my new.html.haml

%table
   %thead
      %tr
        %td
          = f.label: type
         %td
           = select_tag :question_type, options_for_select
    %tbody#content

javascript:

$('#question_type').change(function(){
     $.ajax({
        data: { question_type: $(this).val() },
        url: window.location.href,
        dataType: 'script'
     });
  });

In my new.js.haml

$('#content').html("#{escape_javascript(render(:partial => "question_form"))}");

in _question_form.html.haml

= form_for @question, :url => {:action => "create"} do |f|
  %tr
    %td{:style => 'text-align:right;'}
      = f.label :name
    %td
      = f.text_field :name
  %tr
    %td
    %td
      = f.button :Submit, :value => 'Create'

In my controller

def new
   @question = Question.new

   respond_to do |format|
     format.html
     format.js
   end
  end

  def create
   @question.save

   respond_to do |format|
     format.html (redirect_to questions_path)
     format.js
   end
  end

All are working fine, But I can’t able to submit the form after entering question name. How to get this form to submit?

Answer 1

the problem lies in your html structure. you should put the form outside the table.

= form_for @question do |f|
  %table

be reminded that this will submit the question type which you can just ignore in your create action

UPDATE:

# new.html.haml
#form-content= render 'question_form'

# _question_form.html.haml
= form_for @question, :url => {:action => "create"} do |f|
  %table
    %thead
      %tr
        %td= f.label: type
        %td= select_tag :question_type, options_for_select
    %tbody
      - if params[:question_type].present?
        %tr
          %td{:style => 'text-align:right;'}= f.label :name
          %td= f.text_field :name
        %tr
          %td
          %td= f.button :Submit, :value => 'Create'

# new.js.haml
$('#form-content').html("#{escape_javascript render("question_form")}");