Rails javascript按钮导致帖子

Question

我创建了一个表单，用户可以使用两个按钮将项目从左侧移动到右侧。在用户完成他们的项目添加后，他们可以命名＆amp;保存组。至少这是它应该如何工作。相反，只要我添加一个项目，然后单击“向右移动”按钮，POST操作就会触发。为什么我的javascript驱动按钮会触发POST操作而不是submit_tag？

以下是表单view/settings/global.html.erb：

的内容

视图中的表单代码：

<%= form_tag '/create_host_group', id: "host_group_form", class: "form-horizontal" do %>

  <%= label_tag "Group Name", nil, required: true, class: "control-label col-md-2 col-sm-2 col-xs-12" %>
  <%= text_field_tag 'host_group_name', nil, class: "form-control" %>

  <%= label_tag "Available Hosts", nil, class: "control-label col-md-2 col-sm-2 col-xs-12" %>
  <select id="hosts_available" class="form-control" size="30" multiple>
     <% @network_hosts.each do |n| %>
        <option value="<%= n.id %>"><%= n.ip_address %></option>
     <% end %>
  </select>

  <button id="btnRight" class="btn btn-success"><i class="fa fa-2x fa-forward"></i></button>
  <br/>
  <button id="btnLeft" class="btn btn-danger"><i class="fa fa-2x fa-backward"></i></button>

  <select id="hosts_assigned" class="form-control" size="30" multiple></select>

  <%= submit_tag "Add Group", class: "btn btn-success" %>
<% end %>

<script>
  $("#btnLeft").click(function(){
    var selectedItem = $("#hosts_assigned option:selected");
    $("#hosts_available").append(selectedItem);
  });

  $("#btnRight").click(function(){
    var selectedItem = $("#hosts_available option:selected");
    $("#hosts_assigned").append(selectedItem);
  });
</script>

在我的控制器中加载视图settings_controller.rb：

class SettingsController < ApplicationController
  before_action :get_company_and_locations

  def global
    get_network_hosts
  end

end

POST操作正在调用network_host_groups_controller#create，我现在正在尝试调试：

class NetworkHostGroupsController < ApplicationController

  def create
    group_name = params[:host_group_name]
    assigned_hosts = params[:hosts_assigned]
    puts "#{group_name}: #{assigned_hosts}"
  end

end

我的路线是：

match '/global_settings', to: 'settings#global', via: 'get'
match '/create_host_group', to: 'network_host_groups#create', via: 'post'

Answer 1

按钮元素在点击时默认为submit。

添加type="button"属性以向浏览器指示点击该按钮不应提交表单！

<button type="button" id="btnRight" class="btn btn-success">