如何在bootstrap模式中获取保存按钮以提交表单

时间:2013-03-30 04:44:03

标签: ruby-on-rails forms twitter-bootstrap

我有一个这样的表格:

.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;"

我有一个模态我正在加载里面的表格如下:

  .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

我想知道如何获取保存更改按钮以提交表单。我是否需要添加javascript才能使其正常工作?

1 个答案:

答案 0 :(得分:0)

您需要确保输入和按钮属于一个form元素。使用当前标记可能很难实现。

或者,您可以使用JavaScript提交表单,但第一种方法要好得多,因为您可以免费获得的许多功能