Retrieve value from html 'value' attribute

问题

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?

回答1:

Change:

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

To:

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

回答2:

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'
}
});

回答3:

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

回答4:

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

来源：https://stackoverflow.com/questions/27269234/retrieve-value-from-html-value-attribute