投稿用のJavaScriptのボタン

Question

2つのボタンを使ってアイテムを左側から右側に移動できるフォームを作成しました。ユーザーが項目の追加を完了すると、&という名前でグループを保存できます。少なくとも、それはどのように動作するはずです。代わりに、1つのアイテムを追加し、「右に移動」ボタンをクリックすると、POSTアクションが起動します。 submit_tagではなく、私のjavascript駆動ボタンがPOSTアクションを発しているのはなぜですか？

ここではフォームはview/settings/global.html.erb次のようになります。

ビューでフォームコード：ビューsettings_controller.rbをロードするための私のコントローラで

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

：

class SettingsController < ApplicationController 
    before_action :get_company_and_locations 

    def global 
    get_network_hosts 
    end 

end 

は、

POSTアクションはcall network_host_groups_controller#createをINGの、私はちょうど今、デバッグしようとしていた：

class NetworkHostGroupsController < ApplicationController 

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

end 

そして、私のルートは以下のとおりです。クリックでsubmitへ

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

Answer 1

ボタン要素のデフォルト。

type="button"属性を追加して、ボタンをクリックするとフォームを送信しないようにブラウザに指示します。あなたはまた、デフォルトを防ぐことができますされ、 `false`を返すまたはお電話[` preventDefault`]（https://api.jquery.com/event.preventdefault/）にあなたのjavascript `click`ハンドラを変更することができます

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