Sending Javascript array to ruby controller on form submit

Question

I have a form with a submit button <%= f.submit "Create Meeting", class: "btn-submit" %> which sends the info collected to my events#create action in my events controller.

I want to be able to send a javascript/JQuery array idList to the controller action at the same time as the rest of the information in the form is submitted. How would I go about doing this? I know it involves an AJAX function, but I don't know when to call it. Do I have to override the submit function in Javascript? If so, how is that done?

Here is how I created the form:

<%= form_for(@newevent) do |f| %>
  ...
  <%= f.submit "Create Meeting", class: "btn-submit" %>
<% end %>

Here is my controller action it submits to:

def create
  @calendar = current_customer.calendar
  @newevent = @calendar.events.build(event_params)

  if @newevent.save
    redirect_to '/main' #'/main/#{@calendar.id}'
  else
    redirect_to '/compose'
  end
end

Any help will be much appreciated, thanks

EDIT: This is the javascript concerning my array. When a user picks a person from a collection select "colleague-select", the selected person's id is added to the array. The id can also be removed by another click action by the user.

var idList = []; //this is the array of entry ids

$(function (){
    $("#click-me").click(function (e){
        e.preventDefault();
        i++;

        var list = $("#list");
        var name = $("#colleague-select option:selected").text();
        var id = $("#colleague-select").val();

        var remove = "<button type='button' class='remove-me'> X </button>";
        var entry = $("<li>" + name + remove+ "</li>").attr('id',id); //creates entry as JQuery object and sets its id attribute

        list.append(entry); //adds entry to HTML element 'list'
        idList.push(id); //adds id to array which should be the same as entry's id

        return false;
    });
});



$(document).on('click', ".remove-me", function(){
    var entry = $(this).parent();
    var id = entry.attr("id"); //gets value of attribute "id".

    entry.remove();

    var index = idList.indexOf(id); //finds the index number of id within array

    idList.splice(index,1); //removes id from array

});

I would suggest taking some basic tutorials on what ajax is and how it works - you can't send data at the same time as you are submitting a form "manually" because the browser is reloading the page. — max
– max, Commented Jan 26, 2016 at 14:29
So how what would be the alternative? I thought I knew AJAX quite well — S Craig
– S Craig, Commented Jan 26, 2016 at 14:33

MrYoshiji · Accepted Answer · 2016-01-26 16:42:53Z

1

Depending on the IDs you want to send, you could use a hidden field storing the IDs:

<%= form_for(@newevent) do |f| %>

  # ...
  <%= hidden_field_tag 'some_ids[]', [1,2,3], id: 'extra_ids' %>
  <%= f.submit "Create Meeting", class: "btn-submit" %>
<% end %>

And then collect the IDs in the params:

def create
  some_ids = params[:some_ids]
  # ...
end

To set it with your Javascript:

$(function (){
    $("#click-me").click(function (e){
        # [...]
        idList.push(id); //adds id to array which should be the same as entry's id

        $('#extra_ids').val(idList);

        return false;
    });
});



$(document).on('click', ".remove-me", function(){
    # [...]
    idList.splice(index,1); //removes id from array
    $('#extra_ids').val(idList);
});

edited Jan 26, 2016 at 16:42

answered Jan 26, 2016 at 14:36

MrYoshiji

54.9k13 gold badges130 silver badges120 bronze badges

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

9 Comments

S Craig Over a year ago

ok, my array is added to by user actions during the filling out of the form. So, if I don't know what the array will look like exactly due to it being a variable, how would I write that?

MrYoshiji Over a year ago

Can you tell us what you want to store exactly ?

S Craig Over a year ago

I will update my question showing you how I create my array

MrYoshiji Over a year ago

no you have to give it a value, which can and should be an empty array: <%= hidden_field_tag 'some_ids[]', [], id: 'extra_ids' %>

MrYoshiji Over a year ago

yes it will be reset automatically. But you can set it with RoR if you have stored it somewhere

|

Collectives™ on Stack Overflow

Sending Javascript array to ruby controller on form submit

1 Answer 1

9 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Related