How to get text from specific span from multiple elements - javascript

Hello Friends I have span with class .amount how can i get price from this span i have tried but i am not able to point out the exact location
Html
<li class="radio">
<input class="tmcp-field nav nav-pills fabric-layer-pattern test tm-product-image tm-epo-field tmcp-radio use_images" data-image="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png" type="radio">
<label for="tmcp_choice_14_2_39">
<img class="tmlazy radio_image" alt="Elegant" src="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png">
<span class="tc-label radio_image_label">Elegant</span>
</label>
<span class="price tc-price hidden">
<span class="amount">500</span>
</span>
</li>
Javascript
$('.fabric-layer-pattern').click(function() {
var spanEl1 = $(this).parent('li.radio').find('span.amount');
var priceee = spanEl1.text(); //Get text
console.log(price);
// this alert is coming two times empty after that price will come
alert(priceee);
});
Updated Html Code
<ul>
<li class="radio">
<input class="tmcp-field nav nav-pills fabric-layer-pattern test tm-product-image tm-epo-field tmcp-radio use_images" data-image="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png" data-imagep="" data-imagel="" tabindex="37" type="radio">
<label for="tmcp_choice_14_0_37"><img class="tmlazy radio_image" alt="Elegant" src="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png">
<span class="tc-label radio_image_label">Elegant</span></label>
<span class="price tc-price hidden"><span class="amount">500</span> </span>
</li>
<li class="radio">
<input class="tmcp-field nav nav-pills fabric-layer-pattern test tm-product-image tm-epo-field tmcp-radio use_images" type="radio">
<label for="tmcp_choice_14_1_38"><img class="tmlazy radio_image" alt="Elegant" src="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png">
<span class="tc-label radio_image_label">Elegant</span></label>
<span class="price tc-price hidden"><span class="amount">500</span> </span>
</li>
<li class="radio">
<input class="tmcp-field nav nav-pills fabric-layer-pattern test tm-product-image tm-epo-field tmcp-radio use_images" type="radio">
<label for="tmcp_choice_14_2_39"><img class="tmlazy radio_image" alt="Elegant" src="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png">
<span class="tc-label radio_image_label">Elegant</span></label>
<span class="price tc-price hidden"><span class="amount">500</span> </span>
</li>
</ul>
please suggest something...


Use parent() and find() to have specific element from multiple elements.
var spanEl = $(this).parent('li').find('span.amount');
var price = spanEl.text(); //Get text
console.log(price);
/*$('.fabric-layer-pattern').click(function() {
var spanEl = $(this).parent('li').find('span.amount');
var price = spanEl.text(); //Get text
console.log(price);
});*/
$('.fabric-layer-pattern').click(function() {
var spanEl1 = $(this).parent('li.radio').find('span.amount');
var priceee = spanEl1.text(); //Get text
console.log(priceee);
// this alert is coming two times empty after that price will come
alert(priceee);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul>
<li class="radio">
<input class="tmcp-field nav nav-pills fabric-layer-pattern test tm-product-image tm-epo-field tmcp-radio use_images" data-image="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png" data-imagep="" data-imagel="" tabindex="37" type="radio">
<label for="tmcp_choice_14_0_37"><img class="tmlazy radio_image" alt="Elegant" src="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png">
<span class="tc-label radio_image_label">Elegant</span></label>
<span class="price tc-price hidden"><span class="amount">500</span> </span>
</li>
<li class="radio">
<input class="tmcp-field nav nav-pills fabric-layer-pattern test tm-product-image tm-epo-field tmcp-radio use_images" type="radio">
<label for="tmcp_choice_14_1_38"><img class="tmlazy radio_image" alt="Elegant" src="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png">
<span class="tc-label radio_image_label">Elegant</span></label>
<span class="price tc-price hidden"><span class="amount">600</span> </span>
</li>
<li class="radio">
<input class="tmcp-field nav nav-pills fabric-layer-pattern test tm-product-image tm-epo-field tmcp-radio use_images" type="radio">
<label for="tmcp_choice_14_2_39"><img class="tmlazy radio_image" alt="Elegant" src="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png">
<span class="tc-label radio_image_label">Elegant</span></label>
<span class="price tc-price hidden"><span class="amount">700</span> </span>
</li>
</ul>


Try using siblings():
$('.fabric-layer-pattern').click(function() {
var spanEl = $(this).siblings().filter("span.amount");
var price = spanEl.text(); //Get text
});
$(this) inside the event scope is the radio input itself and span.amount is not inside it.
Demo


UPDATE
I have tried but in third alert i am getting price before that empty alert is coming
This can have different meanings. With only this comment I may figure out the price value is changed outside and you are interested in that event.
If it is so, you may refer to MutationObserver. Moreover, instead of click event you may consider to use the change event.
According to this considerations I updated the snippet.
You may use closest:
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree
The snippet:
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length > 0) {
$('.fabric-layer-pattern').trigger('click');
}
});
});
observer.observe($('li.radio span.amount').get(0), { attributes: true, childList: true });
// later, you can stop observing
// observer.disconnect();
$('#myBtn').on('click', function(e) {
$('li.radio span.amount').text(Date.now());
});
$('.fabric-layer-pattern').on('click', function() {
var spanEl = $(this).closest('li.radio').find('span.amount');
var price = spanEl.text(); //Get text
console.log('span.amount is: ' + price);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="myBtn">Change price</button>
<ul>
<li class="radio">
<input class="tmcp-field nav nav-pills fabric-layer-pattern test tm-product-image tm-epo-field tmcp-radio use_images" data-image="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png" data-imagep="" data-imagel="" tabindex="37" type="radio">
<label for="tmcp_choice_14_0_37"><img class="tmlazy radio_image" alt="Elegant" src="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png">
<span class="tc-label radio_image_label">Elegant</span></label>
<span class="price tc-price hidden"><span class="amount">500</span> </span>
</li>
<li class="radio">
<input class="tmcp-field nav nav-pills fabric-layer-pattern test tm-product-image tm-epo-field tmcp-radio use_images" type="radio">
<label for="tmcp_choice_14_1_38"><img class="tmlazy radio_image" alt="Elegant" src="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png">
<span class="tc-label radio_image_label">Elegant</span></label>
<span class="price tc-price hidden"><span class="amount">500</span> </span>
</li>
<li class="radio">
<input class="tmcp-field nav nav-pills fabric-layer-pattern test tm-product-image tm-epo-field tmcp-radio use_images" type="radio">
<label for="tmcp_choice_14_2_39"><img class="tmlazy radio_image" alt="Elegant" src="http://localhost/mbox_server/wp-content/uploads/2016/09/pattern.png">
<span class="tc-label radio_image_label">Elegant</span></label>
<span class="price tc-price hidden"><span class="amount">500</span> </span>
</li>
</ul>


I guess this will do:
// Just to be specific
$(".fabric-layer-pattern + span.price > span.amount").text();


Try this code
$('.fabric-layer-pattern').click(function() {
var price = $('span.amount').text();
});

Related

Checkbox like radio button jquery

I have a buch of checkbox in different containers like below:
$("input:checkbox").click(function() {
var url = "http://example.com/results?&"
var flag = false;
var $box = $(this);
var $facet = $box.val();
var $name = $box.attr("name");
var group = "input:checkbox['" + $facet + $name + "']:checked";
console.log(group);
$("#pruebita").not(this).attr("checked", false);
$(group).each(function() {
if (!flag) {
url = url + $(this).val() + $(this).attr('name');
flag = true; // To trace if first query string added
} else {
url = url + "&" + $(this).val() + $(this).attr('name');
}
});
console.log(url);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="cFilterAction fSpace topFM hidden-sm hidden-md hidden-lg">
<li class="fTitle" id="genderTitle">
<a class="filter facetTitle " id="gender">
gender
</a>
</li>
<div class="fct-bd colorWrap">
<ul class="noShow-filter Wrap">
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="checkbox" name="women" value="gender=" data-facet="Gender">
<span class="fct-scroll-item">women</span>
</label>
</li>
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="checkbox" name="men" value="gender=" data-facet="Gender">
<span class="fct-scroll-item">men</span>
</label>
</li>
</ul>
</div>
</ul>
<ul class="cFilterAction fSpace topFM hidden-sm hidden-md hidden-lg">
<li class="fTitle" id="occasionTitle">
<a class="filter facetTitle " id="occasion">
ocassion
</a>
</li>
<div class="fct-bd colorWrap">
<ul class="noShow-filter Wrap">
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="checkbox" name="beach" value="occasion=" data-facet="Occasion">
<span class="fct-scroll-item">beach</span>
</label>
</li>
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="checkbox" name="street" value="occasion=" data-facet="Occasion">
<span class="fct-scroll-item">street</span>
</label>
</li>
</ul>
</div>
</ul>
I want that the checkboxes don't uncheck the previous option when checking another section of checkboxes.
The complete code is also at jsfiddle

In your code you have
$("#pruebita").not(this).attr("checked",false);
Which essentially is unchecking all the checkboxes except the clicked one. Removing this line of code will make it work fine.
See updated fiddle

You don't need any javascript at all for this problem; you just need to use appropriate form elements and set their attributes correctly.
Radio buttons are for when only one of a group of options should be selectable; checkboxes are for when more than one should be selectable. They aren't interchangeable. Do not use javascript to disguise radio button functionality as checkbox elements; that's bad usability, as it gives the user incorrect expectations about how the form will work.
Part of the problem is that you've confused the purpose of the "name" and "value" attributes. The "name" attribute is for defining which group the radio buttons belong to; all radio buttons with the same name will be in the same group. The "value" attribute contains the value that will be submitted as part of the form if that option is selected. You had them backwards:
<input type="checkbox" name="women" value="gender=" ...>
<input type="checkbox" name="men" value="gender=" ...>
With the above code, all the boxes have a unique 'name', so none of them would be grouped; meanwhile the user's selection wouldn't have any effect, since they both have the same value. Instead, that should be this:
<input type="radio" name="gender" value="women" ...>
<input type="radio" name="gender" value="men" ...>
That HTML will cause the form field "gender" to contain the value "women" or "men", depending on the user's selection. Here's the full corrected example:
<ul class="cFilterAction fSpace topFM hidden-sm hidden-md hidden-lg">
<li class="fTitle" id="genderTitle">
<a class="filter facetTitle" id="gender">gender</a>
</li>
<div class="fct-bd colorWrap">
<ul class="noShow-filter Wrap">
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="radio" name="gender" value="women" data-facet="Gender">
<span class="fct-scroll-item">women</span>
</label>
</li>
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="radio" name="gender" value="men" data-facet="Gender">
<span class="fct-scroll-item">men</span>
</label>
</li>
</ul>
</div>
</ul>
<ul class="cFilterAction fSpace topFM hidden-sm hidden-md hidden-lg">
<li class="fTitle" id="occasionTitle">
<a class="filter facetTitle " id="occasion">ocassion</a>
</li>
<div class="fct-bd colorWrap">
<ul class="noShow-filter Wrap">
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="radio" name="occasion" value="beach" data-facet="Occasion">
<span class="fct-scroll-item">beach</span>
</label>
</li>
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="radio" name="occasion" value="street" data-facet="Occasion">
<span class="fct-scroll-item">street</span>
</label>
</li>
</ul>
</div>
</ul>

How to get the correct data value using jQuery

This is my HTML:
<div id="RouterTemplates">
<div data-router-id="4" data-router-name="DF_DCM_ROUTER_1" class="jarviswidget jarviswidget-color-greenDark router-template" data-widget-colorbutton="false" data-widget-custombutton="false" >
<header>
<span class="widget-icon">
<i class="fa fa-table"></i>
</span>
<h2 >Router: AE Title: DF_DCM_ROUTER_1, Description: </h2>
<div class="widget-toolbar" id="routeronoffswitchtoobar" router_id="4">
<span class="onoffswitch">
<input type="checkbox" name="routeronoffswitch" class="onoffswitch-checkbox routerservicestatusswitch" id="routeronoffswitch" router_id="4" checked="checked">
<label class="onoffswitch-label" for="routeronoffswitch">
<span class="onoffswitch-inner" data-swchon-text="ON" data-swchoff-text="OFF"></span>
<span class="onoffswitch-switch"></span>
</label>
</span>
</div>
</header>
</div>
<div data-router-id="5" data-router-name="DISABLEDROUTER" class="jarviswidget jarviswidget-color-red router-template" data-widget-colorbutton="false" data-widget-custombutton="false" >
<header>
<span class="widget-icon">
<i class="fa fa-table"></i>
</span>
<h2 >Router: AE Title: DISABLEDROUTER, Description: Not in use</h2>
<div class="widget-toolbar" id="routeronoffswitchtoobar" router_id="5">
<span class="onoffswitch">
<input type="checkbox" name="routeronoffswitch" class="onoffswitch-checkbox routerservicestatusswitch" id="routeronoffswitch" router_id="5" >
<label class="onoffswitch-label" for="routeronoffswitch">
<span class="onoffswitch-inner" data-swchon-text="ON" data-swchoff-text="OFF"></span>
<span class="onoffswitch-switch"></span>
</label>
</span>
</div>
</header>
</div>
</div>
I'm try to get 2 things, the router_id for the section clicked and the value for the checkbox I clicked on. This is what I've tried thus far:
$('.routerservicestatusswitch').on('click', function (e)
{
var id = $(this).parent('router-template').data('router-id');
var id2 = $(this).siblings('.router-template').data('router-id');
var id3 = $(this).closest('.router-template').data('router-id');
var id4 = $(this).closest('.widget-toolbar').find('.onoffswitch-checkbox').data('router_id');
var id5 = $(this).find(':checkbox').attr('router_id');
var id6 = $(this).find(':checkbox').val();
if ($('#routeronoffswitch').is(':checked') == true)
{
SetRouter(true);
}
else
{
SetRouter(false);
}
});
I've tried different event handlers and they all return the router_id of the first section and never the id for the one I click. Can someone tell me how to get the correct data?

You have duplicated IDs: this is not possible. So you must change them to class or add a suffix in order to make them unique.
Second point: you have:
<div data-router-id="
a "data-router-id" and two: "router_id="" attribute.
You may access them using jQuery#closest and jQuery#data or jQuery#attr. For the data attributes you can use data but for the others you need to use attr:
Moreover, try to use the change event for checkboxes instead of click.
The snippet:
function SetRouter(arg1) {
console.log('SetRouter: ' + arg1)
}
$('.routerservicestatusswitch').on('change', function (e) {
var id1 = $(this).closest('.router-template').data('router-id');
var id2 = $(this).closest('.widget-toolbar').attr('router_id');
var id3 = $(this).attr('router_id');
var id4 = $(this).val();
console.log('id1: ' + id1 + ' id2: ' + id2 + ' id3: ' + id3);
if ($(this).is(':checked')) {
SetRouter(true);
} else {
SetRouter(false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="RouterTemplates">
<div data-router-id="4" data-router-name="DF_DCM_ROUTER_1" class="jarviswidget jarviswidget-color-greenDark router-template"
data-widget-colorbutton="false" data-widget-custombutton="false">
<header>
<span class="widget-icon">
<i class="fa fa-table"></i>
</span>
<h2 >Router: AE Title: DF_DCM_ROUTER_1, Description: </h2>
<div class="widget-toolbar" id="routeronoffswitchtoobar1" router_id="4">
<span class="onoffswitch">
<input type="checkbox" id="routeronoffswitch1" class="onoffswitch-checkbox routerservicestatusswitch"
router_id="4" checked="checked">
<label class="onoffswitch-label" for="routeronoffswitch1">
<span class="onoffswitch-inner" data-swchon-text="ON" data-swchoff-text="OFF"></span>
<span class="onoffswitch-switch"></span>
</label>
</span>
</div>
</header>
</div>
<div data-router-id="5" data-router-name="DISABLEDROUTER" class="jarviswidget jarviswidget-color-red router-template" data-widget-colorbutton="false" data-widget-custombutton="false" >
<header>
<span class="widget-icon">
<i class="fa fa-table"></i>
</span>
<h2 >Router: AE Title: DISABLEDROUTER, Description: Not in use</h2>
<div class="widget-toolbar" class="routeronoffswitchtoobar" router_id="5">
<span class="onoffswitch">
<input type="checkbox" id="routeronoffswitch" class="onoffswitch-checkbox routerservicestatusswitch"
router_id="5" >
<label class="onoffswitch-label" for="routeronoffswitch">
<span class="onoffswitch-inner" data-swchon-text="ON" data-swchoff-text="OFF"></span>
<span class="onoffswitch-switch"></span>
</label>
</span>
</div>
</header>
</div>
</div>

jQuery not seeing click() event

I'm attempting to change a message describing a product's condition when the user clicks on an element. The code below seems to be valid, however when I click on the element (.conditionOption label), my message is not being changed.
I'm using jQuery 1.7.2, so .live(); is still valid, I have however attempted to switch things to .click() with the same results.
HTML CODE
<div class="productAttributeRow productAttributeConfigurablePickListSet productAttributeRuleCondition" id="a9e1018b0d4a98a6836fdf644eb227a1">
<div class="productAttributeLabel">
<label for="4fe3d80e78f0e0dc478e7ee56e98d3ea">
<span class="required">*</span>
<span class="name">Cosmetic Condition:</span>
<i class="fa fa-info-circle conditionHelp helpIcon modalOpener"></i>
</label>
</div>
<div class="productAttributeValue">
<div class="productOptionViewRectangle conditionOption">
<ul class="list-horizontal">
<li class="option">
<label for="4a43f295a3273a1b90567090ac3fc9f3">
<input type="radio" class="validation" name="attribute[267]" value="1216" id="4a43f295a3273a1b90567090ac3fc9f3">
<span class="name">Excellent</span>
</input>
</label>
</li>
<li class="option">
<label for="f03ed6c05af7ea80dc1b75d853f43026">
<input type="radio" class="validation" name="attribute[267]" value="311" id="f03ed6c05af7ea80dc1b75d853f43026">
<span class="name">Good</span>
</input>
</label>
</li>
<li class="option selected selectedValue">
<label for="1598c6f69093cdf495f564397485e044">
<input type="radio" class="validation" name="attribute[267]" value="312" id="1598c6f69093cdf495f564397485e044" checked="checked">
<span class="name">Fair</span>
</input>
</label>
</li>
</ul>
<div id="conditionExplanationWrapper">
<span id="conditionExplanation">MESSAGE 1</span>
</div>
</div>
</div>
<div class="cf"></div>
</div>
Javascript/jQuery
function conditionExplanation() {
// Set vars for three conditions
var excellentMessage = 'MESSAGE 1';
var goodMessage = 'MESSAGE 2';
var fairMessage = 'MESSAGE 3';
// Assign finder class to div
$('.productOptionViewRectangle:contains("Excellent")').addClass('conditionOption');
// Build wrapper for message
$('.conditionOption').append('<div id="conditionExplanationWrapper"><span id="conditionExplanation"></span></div>');
// Insert message corresponding to .conditionOption .selectedValue
$('.conditionOption label').live('click', function(){
if ($('.conditionOption .selectedValue:contains("Excellent")')) {
$('#conditionExplanation').html(excellentMessage);
} else if ($('.conditionOption .selectedValue:contains("Good")')) {
$('#conditionExplanation').html(goodMessage);
} else if ($('.conditionOption .selectedValue:contains("Fair")')) {
$('#conditionExplanation').html(fairMessage);
}
});
}
See Fiddle at https://jsfiddle.net/mvnxg3t4/

The problem is that you're comparing the same value over and over; instead you should make use of this and then use regular text search:
var value = $(this).text();
if (value.indexOf('Excellent') != -1) {
$('#conditionExplanation').html(excellentMessage);
} else if (value.indexOf('Good') != -1) {
$('#conditionExplanation').html(goodMessage);
} else if (value.indexOf('Fair') != -1) {
$('#conditionExplanation').html(fairMessage);
}
$(document).ready(conditionExplanation);
function conditionExplanation()
{
// Set vars for three conditions
var excellentMessage = 'MESSAGE 1';
var goodMessage = 'MESSAGE 2';
var fairMessage = 'MESSAGE 3';
// Assign finder class to div
$('.productOptionViewRectangle:contains("Excellent")').addClass('conditionOption');
// Build wrapper for message
$('.conditionOption').append('<div id="conditionExplanationWrapper"><span id="conditionExplanation"></span></div>');
// Insert message corresponding to .conditionOption .selectedValue
$('.conditionOption label').live('click', function (e) {
var value = $(this).text();
if (value.indexOf('Excellent') != -1) {
$('#conditionExplanation').html(excellentMessage);
} else if (value.indexOf('Good') != -1) {
$('#conditionExplanation').html(goodMessage);
} else if (value.indexOf('Fair') != -1) {
$('#conditionExplanation').html(fairMessage);
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="productAttributeRow productAttributeConfigurablePickListSet productAttributeRuleCondition" id="a9e1018b0d4a98a6836fdf644eb227a1">
<div class="productAttributeLabel">
<label for="4fe3d80e78f0e0dc478e7ee56e98d3ea">
<span class="required">*</span>
<span class="name">Cosmetic Condition:</span>
<i class="fa fa-info-circle conditionHelp helpIcon modalOpener"></i>
</label>
</div>
<div class="productAttributeValue">
<div class="productOptionViewRectangle conditionOption">
<ul class="list-horizontal">
<li class="option">
<label for="4a43f295a3273a1b90567090ac3fc9f3">
<input type="radio" class="validation" name="attribute[267]" value="1216" id="4a43f295a3273a1b90567090ac3fc9f3">
<span class="name">Excellent</span>
</input>
</label>
</li>
<li class="option">
<label for="f03ed6c05af7ea80dc1b75d853f43026">
<input type="radio" class="validation" name="attribute[267]" value="311" id="f03ed6c05af7ea80dc1b75d853f43026">
<span class="name">Good</span>
</input>
</label>
</li>
<li class="option selected selectedValue">
<label for="1598c6f69093cdf495f564397485e044">
<input type="radio" class="validation" name="attribute[267]" value="312" id="1598c6f69093cdf495f564397485e044" checked="checked">
<span class="name">Fair</span>
</input>
</label>
</li>
</ul>
<div id="conditionExplanationWrapper">
<span id="conditionExplanation">MESSAGE 1</span>
</div>
</div>
</div>
<div class="cf"></div>
</div>

Try using on click and add it in on your on load of body.
$(function () {
$('.conditionOption label').click(function () {
});
});

Add text input dynamically to list with radio buttons

I have a list (style taken from bootstrap) of elements, to which I want to add some more elements using text input. Here is my code-
<div class="col-lg-6">
<div class="input-group">
<input type="text" id = "input" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id = "add" >Add</button>
</span>
</div><!-- /input-group -->
<form>
<ul class="list-group" id = "tagList">
<li class="list-group-item"> <b>Tags </b></li>
<li class="list-group-item"> <span class ="input-group-addon">
<input type="radio">
</span>Apple</li>
<li class="list-group-item"> <span class ="input-group-addon">
<input type="radio">
</span> Orange</li>
<li class="list-group-item"> <span class ="input-group-addon">
<input type="radio">
</span> Pear</li>
<li class="list-group-item"> <span class ="input-group-addon">
<input type="radio">
</span> Banana</li>
</ul>
</form>
<script src="http://codeorigin.jquery.com/jquery-2.0.3.js"></script>
<script>
$('#add').click(function(){
var text = $('#input').val();
if(text.length){
$('<li />', {html: text}).appendTo('ul.tagList')
}
});
</script>
I can get the code to work with a simpler list, but not with this one. Can anyone spot why not?

Your li's are not closed:
<li class="list-group-item" <span class ="input-group-addon">
<input type="radio">
</span>Apple</li>
Should be:
<li class="list-group-item"><span class ="input-group-addon">
<input type="radio">
</span>Apple</li>
Always funny to spot such issues once you placed the code into the code highlighting here on SO.
In order for your javascript to work, you might use the following: http://jsfiddle.net/jX2K3/21/

try following code..
$('#add').click(function(){
var text = $('#input').val();
if(text.length){
$('ul').append('<li class="list-group-item"><span class ="input-group-addon"> <input type="radio"> </span>'+text+'</li>');
}
});
jsFiddle

Calculating Values in Radio Button

I am trying to make a nutrition calculator. It should the values in the radio button and display the value, but I have no idea why it isn't working. The code below doesn't seem to work.
<html>
<head>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$('.options').on('change', 'input', function() {
var $self = $(this);
var inputType = $self.attr('type');
if (inputType == 'radio') {
$self.parent('li').addClass('active').siblings().removeClass('active');
} else if (inputType == 'checkbox') {
$self.parent('li').toggleClass('active');
}
runUpdate();
});
});
function runUpdate() {
//get the sum of the elements
var calories = $(".caloriesSum", '.active').sum();
var fat = $(".fatSum", '.active').sum();
var satfat = $(".satfatSum", '.active').sum();
var carbs = $(".carbsSum", '.active').sum();
var protein = $(".proteinSum", '.active').sum();
var sodium = $(".sodiumSum", '.active').sum();
var chloresterol = $(".chloesterolSum", '.active').sum();
//update the total
$("#totalCalories").text(+calories.toString());
$("#totalFat").text(+fat.toString());
$("#totalSatFat").text(+satfat.toString());
$("#totalCarbs").text(+carbs.toString());
$("#totalProtein").text(+protein.toString());
$("#totalSodium").text(+sodium.toString());
$("#totalChloresterol").text(+chloresterol.toString());
}?
</script>
<style type="text/css">
ul.options li span {display:none;}
#totals {padding:20px; background:#eee;}
#totals span {font-weight:bold;}
h4,ul {margin:0 0 15px;}
</style>
</head>
<body>
<form action="" method="post" id="nutform" onsubmit="return false;">
<h2>Taqueria Nutritionals</h2>
<h4>Pick Your Meal</h4>
<!--Radio Buttons with Values -->
<ul class="options">
<li>
<input type="radio" id="wwheatt" name="meal" value="whole_wheat_tortilla"> Whole Wheat Tortilla
<!-- This class contains the values that it should add -->
<span class="caloriesSum">280</span>
<span class="fatSum">6</span>
<span class="satfatSum">0</span>
<span class="carbsSum">44</span>
<span class="proteinSum">8</span>
<span class="sodiumSum">340</span>
<span class="chloesterolSum">0</span>
</li>
<li>
<input type="radio" name="meal" value="flour_tortilla" > Flour Tortilla
<span class="caloriesSum">290</span>
<span class="fatSum">6</span>
<span class="satfatSum">2</span>
<span class="carbsSum">49</span>
<span class="proteinSum">9</span>
<span class="sodiumSum">770</span>
<span class="chloesterolSum">0</span>
</li>
<li>
<input type="radio" name="meal" value="naked" > Naked, zero nutrients
<span class="caloriesSum">0</span>
<span class="fatSum">0</span>
<span class="satfatSum">0</span>
<span class="carbsSum">0</span>
<span class="proteinSum">0</span>
<span class="sodiumSum">0</span>
<span class="chloesterolSum">0</span>
</li>
</ul>
<h4>Select Your Protein</h4>
<ul class="options">
<li>
<input type="radio" name="protein" value="steak" > Steak
<span class="caloriesSum">230</span>
<span class="fatSum">9</span>
<span class="satfatSum">3</span>
<span class="carbsSum">3</span>
<span class="proteinSum">32</span>
<span class="sodiumSum">170</span>
<span class="chloesterolSum">90</span>
</li>
<li>
<input type="radio" name="protein" value="carnitas" > Carnitas
<span class="caloriesSum">210</span>
<span class="fatSum">9</span>
<span class="satfatSum">3</span>
<span class="carbsSum">2</span>
<span class="proteinSum">29</span>
<span class="sodiumSum">490</span>
<span class="chloesterolSum">90</span>
</li>
<li>
<input type="radio" name="protein" value="chicken" > Chicken
<span class="caloriesSum">190</span>
<span class="fatSum">2</span>
<span class="satfatSum">0</span>
<span class="carbsSum">4</span>
<span class="proteinSum">35</span>
<span class="sodiumSum">560</span>
<span class="chloesterolSum">90</span>
</li>
<li>
<input type="radio" name="protein" value="tofu"> Tofu
</li>
</ul>
<h4>The Add-ins</h4>
<ul class="options">
<li>
<input type="checkbox" name="the_addins" value="white_rice"> White Rice
<span class="fatSum">9</span>
<span class="satfatSum">3</span>
<span class="carbsSum">2</span>
<span class="proteinSum">29</span>
<span class="sodiumSum">490</span>
<span class="chloesterolSum">90</span>
</li>
<li>
<input type="checkbox" name="the_addins" value="brown_rice"> Brown Rice
</li>
<li>
<input type="checkbox" name="the_addins" value="black_beans"> Black Beans
</li>
<li>
<input type="checkbox" name="the_addins" value="pinto_beans"> Pinto Beans
</li>
</ul>
<h4>Salsas</h4>
<ul class="options">
<li>
<input type="checkbox" name="salsas" value="pico_de_gallo"> Pico De Gallo
</li>
<li>
<input type="checkbox" name="salsas" value="tomatillo_salsa"> Tomatillo Salsa
</li>
<li>
<input type="checkbox" name="salsas" value="roasted_corn_salsa"> Roasted Corn Salsa
</li>
<li>
<input type="checkbox" name="salsas" value="fire_roasted_red_salsa"> Fire Roasted Red Salsa
</li>
</ul>
<h4>Add-ins</h4>
<ul class="options">
<li>
<input type="checkbox" name="addins" value="lettuce"> Lettuce
</li>
<li>
<input type="checkbox" name="addins" value="shredded_cheese"> Shredded Cheese
</li>
<li>
<input type="checkbox" name="addins" value="crema"> Crema
</li>
<li>
<input type="checkbox" name="addins" value="chipotle_crema"> Chipotle Crema
</li>
<li>
<input type="checkbox" name="addins" value="guacamole"> Guacamole
</li>
</ul>
<!-- This is where the values should display -->
<div id="totals">
<h4>Totals</h4>
<ul>
<li>Calories: <span id="totalCalories"> </span></li>
<li>Fat: <span id="totalFat"> </span>g</li>
<li>Sat. Fat: <span id="totalSatFat"> </span>g</li>
<li>Carbs: <span id="totalCarbs"> </span>g</li>
<li>Protein: <span id="totalProtein"> </span>g</li>
<li>Sodium: <span id="totalSodium"> </span>mg</li>
<li>Cholesterol: <span id="totalChloresterol"> </span>mg</li>
</ul>
</div>
<!-- #totals -->
</form>
</body>
</html>

You seem to be missing a $.sum plugin that adds the values of a jQuery collection. I dropped one in place (first hit on a Google search) and your code works fine.
http://jsfiddle.net/QM9gP/
$.fn.sum = function() {
var sum = 0;
this.each(function() {
if ( $(this).is(':input') ) {
var val = $(this).val();
} else {
var val = $(this).text();
}
sum += parseFloat( ('0' + val).replace(/[^0-9-\.]/g, ''), 10 );
});
return sum;
};
$('.options').on('change', 'input', function() {
var $self = $(this);
var inputType = $self.attr('type');
if (inputType == 'radio') {
$self.parent('li').addClass('active').siblings().removeClass('active');
} else if (inputType == 'checkbox') {
$self.parent('li').toggleClass('active');
}
runUpdate();
});
function runUpdate() {
console.log('run update');
// get the sum of the elements
var calories = $(".caloriesSum", '.active').sum();
var fat = $(".fatSum", '.active').sum();
var satfat = $(".satfatSum", '.active').sum();
var carbs = $(".carbsSum", '.active').sum();
var protein = $(".proteinSum", '.active').sum();
var sodium = $(".sodiumSum", '.active').sum();
var chloresterol = $(".chloesterolSum", '.active').sum();
// update the total
$("#totalCalories").text(+calories.toString());
$("#totalFat").text(+fat.toString());
$("#totalSatFat").text(+satfat.toString());
$("#totalCarbs").text(+carbs.toString());
$("#totalProtein").text(+protein.toString());
$("#totalSodium").text(+sodium.toString());
$("#totalChloresterol").text(+chloresterol.toString());
}

Categories

Resources