Ask A Question

Notifications

You’re not receiving notifications from this thread.

How do I use javascript in assets/javascript with HTML

jon asked in Javascript

I am completely new to Rails...sorry. I have a simple application.
I want to detect when a field changes and in a form_with block in a new.htlm.erb file and execute pure javascript code in the assets/javascripts folder to update the form display.

Can anyone share a specific example of actual code for doing this including the html and the javascript file, not just "snippets".

So far I have new.html code:

No age selected

// This is what I want to update on a change.

//to trigger the update based on this selection changing <%= form.select :age, ['19', '18', '17' %>

...
...

function my_function(this){ document.getElementById(update_this).innerHTML = document.getElementById(this).value }

****end HTLM**

That works, but

  1. I would like to have javascript code completely out of the html file and in a separate file in the assets/javascript folder -thats good pracitice right?
  2. I would like to reference the form.select value by name rather than passing 'this'. (tried HTLM options and it did not work)

Looking around the internet I see lots about including require in the application.js and using "<%= javascript_include_tag...." . I could call my_function from the HTML using using the document.load(my-function()) so I believe my paths and manifests are OK and I do see require and javascript_include in the right places.

Please could someone give me:

  1. a very simple step by step guide &
  2. code sample for the HTML I am generating in Rails to call javascript in a separate file when a <% form.select %> value changes
  3. code sample of the actual javascript file as I am confused with all the $ function variations on the internet

Thanks!

Reply
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 82,464+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.