Rails Javascript Tasten, die Post verursachen

Question

Ich habe ein Formular erstellt, wo ein Benutzer Elemente von der linken Seite auf die rechte Seite mit zwei Schaltflächen verschieben kann. Nachdem der Benutzer seine Elemente hinzugefügt hat, können sie den Namen & speichern, um die Gruppe zu speichern. Zumindest sollte es so funktionieren. Sobald ich ein Element hinzufüge und auf die Schaltfläche "Nach rechts bewegen" klicke, wird die POST-Aktion ausgelöst. Warum feuern meine Javascript-gesteuerten Tasten die POST-Aktion anstelle der submit_tag?

Hier ist, was die Form sieht aus wie view/settings/global.html.erb:

Die Codeform in der Ansicht:

<%= 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> 

In meinem Controller für die settings_controller.rb Ansicht Laden:

class SettingsController < ApplicationController 
    before_action :get_company_and_locations 

    def global 
    get_network_hosts 
    end 

end 

Die POST-Aktion ist Anruf ing network_host_groups_controller#create, die ich versuche nur, gerade jetzt zu debuggen:

class NetworkHostGroupsController < ApplicationController 

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

end 

Und meine Routen sind:

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

Answer 1

Button-Elemente standardmäßig submit auf Klick.

Fügen Sie ein type="button" Attribut hinzu, um dem Browser anzuzeigen, dass beim Klicken auf die Schaltfläche das Formular nicht gesendet werden sollte!

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