Observer champ: champ de remplissage automatique lorsque vous sélectionnez un champ

Question

Voici mon code existant:

<% 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 %> 

Lorsque l'utilisateur sélectionne le champ e-mail, je veux les points avec remplir automatiquement 50 et pour rendre le champ non modifiable. Comment je fais ça?

Answer 1

Je suppose que vous pouvez utiliser Prototype (framework Javascript) puisque vous utilisez Rails. Cela peut être exagéré, mais vous pouvez ajouter un observateur dans ce champ pour surveiller l'événement focus. À partir de là, appelez une fonction qui définit la valeur du champ de points sur 50 et rend le champ de points en lecture seule (ou désactive le champ). Quelque chose comme ceci:

// 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(); 
} 

est ici plus d'informations sur events and Prototype si vous avez besoin de le modifier.

Alors que vous pourriez juste mettre ce code directement dans la vue, la meilleure pratique consiste à garder votre Javascript séparé du code de vue (Javascript discret). Vous pouvez mettre ce code dans un fichier Javascript séparé, puis inclure ce fichier en utilisant javascript_include_tag de Rail. Si vous ne souhaitez pas utiliser Prototype, vous pouvez simplement ajouter l'attribut onFocus dans le champ e-mail et appeler une fonction similaire à celle ci-dessus (respondToEmailFocus). Puisque vous n'utilisez pas Prototype, vous devez utiliser document.getElementById('match_points') au lieu de $('match_points') pour trouver le champ de points.

Answer 2

Utilisez javascript sur la onFocus mettre à jour la valeur du champ

Answer 3

Faites-le en javascript. Quelque chose comme ça devrait le faire si vous utilisez 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 ; 
});