All threads / How do I use javascript in assets/javascript with HTML

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

...
...

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!

Join the discussion

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

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

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

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.