Retrieve value from html 'value' attribute

Question

How can I retrieve the the actually value defined within the html element attribute named 'value'?

Before a user signs up, I am setting a session variable with a value that shall be either 'publisher' or 'reader' depending on which div they click on. This session value will be used upon user creation.

<template name="authJoinType">
<div class="container join-type">
    <div class="row"> 

        <div class="col-xs-6 col-sm-6 col-md-6">
            <a href="{{pathFor route = 'join'}}">
            <div class="join-type-inner" id="userTypeSelect" value="reader">Reader</div>
        </a>
        </div> 

        <div class="col-xs-6 col-sm-6 col-md-6">
            <a href="{{pathFor route = 'join'}}">
            <div class="join-type-inner" id="userTypeSelect" value="publisher">Publisher</div>
        </a>
        </div>

    </div>
</div>
</template>

client.js (Trying to set the session variable to either 'reader' or 'publisher' depending which div out of the two they click on)

Template.authJoinType.events({
'click div.join-type-inner': function(e, tmpl) {
    var userType = $(e.target).find('#userTypeSelect').val();
    Session.set('userType', userType);
    var selectedUserType = Session.get('userType');
    console.log(selectedUserType); // this is printing out 'undefined'
}
});

Help? Am I targeting the incorrect div to begin with?

use class as `userTypeSelect` instead of id because id should be unique then change `.find('#userTypeSelect').val();` to this `.find('.userTypeSelect').html();` — Atul Nar, Dec 03 '14 at 10:31
You can't have two or more elements with `id="userTypeSelect"`, that's not a valid HTML. — ekad, Dec 03 '14 at 10:31
@Atul I do not want to grab the html "Reader" or "Publisher", I want the value to be embedded within an element — meteorBuzz, Dec 03 '14 at 10:58

score 2 · Accepted Answer · answered Dec 03 '14 at 10:40

2

Change:

var userType = $(e.target).find('#userTypeSelect').val();

To:

var userType = $(e.target).attr("value");

answered Dec 03 '14 at 10:40

Amit Singh

2,267
4
25
50

Yes sir! This works right out of the box. I will remove the two identical ids, as it's incorrect practice and unnecessary for my code anyway. Thank you sanki – meteorBuzz Dec 03 '14 at 11:04

score 0 · Answer 2 · answered Dec 03 '14 at 10:33

You must use unique ids for each element in HTML but you have used id="userTypeSelect" for multiple elements, so change it.

You can use .attr('value') to read value attribute of div. here .val() will not work as div don't have value as such but though you can have attribute with name value.

And modify your script as shown below

Template.authJoinType.events({
'click div.join-type-inner': function(e, tmpl) {
    //use 'this' reference to read value attribute,
    //here 'this' is the clicked element
    var userType = $(this).attr('value');
    Session.set('userType', userType);
    var selectedUserType = Session.get('userType');
    console.log(selectedUserType); // this is printing out 'undefined'
}
});

score 0 · Answer 3 · answered Dec 03 '14 at 10:35

There are several issues with your code:

You have duplicate id attributes which is invalid and will cause issues in your JS - as you've discovered.
The value attribute is not valid for div elements. You can instead use a data-* attribute to store custom data in an element.
div elements cannot be placed inside an inline a element, change them to span.
Given that the click event you define is on the .join-type-inner element you don't need to perform the find() as e.target is the element you need.

Try this:

<template name="authJoinType">
    <div class="container join-type">
        <div class="row"> 
            <div class="col-xs-6 col-sm-6 col-md-6">
                <a href="{{pathFor route = 'join'}}">
                    <span class="join-type-inner" data-value="reader">Reader</span>
                </a>
            </div> 
            <div class="col-xs-6 col-sm-6 col-md-6">
                <a href="{{pathFor route = 'join'}}">
                    <span class="join-type-inner" data-value="publisher">Publisher</span>
                </a>
            </div>
        </div>
    </div>
</template>

Template.authJoinType.events({
    'click div.join-type-inner': function(e, tmpl) {
        var userType = $(e.target).data('value');
        Session.set('userType', userType);
        var selectedUserType = Session.get('userType');
        console.log(selectedUserType); // should say 'reader' || 'publisher' depending on clicked link
    }
});

Thanks for the insight however, the click event is not yet printing out the value into the console and the span messes up the bootstrap grid layout. — meteorBuzz, Dec 03 '14 at 10:52
It seems the value attribute is being retrieved within the div element. I removed the duplicate ids and implemented sanki's change. — meteorBuzz, Dec 03 '14 at 11:09

score 0 · Answer 4 · answered Dec 03 '14 at 11:13

This is for anyone referencing the post. The resulting working answer looks like this. Please vote for sanki for this answer. I'm just re-laying the info.

html:

<template name="authJoinType">
<div class="container join-type">
<div class="row"> 

    <div class="col-xs-6 col-sm-6 col-md-6">
        <a href="{{pathFor route = 'join'}}">
        <div class="join-type-inner" value="reader">Reader</div>
    </a>
    </div> 

    <div class="col-xs-6 col-sm-6 col-md-6">
        <a href="{{pathFor route = 'join'}}">
        <div class="join-type-inner" value="publisher">Publisher</div>
    </a>
    </div>

</div>

client.js

Template.authJoinType.events({
'click div.join-type-inner': function(e, tmpl) {
    var userType = $(e.target).attr("value");
    Session.set('userType', userType);
    var selectedUserType = Session.get('userType');
    console.log(selectedUserType);
}
});

Retrieve value from html 'value' attribute

4 Answers4

Linked