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

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.