Question

I am trying to auto-populate a text field based on the value of another input field. Currently trying to do this using observe_field helper like this:

<%= observe_field(
        :account_name, 
        :function => "alert('Name changed!')",
        :on => 'keyup'
    ) %>

<% form_for(@account, :html => { :id => 'theform' }) do |f| %>
    <label for="accountname"> Account name </label>
    <%= form.text_field :name, :tabindex => '1' %>
    <label for="subdomain"> Subdomain </label>
    <%= form.text_field :subdomain, :tabindex => '2' %>
<% end %>

When the user enters text in the account_name text_field, I want to copy that convert into a subdomain (downcase and join by ‘-‘) and populate to subdomain text_field.

But, in the process getting this error:

element is null
   var method = element.tagName.toLowerCase();   protot...9227640 (line 3588)

Where exactly am I going wrong here? Or is there a better way to do this?

Answer 1

Put your “observe_field” inside the form tag and try again.

EDITED

your observe_field needs to be after the thing it’s observing.

Hope that helps 🙂

For ex:-

<% form_for(@account, :html => { :id => 'theform' }) do |f| %>
    <label for="accountname"> Account name </label>
    <%= form.text_field :name, :tabindex => '1' %>


<%= observe_field(
        :account_name, 
        :function => "alert('Name changed!')",
        :on => 'keyup'
    ) %>
    <label for="subdomain"> Subdomain </label>
    <%= form.text_field :subdomain, :tabindex => '2' %>
<% end %>