Linking selection to form


#1

Hi. I have a users model and challenges model. In the challenges_controller new view I have all of the Users that have signed up in a list. To the left of that I have a form with information about the challenge the signed in user is creating. I want that user to be able to select a user from the list I provide and have that selection populate a field in the form. Hopefully that makes sense... So basically 'how do you populate a form field with a selection from a list." I'm not sure at all where to start...
Thanks!!


#2

Hi @grohljr,

You should work on HTML first. After that though, take a look at

<select> - HTML (MDN)
ActionView::Helpers::FormOptionsHelper (Rails API docs)


#3

Thanks. I am now using select. I am trying to use select_tag within the HTML. I am not seeing any options that I am expecting to see. However, when I go to inspect the elements on the page, They appear in the HTML section as I imagined they should... they just don't display anything... any help on this next step?!
Thanks
This picture shows my current predicament


#4

Try removing this rule:

select {
  display: none;
}

#5

ha. Yea thanks. I finally noticed that last night. It made me realize I don't quite understand what I'm doing or am not explaining it right. When I changed the display option a dropdown menu appeared at the top of my form with all of the options or names I wanted included (the name of the people in the list on the far right of my image). But, what I am trying to do is click on one of those names on the right side of my image and have that populate at the top of the form. ex- if I click on Username- Jasper Fakeman's box, I want his user:id to become the challenge:user2_id. This would then provide only Jasper's name at the top of the form to show that he is selected.


#6

So hopefully this will make it a lot clearer! This gif describes my intent. Thanks!


#7

Doing that will take JavaScript, so you may want to take Codecademy's course on that as well. What I'd do is include a text field like :name or whatever, then in your JS you'd listen for clicks on member names and populate the text field with the correct name. Example pseudo code:

<%= t.text :name %>

<!-- ... -->

<div class="member" data-name="John Doe">
  <h4>John Doe</h4>
  <!-- ... -->
</div>
<!-- ... -->

document.querySelectorAll('.member').forEach(function() {
  this.addEventListener("click", function() {
    document.querySelector('#bet[name]').value = this.dataset.name;
  });
});

#8

Thanks a bunch. This is the code I have so far. I'm confused though still. So I am within my challenges new view. The user list is coming from the users model. Based on that, is the below anywhere near correct? I keep getting property undefined errors for whatever I put after this.data.

    <SCRIPT LANGUAGE="JavaScript">
    document.querySelectorAll('.user2').forEach(function() {
        this.addEventListener("click", function() {
            document.querySelector('#user[id]').value = this.dataset.id;
        });
    });
    </SCRIPT>

    <div class="user2" data-name="<%= user.first_name %>">  
                <img src="images/yuna.jpg" alt="" class="circle">
                <span class="title">Username</span>
               <p><%= user.first_name + " " + user.last_name %><br>
                  WINS: 10 | Losses: 5 | K/D: 2<br>          
              </p>
            <a class="secondary-content"><i class="material-icons">grade</i></a>
     </div>

So in my html I am just trying to get anything to display... actually that should probably be the foreign key I am trying to assign right? challenge[user2_id]...... so the user clicks on another user... that user's user[id] should become the challenge[user2_id].... am I close!?? Sorry


#9

dataset refers to data-* properties. So if your attribute is data-name, you'll access it with dataset.name.

Also, it's generally considered better practice to use lowercase HTML tags, and the language attribute is no longer needed on <script> tags.


#10

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.