How to get the save button in bootstrap modals to submit a form

Question

I have a form like so:

.row-fluid
  = form_for(@client) do |f|
    - if @client.errors.any?
      #error_explanation
        %h2
          = pluralize(@client.errors.count, "error")
          prohibited this client from being saved:
        %ul
          - @client.errors.full_messages.each do |msg|
            %li= msg
    .fieldset
      %legend
        = @header
      .control-group
        %label.control-label
          Name
        .controls
          = f.text_field :name, :class => "input-xlarge"
      .control-group
        %label.control-label
          Street Address
        .controls
          = f.text_field :street, :class => "input-xlarge"
      .control-group
        %label.control-label
          Unit
        .controls
          = f.text_field :unit, :class => "input-small", :placeholder => "optional"
      .control-group
        %label.control-label
          City
        .controls
          = f.text_field :city, :class => "input-xlarge"
      .control-group
        %label.control-label
          State
        .controls
          = f.text_field :state, :class => "input-small"
      .control-group
        %label.control-label
          Zip
        .controls
          = f.text_field :zip, :class => "input-small"
    .form-actions
      = f.submit "Save", :class => "btn btn-primary"
      .btn
        = link_to "Cancel", :root, :style => "color: #333; text-decoration: none;"

and I have a modal i'm loading up with the form inside like so:

  .span2.offset2
    %a.btn{"data-toggle" => "modal", :href => "#myModal", :role => "button"} New Client
    / Modal
    #myModal.modal.hide.fade{"aria-hidden" => "true", "aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1"}
      .modal-header
        %button.close{"aria-hidden" => "true", "data-dismiss" => "modal", :type => "button"} ×
        %h3#myModalLabel Modal header
      .modal-body
        %p
          = render "form"
      .modal-footer
        %button.btn{"aria-hidden" => "true", "data-dismiss" => "modal"} Close
        %button.btn.btn-primary Save changes

I'm wondering how to get the Save Changes button to submit the form. Do I need to add javascript to get it to work?

Answer 1

You need to make sure that the inputs and the buttons belong to one form element. This may be hard to achieve with your current markup.

Alternatively, you could submit the form with JavaScript, but the first method is much better, as you get a lot of functionality for free .