Rails- Using check box to update database without submit button

Question

I am new to rails and I am working on a online shopping project. I want to use a checkbox in the shopping-cart to let user to select whether to buy the product. But I don't like a submit button beside the checkbox. I know I have to use ajax to update the database without the submit button. But I did not make that work. Following is my code.

Here is jquery ajax,

$(document).ready(function(){
    $(".checkbox_submit").change(function(){
        $.ajax({url: {:action => create}, success: function(result){
            $(this).parents('form:first').submit();
        }});
    });
});

And this is my view, the first td is the checkbox

<tr>
    <td style="width: 5%;">
        <%= form_for cart_item, url: cart_item_path(cart_item.product_id), remote: true do |f| %>
            <%= f.check_box(:buy_now, class: "checkbox_submit") %>
        <% end %>
    </td>
    <td style="width: 20%;" >
        <%= link_to(product_path(cart_item.product)) do %><%= image_tag(cart_item.product.image.thumb.url) %><% end %>
    </td>
    <td style="width: 30%;"><%= link_to(cart_item.product.title, product_path(cart_item.product)) %></td>
    <td><%= cart_item.product.price %></td>
    <td>
        <%= form_for cart_item, url: cart_item_path(cart_item.product_id, remote: true) do |f| %>
            <%= f.select :quantity, 1..cart_item.product.storage, class: "select_submit" %>
        <% end %>
    </td>
    <td><strong>￥<%= cart_item.product.price * cart_item.quantity %></strong></td>
    <td><%= link_to(cart_item_path(cart_item.product_id), method: :delete) do %><i class="fa fa-trash-o" aria-hidden="true"></i><% end %></td>
</tr>

And this is my controller

def update
        @cart = current_cart
        @cart_item = @cart.cart_items.find_by(product_id: params[:id])
        if @cart_item.product.storage >= cart_item_params[:quantity].to_i
            @cart_item.update(cart_item_params)
            redirect_to carts_path
        else
            redirect_to carts_path, alert: "exceed the storage"
        end

end

Could anyone help me on this? Thanks in advance!

When I click on the checkbox, nothing happens to the database. — lacfo
– lacfo, Commented Feb 10, 2017 at 12:49
what is the js error? is the request passing to controller ? — jithya
– jithya, Commented Feb 10, 2017 at 12:53

puneet18 · Accepted Answer · 2017-02-10 13:12:50Z

1

Try below code:

In js:

$(document).ready(function(){
    $(".checkbox_submit").change(function(){
        var src = $(this);
        $.ajax({
          type: "post",
          url: "/sava_data", 
          success: function(result){
            src.parents('form:first').submit();
        }});
    });
});

In config/routes.rb

post '/save_data' => 'controller_name#action'

answered Feb 10, 2017 at 13:12

puneet18

4,4272 gold badges25 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

lacfo Over a year ago

Thank you very much! This is better than my original one, but still got an error. POST http://localhost:3000/save_data 500 (Internal Server Error)

lacfo Over a year ago

Do you mean this?

send @ jquery.self-bd7ddd3….js?body=1:10255 ajax @ jquery.self-bd7ddd3….js?body=1:9739(anonymous) @ cart_change.self-e3000ed….js?body=1:15 dispatch @ jquery.self-bd7ddd3….js?body=1:5227 elemData.handle @ jquery.self-bd7ddd3….js?body=1:4879

puneet18 Over a year ago

1. Error logs displayed at your terminal. 2. Right click -> Inspect element -> console -> Error logs in red color.

Collectives™ on Stack Overflow

Rails- Using check box to update database without submit button

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related