Observer Field: Autofill field when selecting another field...

Question

Here's my existing code:

<% form_for(@match) do |f| %>
    <%= f.error_messages %>
    <fieldset>
        <p>
            <label>Name</label>
            <%= f.text_field(:name) %>
        </p>
        <p>
            <label>OR email address</label>
            <%= f.text_field(:email) %>
        </p>
    </fieldset>
    <p>
        <label>Points:</label>
        <%= f.text_field(:points) %>
    </p>
    <p>
        <%= f.submit 'Match' %>
    </p>

<% end %>

When the user selects the email field, I want to autopopulate the Points with 50 and to make the field uneditable. How do I do so?

Answer 1

Use javascript on the onFocus to update the field value

Answer 2

I'm assuming you can use Prototype (Javascript framework) since you're using Rails. This may be overkill, but you could add an observer to that field to watch for the focus event. From there, call a function that sets the value of the points field to 50 and then makes the points field read only (or disables the field). Something like this:

// Add the observer on the field when the DOM loads
document.observe("dom:loaded", function() {

    // Observe object with ID = "match_email" for focus event
    $('match_email').observe('focus',respondToEmailFocus);
});

// Function to call when the user focuses on the email field
function respondToEmailFocus(event){
    // Find object with ID = "match_points" and set the value = 50
    $('match_points').value = 50;
    // Find the object with ID = "match_points" and make it read only
    $('match_points').readOnly=true;

    // Instead of setting to read only, you could disable the field using:
    // $('match_points').disable();
}

Here's more info on events and Prototype in case you need to modify it.

While you could just put that code right into the view, best practice is to keep your Javascript separate from the view code (unobtrusive Javascript). You can put that code in a separate Javascript file and then include that file using Rail's javascript_include_tag.

If you don't want to use Prototype, you can just add the onFocus attribute on the email field and call a function similar to the one above (respondToEmailFocus). Since you're not using Prototype, you would have to use document.getElementById('match_points') instead of $('match_points') to find the points field.

Answer 3

Do it in javascript. Something like this should do it if you're using Prototype:

// Find the element with id=match_email and observe it for focus
$('match_email').observe('focus', function() {
  // When focus occurs:
  // Set the value of the element with id=match_points to 50
  // Make the same field read only
  $('match_points').value = 50;
  $('match_points').read_only = true ;
});