Rails: proper syntax for using a javascript function inside a rails view

Question

I am trying to use some javascript inside a form to get the value from a select dropdown box, and use it another part of the form. I cannot figure out the syntax.

first the javascript function (I placed this at the end of my view):

<script type="text/javascript">
  function return_event_id()
  {
    var event_id = document.getElementById("event_id");
    return event_id.value;
  }
</script>

Inside the view, I have the following:

<%= select("discount_code", :event_id, events_ids_titles_hash, { :include_blank => true }) %>

If I add the following statement:

return_event_id

Then the dropdown item I selected is displayed on the form (although I also see the word return_event_id as well).

If I do something like this:

<% selected_event_id =  return_event_id %> 

I get the following error message: undefined local variable or method `return_event_id'

What I'm looking for is to be able to store the event_id value in a variable. What's the proper syntax?

Additional details and comments on answer:

1: Yes, Ruby code = server, javascript code = client

2: Putting the code in something like application.js would move it out of the view.erb module, but as far as I know, it does not change the outcome.

I understand that <% selected_event_id = return_event_id %> will not work, but I do need to get to a point where I can somehow pass the output from return_event_id back to the server, and then capture it in a Ruby variable, OR, if there is a way to use the javascript function output to set another element in the form.

Answer 1

For starters, it's best to separate your javascript from your view:

Write your js in a separate file, put it in public or your assets dir depending on your rails version.. Then if you are in raila 3.1+ it will get auto loaded with your assets, if below 3.1 add the following to your view ( at the top )

<%= javascript_include_tag "my_javascript_filename" %>

From there you could create an ajax request back to your rails app (wich means writing controller code and a route to handle this) to get the list of items you want:

http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/
I'd recommend using the getJSON method form the above URL

Answer 2

To let your JavaScript function to be called, you have two options:

1) straight-forward:

let the select_tag generate an html-attribute "onchange"

select("discount_code", :event_id, events_ids_titles_hash, { 
    :include_blank => true, 
    :onchange => "fill_my_event_data();"
    }

and then write a JavaScript function "fill_my_event_data" that uses your return_event_id() and then puts data you need in the form elements you want.

2) use "unobtrusive JavaScript" with jQuery. Then you don't need to do much in rails (except providing correct ids and data-attributes). You do everything in your bottom JavaScript section. You connect the select tag with an event handler that again calls your function. But of course you need to learn the basics of jQuery. If you need to do such things often, the jQuery knowledge is useful.