How do I show a DIV id based on three inputs? - javascript

I am fairly new to javascript and wish to ask for some guidance.
I am trying to make a function that shows a Div id based on three inputs:
Diet type
Number of calories
Number of meals
Thanks.
<div class="dietSelector">
<div class="diet">
<div class="header">
<h2>Diet</h2>
</div>
<li class=nav-item>
<input type="radio" onclick="create()" id="anything">Anything
</li>
<li class=nav-item>
<input type="radio"id="keto">Keto
</li>
<li class=nav-item>
<input type="radio" id="vegetarian">Vegetarian
</li>
<form class="form" id="form-control">
<label>Calories:
</label>
<input type="number" id="calories" min="500" max="5000">
<br><br>
<label>
Meals:
</label>
<input type="number" placeholder="2" id="meals" min="1" max="5">
<button onClick="create" value="create">Create</button>
<br><br>
</form>
</div>
</div>


There were a few changes required in your code, kindly check the updated code in the below snippet.
I guess, this is your desired output. Let me know if you require further assistance.
function generateMeal(event) {
event.preventDefault();
debugger;
const calories = Number(document.getElementById("calories").value);
const meals = Number(document.getElementById("meals").value);
const anythingPlan3 = document.getElementById("anythingPlan3");
anythingPlan3.style.display = "none";
if (
document.getElementById("anything").checked &&
calories > 1500 &&
calories < 2000 &&
meals == 4
) {
anythingPlan3.style.display = "block";
} else {
anythingPlan3.style.display = "none";
}
}
<div class="dietSelector">
<div class="dietContainer">
<div class="header">
<h2>Please choose your diet</h2>
</div>
<li class="nav-item">
<input
type="radio"
name="diets"
id="anything"
/>Anything
<img src="images/meat.png" class="diets" />
</li>
<li class="nav-item">
<input type="radio" name="diets" id="keto" />Keto
<img src="images/keto.png" class="diets" />
</li>
<li class="nav-item">
<input type="radio" name="diets" id="vegetarian" />Vegetarian
<img src="images/vegetarian.png" class="diets" />
</li>
<form class="diet" onsubmit="generateMeal(event)" id="dietForm">
<label
>Please enter the number of calories you wish to eat in a day:
</label>
<input
type="number"
placeholder="1800"
id="calories"
min="1000"
max="2500"
/>
<br /><br />
<label> How many meals you would like to eat: </label>
<input type="number" placeholder="4" id="meals" min="3" max="4" />
<button type="submit" value="Generate">Generate</button>
</form>
</div>
</div>
<!-- Div container for Anything Plan, 3 meals. 1500-2500 Calories-->
<div id="anythingPlan3" style="display: none;">
<h2>
Your delicious, personalised 3-meal plan of 'Anything' in a 1500-2000
calorie range:
</h2>
<h3 class="headings">Breakfast</h3>
<img src="images/oatmeal.jpg" class="mealImage" />
<span class="calories"> 628 Calories </span>
<br />
<a
class="recipes"
href="https://www.runningtothekitchen.com/strawberry-oatmeal/"
>
Strawberry Oatmeal</a
>
<br />
<span class="serving">2 Bowls</span>
<h3 class="headings">Lunch</h3>
<img src="images/drumsticks.jpg" class="mealImage" />
<span class="calories"> 504 Calories </span>
<br />
<a
class="recipes"
href="https://www.taste.com.au/recipes/smoky-bbq-drumsticks-carrot-noodle-salad/RUmTZzJv?r=healthy/qnLBa1zE"
>
Smokey Bbq Drumsticks and Carrot Noodle Salad</a
>
<br />
<span class="serving">1 serving</span>
<h3 class="headings">Dinner</h3>
<img src="images/meatballs.jpg" class="mealImage" />
<span class="calories"> 628 Calories</span>
<br />
<a
class="recipes"
href="https://www.bbcgoodfood.com/recipes/chicken-meatballs-quinoa-curried-cauliflower"
>
Chicken Meatballs with Quinoa & Curried cauliflower></a
>
<br />
<span class="serving">1 serving</span>
</div>


You need to dynamically set conditions and render the divs. That's the cleanest way I can recommend.
const divArr = [
{
id: "anythingPlan2",
calorieLow: 1000,
calorieHigh: 2000
},
{
id: "anythingPlan3",
calorieLow: 2000,
calorieHigh: 3000
},
];
Fiddle: https://jsfiddle.net/h6es573m/

Related

Adding new element to page

So, I'm pretty new to react so I'm still not quite sure what I'm doing. I had a project that used purely HTML, JQuery, and CSS but I'm trying to convert it to react. I have a page with checkboxes and when they are clicked a div is added with links inside of it and if unchecked the div is removed:
if(element.checked != false) {
$('.links').append('<div id="social">\
<p>\
Instagram\n\
<button type="button" id="instagram" onclick="removeInstagram()">-</button>\
</p>\
<p>\
Facebook\n\
<button type="button" id="facebook" onclick="removeFacebook()">-</button>\
</p>\
<p>\
Twitter\n\
<button type="button" id="twitter" onclick="removeTwitter()">-</button>\
</p>\
<p>\
Youtube\n\
<button type="button" id="youtube" onclick="removeYoutube()">-</button>\
</p>\
</div>');
}
else if(element.checked != true) {
$("#social").remove();
}
I'm trying to turn this into React inside a component but I'm not sure if I'm doing it right. I have the function linked to my checkbox but I don't know how to add/remove the links when clicked:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { findDOMNode } from "react-dom";
import $ from "jquery";
export default class LoginPage extends Component {
render() {
return (
<div id="container">
<section className="presets">
<div>
<label for="item1">Social Media:</label>
<input
type="checkbox"
name="item1"
id="item1"
onChange={this.socialMedia.bind(this)}
/>
</div>
<div>
<label for="item2">Tech:</label>
<input
type="checkbox"
name="item2"
id="item2"
onChange="toggleTech(this)"
/>
</div>
<div>
<label for="item3">Sports:</label>
<input
type="checkbox"
name="item3"
id="item3"
onChange="toggleSports(this)"
/>
</div>
<div>
<label for="item4">News:</label>
<input
type="checkbox"
name="item4"
id="item4"
onChange="toggleNews(this)"
/>
</div>
<div>
<label for="item5">Games:</label>
<input
type="checkbox"
name="item5"
id="item5"
onChange="toggleGames(this)"
/>
</div>
<div>
<label for="item3">School:</label>
<input
type="checkbox"
name="item6"
id="item6"
onChange="toggleSchool(this)"
/>
</div>
<div>
<button
type="button"
id="custom"
onClick="customHandler(this)"
>
Add Custom Site
</button>
</div>
</section>
<section className="links"></section>
</div>
);
}
// Social(element) {
// if (element.checked != false) {
// $(".links").append(
// '<div id="social">\
// <p>\
// Instagram\n\
// <button type="button" id="instagram" onclick="removeInstagram()">-</button>\
// </p>\
// <p>\
// Facebook\n\
// <button type="button" id="facebook" onclick="removeFacebook()">-</button>\
// </p>\
// <p>\
// Twitter\n\
// <button type="button" id="twitter" onclick="removeTwitter()">-</button>\
// </p>\
// <p>\
// Youtube\n\
// <button type="button" id="youtube" onclick="removeYoutube()">-</button>\
// </p>\
// </div>'
// );
// } else if (element.checked != true) {
// $("#social").remove();
// }
// }
}
Any help with this would be appreciated, I am using the MERN stack for this.

Try this with func comp and useState
export const LoginPage = () => {
const [isChecked, setIsChecked] = useState(false);
return (
<div id="container">
<section className="presets">
<div>
<label for="item1">Social Media:</label>
<input
type="checkbox"
name="item1"
id="item1"
onChange={() => setIsChecked(!isChecked)}
/>
</div>
<div>
<label for="item2">Tech:</label>
<input
type="checkbox"
name="item2"
id="item2"
onChange="toggleTech(this)"
/>
</div>
<div>
<label for="item3">Sports:</label>
<input
type="checkbox"
name="item3"
id="item3"
onChange="toggleSports(this)"
/>
</div>
<div>
<label for="item4">News:</label>
<input
type="checkbox"
name="item4"
id="item4"
onChange="toggleNews(this)"
/>
</div>
<div>
<label for="item5">Games:</label>
<input
type="checkbox"
name="item5"
id="item5"
onChange="toggleGames(this)"
/>
</div>
<div>
<label for="item3">School:</label>
<input
type="checkbox"
name="item6"
id="item6"
onChange="toggleSchool(this)"
/>
</div>
<div>
<button
type="button"
id="custom"
onClick="customHandler(this)"
>
Add Custom Site
</button>
</div>
</section>
<section className="links">
{isChecked ? <div id="social">
<p>
Instagram
<button type="button" id="instagram" onclick="removeInstagram()">-</button>\
</p>
<p>
Facebook
<button type="button" id="facebook" onclick="removeFacebook()">-</button>\
</p>
<p>
Twitter
<button type="button" id="twitter" onclick="removeTwitter()">-</button>\
</p>
<p>
Youtube
<button type="button" id="youtube" onclick="removeYoutube()">-</button>\
</p>
</div> : null }
</section>
</div>
);
}

You should use state and ternary expression. should be something like this:
And you should not change the DOM with jquery while you are working with react.
import React, { Component } from "react";
export default class LoginPage extends Component {
constructor(){
super();
this.state ={
isElementChecked: false
}
}
render() {
return (
<div id="container">
<section className="presets">
<div>
<label for="item1">Social Media:</label>
<input
type="checkbox"
name="item1"
id="item1"
checked={this.state.isElementChecked}
onChange={this.setState({isElementChecked: !this.state.isElementChecked})}
/>
</div>
<div>
<label for="item2">Tech:</label>
<input
type="checkbox"
name="item2"
id="item2"
onChange="toggleTech(this)"
/>
</div>
<div>
<label for="item3">Sports:</label>
<input
type="checkbox"
name="item3"
id="item3"
onChange="toggleSports(this)"
/>
</div>
<div>
<label for="item4">News:</label>
<input
type="checkbox"
name="item4"
id="item4"
onChange="toggleNews(this)"
/>
</div>
<div>
<label for="item5">Games:</label>
<input
type="checkbox"
name="item5"
id="item5"
onChange="toggleGames(this)"
/>
</div>
<div>
<label for="item3">School:</label>
<input
type="checkbox"
name="item6"
id="item6"
onChange="toggleSchool(this)"
/>
</div>
<div>
<button
type="button"
id="custom"
onClick="customHandler(this)"
>
Add Custom Site
</button>
</div>
</section>
<section className="links">
{this.state.isElementChecked? <div id="social">
<p>
Instagram
<button type="button" id="instagram" onclick="removeInstagram()">-</button>\
</p>
<p>
Facebook
<button type="button" id="facebook" onclick="removeFacebook()">-</button>\
</p>
<p>
Twitter
<button type="button" id="twitter" onclick="removeTwitter()">-</button>\
</p>
<p>
Youtube
<button type="button" id="youtube" onclick="removeYoutube()">-</button>\
</p>
</div> : null}
</section>
</div>
);
}
}

jQuery find span that has class and hide div a few parents up

I am trying to locate this span with a certain class and then work up finding closest div with another specified class and hide it. Perhaps I'm missing something?
Can anyone see why?
$(document).ready(function() {
if ($('.ty-product-detail .product-left .stock-wrap span').hasClass('ty-qty-out-of-stock')) {
$(this).closest('.ty-product-block__option').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ty-product-block ty-product-detail">
<div class="ty-product-block__wrapper clearfix">
<div class="ty-product-block__img-wrapper">
<div class="ty-product-block__img cm-reload-487" id="product_images_487_update">
<div class="ty-product-img cm-preview-wrapper">
<a id="det_img_link_48756b03bbdd708a_2203" data-ca-image-id="preview[product_images_48756b03bbdd708a]" class="cm-image-previewer cm-previewer ty-previewer" data-ca-image-width="550" data-ca-image-height="330" href="http://beanbags.ambientlounge.com/images/thumbnails/550/550/detailed/2/sakura-pink-2_te4i-3d.jpg?t=1449211457"
title="">
<img class="ty-pict " id="det_img_48756b03bbdd708a_2203" src="http://beanbags.ambientlounge.com/images/thumbnails/280/280/detailed/2/sakura-pink-2_te4i-3d.jpg?t=1449387170" alt="" title="" data-cloudzoom="zoomImage: "http://beanbags.ambientlounge.com/images/thumbnails/550/550/detailed/2/sakura-pink-2_te4i-3d.jpg?t=1449211457""
style="-webkit-user-select: none;"><span class="ty-previewer__icon hidden-phone"></span>
</a>
<a id="det_img_link_48756b03bbdd708a_1806" data-ca-image-id="preview[product_images_48756b03bbdd708a]" class="cm-image-previewer hidden cm-previewer ty-previewer" data-ca-image-width="400" data-ca-image-height="271" href="http://beanbags.ambientlounge.com/images/thumbnails/400/400/detailed/1/dims-zen.jpg?t=1440742425"
title="">
<img class="ty-pict " id="det_img_48756b03bbdd708a_1806" src="http://beanbags.ambientlounge.com/images/thumbnails/280/280/detailed/1/dims-zen.jpg?t=1440919130" alt="" title="" data-cloudzoom="zoomImage: "http://beanbags.ambientlounge.com/images/thumbnails/400/400/detailed/1/dims-zen.jpg?t=1440742425""><span class="ty-previewer__icon hidden-phone"></span>
</a>
</div>
<div class="ty-product-thumbnails ty-center cm-image-gallery" id="images_preview_48756b03bbdd708a" style="width: 280px;">
<a data-ca-gallery-large-id="det_img_link_48756b03bbdd708a_2203" class="cm-thumbnails-mini active ty-product-thumbnails__item">
<img class="ty-pict " id="det_img_48756b03bbdd708a_2203_mini" src="http://beanbags.ambientlounge.com/images/thumbnails/35/35/detailed/2/sakura-pink-2_te4i-3d.jpg?t=1449387170" alt="" title="">
</a>
<a data-ca-gallery-large-id="det_img_link_48756b03bbdd708a_1806" class="cm-thumbnails-mini ty-product-thumbnails__item">
<img class="ty-pict " id="det_img_48756b03bbdd708a_1806_mini" src="http://beanbags.ambientlounge.com/images/thumbnails/35/35/detailed/1/dims-zen.jpg?t=1440919130" alt="" title="">
</a>
</div>
<!-- Inline script moved to the bottom of the page -->
<!-- Inline script moved to the bottom of the page -->
<!-- Inline script moved to the bottom of the page -->
<!-- Inline script moved to the bottom of the page -->
<!--product_images_487_update-->
</div>
</div>
<div class="ty-product-block__left">
<form action="http://beanbags.ambientlounge.com/" method="post" name="product_form_487" enctype="multipart/form-data" class="cm-disable-empty-files cm-ajax cm-ajax-full-render cm-ajax-status-middle cm-processed-form">
<input type="hidden" name="result_ids" value="cart_status*,wish_list*,checkout*,account_info*">
<input type="hidden" name="redirect_url" value="index.php?dispatch=products.view&product_id=487">
<input type="hidden" name="product_data[487][product_id]" value="487">
<h1 class="ty-product-block-title">Zen Lounger - Sakura Pink</h1>
<div class="ty-product-block__sku">
<div class="ty-control-group ty-sku-item cm-reload-487" id="sku_update_487">
<input type="hidden" name="appearance[show_sku]" value="1">
<label class="ty-control-group__label" id="sku_487">CODE:</label>
<span class="ty-control-group__item" id="product_code_487">5528</span>
<!--sku_update_487-->
</div>
</div>
<hr class="clear">
<div class="product-left">
<div class="prices-container price-wrap">
<div class="ty-product-prices">
<span class="cm-reload-487" id="old_price_update_487">
<!--old_price_update_487--></span>
<div class="ty-product-block__price-actual">
<span class="cm-reload-487 ty-price-update" id="price_update_487">
<input type="hidden" name="appearance[show_price_values]" value="1">
<input type="hidden" name="appearance[show_price]" value="1">
<span class="ty-price" id="line_discounted_price_487"><span class="ty-price-num">$</span><span id="sec_discounted_price_487" class="ty-price-num">149.00</span></span>
<!--price_update_487-->
</span>
</div>
<span class="cm-reload-487" id="line_discount_update_487">
<input type="hidden" name="appearance[show_price_values]" value="1">
<input type="hidden" name="appearance[show_list_discount]" value="1">
<!--line_discount_update_487--></span>
</div>
</div>
<div class="ty-product-block__option">
<div class="cm-reload-487" id="product_options_update_487">
<input type="hidden" name="appearance[show_product_options]" value="1">
<input type="hidden" name="appearance[details_page]" value="1">
<input type="hidden" name="additional_info[info_type]" value="D">
<input type="hidden" name="additional_info[get_icon]" value="1">
<input type="hidden" name="additional_info[get_detailed]" value="1">
<input type="hidden" name="additional_info[get_additional]" value="">
<input type="hidden" name="additional_info[get_options]" value="1">
<input type="hidden" name="additional_info[get_discounts]" value="1">
<input type="hidden" name="additional_info[get_features]" value="">
<input type="hidden" name="additional_info[get_extra]" value="">
<input type="hidden" name="additional_info[get_taxed_prices]" value="1">
<input type="hidden" name="additional_info[get_for_one_product]" value="1">
<input type="hidden" name="additional_info[detailed_params]" value="1">
<input type="hidden" name="additional_info[features_display_on]" value="C">
<div class="cm-picker-product-options ty-product-options" id="opt_487">
<div class="ty-control-group ty-product-options__item product-list-field clearfix" id="opt_487_365">
<label class="ty-control-group__label ty-product-options__item-label">Option:</label>
<ul id="option_487_365_group" class="ty-product-options__elem">
<li class="hidden">
<input type="hidden" name="product_data[487][product_options][365]" value="731" id="option_487_365">
</li>
<li>
<label id="option_description_487_365_731" class="ty-product-options__box option-items cover-only">
<input type="radio" class="radio" name="product_data[487][product_options][365]" value="731" checked="checked" onclick="fn_change_options('487', '487', '365');">Cover only
</label>
</li>
<li>
<label id="option_description_487_365_732" class="ty-product-options__box option-items with-filling">
<input type="radio" class="radio" name="product_data[487][product_options][365]" value="732" onclick="fn_change_options('487', '487', '365');">
</label>
</li>
</ul>
</div>
</div>
<!-- Inline script moved to the bottom of the page -->
<!--product_options_update_487-->
</div>
</div>
<div class="ty-product-block__advanced-option">
<div class="cm-reload-487" id="advanced_options_update_487">
<!--advanced_options_update_487-->
</div>
</div>
<div class="ty-product-block__field-group">
<div class="cm-reload-487 stock-wrap" id="product_amount_update_487">
<input type="hidden" name="appearance[show_product_amount]" value="1">
<div class="ty-control-group product-list-field">
<label class="ty-control-group__label">Availability:</label>
<span class="ty-qty-out-of-stock ty-control-group__item" id="out_of_stock_info_487">Out of stock</span>
</div>
<!--product_amount_update_487-->
</div>
<div class="cm-reload-487" id="qty_update_487">
<input type="hidden" name="appearance[show_qty]" value="">
<input type="hidden" name="appearance[capture_options_vs_qty]" value="">
<input type="hidden" name="product_data[487][amount]" value="1">
<!--qty_update_487-->
</div>
<div class="ty-product-block__button">
<div class="cm-reload-487 " id="add_to_cart_update_487">
<input type="hidden" name="appearance[show_add_to_cart]" value="1">
<input type="hidden" name="appearance[show_list_buttons]" value="1">
<input type="hidden" name="appearance[but_role]" value="big">
<input type="hidden" name="appearance[quick_view]" value="">
<div class="ty-control-group">
<label for="sw_product_notify_487" class="ty-strong">
<input id="sw_product_notify_487" type="checkbox" class="checkbox cm-switch-availability cm-switch-visibility" name="product_notify" onclick="if (!this.checked) {Tygh.$.ceAjax('request', 'http://beanbags.ambientlounge.com/index.php?dispatch=products.product_notifications&enable=' + 'N&product_id=487&email=' + $('#product_notify_email_487').get(0).value, {cache: false});}">Notify me when this product is back in stock</label>
</div>
<div class="ty-control-group ty-input-append ty-product-notify-email hidden" id="product_notify_487">
<input type="hidden" name="enable" value="Y">
<input type="hidden" name="product_id" value="487">
<label id="product_notify_email_label" for="product_notify_email_487" class="cm-required cm-email hidden">Email</label>
<input type="text" name="hint_email" id="product_notify_email_487" size="20" value="Enter e-mail address" class="ty-product-notify-email__input cm-hint" title="Enter e-mail address">
<button class="ty-btn-go cm-ajax" type="submit" name="dispatch[products.product_notifications]" title="Go"><i class="ty-btn-go__icon ty-icon-right-dir"></i>
</button>
</div>
<!--add_to_cart_update_487-->
</div>
</div>
</div>
<p class="clear filled-msg cover-only">* If you don't choose to add filling you will receive the cover only.</p>
<p class="clear filled-msg filled">* Comes pre-filled with microbeads</p>
</div>
<div class="product-right">
<div class="ty-product-block__note">
<p style="text-align: center;">
<img src="http://www.beanbags.com.au/images/ambient-lounge.jpg">
</p>
</div>
</div>
</form>
<div class="clear"></div>
<!-- Inline script moved to the bottom of the page -->
<div class="ty-tabs cm-j-tabs clearfix">
<ul class="ty-tabs__list">
<li id="description" class="ty-tabs__item cm-js active"><a class="ty-tabs__a">Description</a>
</li>
<li id="product_tab_11" class="ty-tabs__item cm-js"><a class="ty-tabs__a">Colour</a>
</li>
<li id="product_tab_10" class="ty-tabs__item cm-js"><a class="ty-tabs__a">Fabric</a>
</li>
<li id="features" class="ty-tabs__item cm-js"><a class="ty-tabs__a">Features</a>
</li>
</ul>
</div>
<div class="cm-tabs-content ty-tabs__content clearfix" id="tabs_content">
<div id="content_description" class="ty-wysiwyg-content content-description" style="display: block;">
<div>
<h2>Ambient Lounge Zen Lounger - Sakura Pink</h2>
<p>
Dive onto the big pink pad and it will hug your body with all the love and warmth of a big squishy teddy bear. You will fall in love with this super-soft square cushioned bean bag becasue of the difference in fabric and tactility. Quite simply, we use
premuim open weave fabrics that make you want to hug your Zen close to your skin on a cold winter's night. The design of the Zen is just so flexible and versatile - it doesnt take up lots of space in the house but yet you can sprawl out
full body to study or sit up straight to watch the TV. The natural colour scheme means it can go just about anywhere and look good. Use it as your reliable crashmat after a long day on your feet.
</p>
<p>1 bag of 300lt is enough <u>Bean Filling</u> for the luxurious Conversion Lounger (290lt needed).</p>
</div>
</div>
<div id="content_product_tab_11" class="ty-wysiwyg-content content-product_tab_11" style="display: none;">
<div class="ty-wysiwyg-content">
<p>
Make your living room or playroom pop with this precious pink plus-size luxury lounger. Children love this friendly fresh color while adults love that it also carries a deep sense of sophistication. Our world-class designers chose this decadent pink because
of its versatility and ability to sit well in many types of interior settings.
</p>
</div>
</div>
<div id="content_product_tab_10" class="ty-wysiwyg-content content-product_tab_10" style="display: none;">
<div class="ty-wysiwyg-content">
<p>
Extremely soft and tactile on the surface and backed with TC to give it extra strength and body for hard wear and form. Super thick sofa weave to give you a lush seating experience.
</p>
<p>
40％ viscose, 60% polyester, 560g/m.
</p>
</div>
</div>
<div id="content_product_tab_9" class="ty-wysiwyg-content content-product_tab_9">
</div>
<div id="content_features" class="ty-wysiwyg-content content-features" style="display: none;">
<div class="ty-product-feature">
<span class="ty-product-feature__label">Manufacture:</span>
<div class="ty-product-feature__value">Ambient Lounge</div>
</div>
<div class="ty-product-feature">
<span class="ty-product-feature__label">Style:</span>
<div class="ty-product-feature__value">Zen Lounger</div>
</div>
<div class="ty-product-feature">
<span class="ty-product-feature__label">Type:</span>
<div class="ty-product-feature__value">Interiors</div>
</div>
</div>
<div id="content_discussion" class="ty-wysiwyg-content content-discussion">
</div>
</div>
</div>
</div>
</div>

If you have more than one span elements for this, then you can use each loop through it like below:
$('.ty-product-detail .product-left .stock-wrap span').each(function() {
if ($(this).hasClass('ty-qty-out-of-stock')) {
$(this).closest('.ty-product-block__option').hide();
}
});

Managed to work out the solution with the help of "Parixit" Answer it got me in the right direction, i cleaned up the HTML so others can see the Answer better.
$(document).ready(function() {
$('.ty-product-detail .product-left .stock-wrap span').each(function() {
if ($(this).hasClass('ty-qty-out-of-stock')) {
$('.ty-product-detail').find('.ty-product-options').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ty-product-block ty-product-detail">
<div class="product-left">
<div class="cm-picker-product-options ty-product-options" id="opt_487">
<div class="ty-control-group ty-product-options__item product-list-field clearfix" id="opt_487_365">
<label class="ty-control-group__label ty-product-options__item-label">Option:</label>
<ul id="option_487_365_group" class="ty-product-options__elem">
<li>
<label id="option_description_487_365_731" class="ty-product-options__box option-items cover-only">
<input type="radio" class="radio" name="product_data[487][product_options][365]" value="731" checked="checked" onclick="fn_change_options('487', '487', '365');">Cover only
</label>
</li>
</ul>
</div>
</div>
<div class="ty-product-block__field-group">
<div class="cm-reload-487 stock-wrap" id="product_amount_update_487">
<input type="hidden" name="appearance[show_product_amount]" value="1">
<div class="ty-control-group product-list-field">
<label class="ty-control-group__label">Availability:</label>
<span class="ty-qty-out-of-stock ty-control-group__item" id="out_of_stock_info_487">Out of stock</span>
</div>
<!--product_amount_update_487-->
</div>
</div>
</div>
</div>

CSS class toggle with jquery on different id's

I'm trying to write some Jquery code for toggling two different class on different ids.
Since the CMS strips out inline css, I need to find a solution for "display:none"
I have written two css classes, in hopes of toggling between them, but not really sure if this is the direction to go .
I'm very new to Stack and Jquery so any info or corrections are welcomed
Here is the code:
CSS
.displaynone{
display:none;
}
.displayblock{
display:block;
}
HTML & JAVASCRIPT
<form>
<input onclick="javascript:resetForm();document.forms[0].reset();" type="reset" value="Reset" /> 
<br />
<br />
<h4>Are you number 1?</h4>
<label>
<input name="one" onclick="unhide('hidden-input', this, 'hidden-input2')" type="radio" value="1" /> Yes
<br />
</label>
<label>
<input name="one" onclick="unhide('hidden-input2', this, 'hidden-input')" type="radio" value="2" /> No
<br />
</label>
<div id="hidden-input2" style="display: none;">
<p>If you are not , please download:
<br />
<a href="#" target="_blank">
<span style="font-size: x-small;">number one</span>
</a>
</p>
</div>
<div id="hidden-input" style="display: none;">
<hr />
<h4>Were you selected for too many hours?</h4>
<label>
<input name="hours" onclick="unhide('hidden-input3', this, 'hidden-input4')" type="radio" value="1" /> Yes
<br />
</label>
<div id="hidden-input3" style="display: none;">
<p>If you were selected for too many hours, please download:
<br />
<a href="#" target="blank">
<span style="font-size: x-small;">Hours</span>
</a>
</p>
</div>
<label>
<input name="hours" onclick="unhide('hidden-input4', this, 'hidden-input3')" type="radio" value="2" /> No
<br />
</label>
<div id="hidden-input4" style="display: none;">
<hr />
<h4>Were you selected for number 3?</h4>
<label>
<input name="gpa" onclick="unhide('hidden-input5', this, 'hidden-input6')" type="radio" value="1" /> Yes
<br />
</label>
<div id="hidden-input5" style="display: none;">
<p>If you were selected for number 3, please download:
<br />
<a href="#" target="blank">
<span style="font-size: x-small;">Form for Three </span>
</a>
</p>
</div>
<label>
<input name="gpa" onclick="unhide('hidden-input6', this, 'hidden-input5')" type="radio" value="2" /> No
<br />
</label>
<div id="hidden-input6" style="display: none;">
<p>Were you selected for 4 :
<br />
<a href="#" target="blank">
<span style="font-size: x-small;">Form for 4</span>
</a>
</p>
</div>
</div>
</div>undefined
</form>

change your element to default as display:block and define a class
.hidden{
display:none;
}
and use this to toggle that class on/off
$('#YOURID').toggleClass("hidden")

Easier to just have the hidden class and remove it when you want to show the element. That way you don't have to worry about altering inline, block and table display properties.
// hide the thing
$('.thing').addClass('displaynone');
// show the thing
$('.thing').removeClass('displaynone');

demo: http://jsfiddle.net/swm53ran/401/ something like this? i started recreating the logic, but i didnt finish it. you should get a gist of what's going, and if you have any questions on it, let me know.
$(document).ready(function() {
$('input[type="radio"]').on('change', function() {
var name = $(this).attr('name');
var value = $(this).val();
console.log(name, value);
if (name == 'one') { // if number 1 question
if (value == 2) {
$('#hidden-input2').show(); // if no, show the download text
}
else {
$('#hidden-input2').hide(); // if yes, hide the dl text
}
$('#hidden-input').show(); // always show the hours question
}
if (name == 'hours') { // if hours question
if (value == 2) {
$('#hidden-input4').show() // if no, show number 3 question
}
else {
$('#hidden-input4').hide() // if no, hide number 3 question
}
}
});
});

It's generally advisable to avoid targeting IDs, and instead use common classes inside grouping wrappers.
<div>
<label>
<input name="one" class="selector yes" type="radio" value="1" />Yes
<br />
</label>
<label>
<input name="one" class="selector no" type="radio" value="2" />No
<br />
</label>
<div class="followup yes hidden">
<p>If you are not , please download:
<br /> <a href="#" target="_blank">
<span style="font-size: x-small;">number one</span>
</a>
</p>
</div>
<div class="followup no hidden">
<hr />
<h4>Were you selected for too many hours?</h4>
</div>
</div>
$('.selector').click(function () {
$(this).closest('label').siblings('.followup').hide();
if ($(this).is('.yes')) {
$(this).closest('label').siblings('.followup.yes').show();
} else {
$(this).closest('label').siblings('.followup.no').show();
}
});
Demo
This single function is reusable for any number of groupings having the same structure, even if nested.
Nested demo

How to make my ng-if stop showing after function success

I want my ng-if="AddEmp" to go false after my ng-click function has succeeded so the content in the ng-if doesn't show any longer, but I can't seem to make it happen.
I use the ng-if since I want the content in the form not to show the next time the form is visible. I always want it to be blank from the start.
How do I make the ng-if="AddEmp" disappear after this function has succeeded?
UserRegistration = function (Role, Id, Gender, Firstnamn, Lastnamn, DateOfBirth, phone, ClassId)
Here is my code:
Entire pages :
angular.module('App')
.controller('SchoolAdminController',
['$scope', '$http', '$location', 'getAllRolesFactory', 'checkUserRolesFactory', 'userRegistrationFactory', 'getAllClassesFactory',
function ($scope, $http, $location, getAllRolesFactory, checkUserRolesFactory, userRegistrationFactory, getAllClassesFactory)
{
var vm = this;
vm.allRoles;
vm.userWithRoles;
vm.userWithoutRoles;
vm.noUsersFound;
vm.allClasses;
getAllRolesFactory.get().then(function (response) {
vm.allRoles = JSON.parse('[' + response.data + ']');
});
vm.AddUser = function ()
{
$location.path('/Register');
}
vm.EditEmployee = function () {
$location.path('/SchoolAdmin/EditEmployee');
}
vm.UserWithoutRoles = function () {
checkUserRolesFactory.get(0).then(function (response) {
vm.userWithoutRoles = JSON.parse('[' + response.data + ']');
if (vm.userWithoutRoles.length < 1) {
vm.noUsersFound = 'Inga användare finns att hantera';
}
});
vm.GetAllClasses();
}
vm.UserWithRoles = function () {
checkUserRolesFactory.get(1).then(function (response) {
vm.userWithRoles = JSON.parse('[' + response.data + ']');
console.log(vm.userWithRoles);
});
}
vm.UserRegistration = function (Role, Id, Gender, Firstnamn, Lastnamn, DateOfBirth, phone, ClassId) {
vm.registerUserInfo = [];
vm.roleInfo = [];
vm.registerUserInfo.push({
Firstname: Firstnamn,
Lastname: Lastnamn,
DateOfBirth: DateOfBirth,
Gender: Gender,
UserId: Id,
ClassId: ClassId,
})
vm.roleInfo.push({
Role : Role,
})
console.log(vm.registerUserInfo);
userRegistrationFactory.register(vm.registerUserInfo, Role).then(function (response) {
$scope.AddEmp = false;
console.log(vm.AddEmp);
console.log("Hello my name is linsey lohan");
});
}
vm.GetAllClasses = function () {
getAllClassesFactory.get().then(function (response) {
console.log(vm.allClasses);
vm.allClasses = JSON.parse('[' + response.data + ']');
console.log(vm.allClasses);
})
}
}]);
#{
ViewBag.Title = "EditEmployee";
}
<div ng-controller="SchoolAdminController as SchoolAdmCtrl">
<div class="col-md-8 gradeSelect" ng-click="SchoolAdmCtrl.UserWithRoles(); editEmp = ! editEmp; AddEmp = false" id="editEmp">
<a><h1>Klicka här redigera Anställd:</h1></a>
</div>
<div class="col-md-8 gradeSelect" ng-if="editEmp">
<div>
#*TODO: Fixa, ta bort Gradeselect på hela formuläret.
En admin ska inte redigera sigsjälv på samma sätt som andra users i systemet.
*#
<form name="EditEmpForm">
<fieldset>
<legend>Välj anställd för hantering</legend>
<ol>
<li>
<label>
Välj roll att tilldela användare<br />
<select ng-model="SelectRole" name="SelectRole_field" ng-options="role as role for role in SchoolAdmCtrl.allRoles" required></select>
<span style="color:red" ng-show="EditEmpForm.SelectRole_field.$error.required">Välj roll</span>
</label>
</li>
<li>
<label>
Välj anställd
<select ng-model="selectUserWith" name="SelectUserWith_field"
ng-options=" user as user.Email for user in SchoolAdmCtrl.userWithRoles | filter : {Role : SelectRole}" required></select>
<span style="color:red" ng-show="EditEmpForm.SelectUserWith_field.$error.required">Välj användare</span>
</label>
</li>
<li>
<label>
Sök på person<br />
<input ng-model="Sokperson" type="text" />
</label>
</li>
</ol>
</fieldset>
<fieldset>
<legend>Redigera anställd</legend>
<ol>
<li>
<label>
Kön<br />
<select ng-model="Kon" name="Kon_field" required>
<option>Female</option>
<option>Male</option>
</select>
<span style="color:red" ng-show="EditEmpForm.Kon_field.$error.required">Välj kön</span>
</label>
</li>
<li>
<label>
Förnamn<br />
<input ng-model="Fornamn" name="Fornamn_field" type="text" required ng-minlength="2" ng-maxlength="20" ng-pattern="/^[a-z ,.'-]+$/i" />
<span style="color:red" ng-show="EditEmpForm.Fornamn_field.$error.minlength">För kort!</span>
<span style="color:red" ng-show="EditEmpForm.Fornamn_field.$error.maxlength">För långt!</span>
<span style="color:red" ng-show="EditEmpForm.Fornamn_field.$error.pattern"> A-Z -'!</span>
</label>
</li>
<li>
<label>
Efternamn<br />
<input ng-model="Efternamn" name="Efternamn_field" type="text" required ng-minlength="2" ng-maxlength="20" ng-pattern="/^[a-z ,.'-]+$/i" />
<span style="color:red" ng-show="EditEmpForm.Efternamn_field.$error.minlength">För kort!</span>
<span style="color:red" ng-show="EditEmpForm.Efternamn_field.$error.maxlength">För långt!</span>
<span style="color:red" ng-show="EditEmpForm.Efternamn_field.$error.pattern"> A-Z -'!</span>
</label>
</li>
<li>
<label>
Personnummer<br />
<input ng-model="Personnummer" name="Personnummer_field" type="text" placeholder="ÅÅÅÅ-MM-DD" ng-minlength="10" ng-maxlength="10" ng-pattern="/^((\d{4})-(\d{2})-(\d{2})|(\d{2})\/(\d{2})\/(\d{4}))$/" required />
<span style="color:red" ng-show="EditEmpForm.Personnummer_field.$error.pattern">Följ "ÅÅÅÅ-MM-DD".</span>
</label>
</li>
<li>
<label>
Telefonnummer<br />
<input ng-model="Telefon" name="Telefon_field" type="text" required ng-minlength="9" ng-maxlength="15" ng-pattern="/\(?([0-9]{3})\)?([ .-]?)([0-9]{3})\2([0-9]{4})/" />
<span style="color:red" ng-show="EditEmpForm.Telefon_field.$error.pattern">Felaktigt telefonformat.</span>
</label>
</li>
</ol>
</fieldset>
<fieldset ng-if="SelectRole=='Guardian'">
<legend>Redigera arbetsuppgifter</legend>
<ol>
<li>
<label>Välj Barn</label>
<select ng-model="selectedItem"></select>
</li> #* lägga till knapp för att kunna lägga till flera barn*#
<li>
<label>Sök barn</label>
<input type="text" requried />
</li>
</ol>
</fieldset>
<fieldset ng-if="SelectRole=='Student'">
<legend>Redigera arbetsuppgifter</legend>
<ol>
<li>
<label>Välj klass</label>
<select ng-model="selectedItem"></select>
</li>
<li>
<label>Sök på klassnamn</label>
<input type="text" required />
</li>
<li>
<label>
Förmyndare 1
<input type="text" required />
</label>
</li>
<li>
<label>
Förmyndare 2
<input type="text" required />
</label>
</li>
</ol>
</fieldset>
<fieldset ng-if="SelectRole=='Teacher'">
<legend>Redigera arbetsuppgifter</legend>
<ol>
<li>
<label>Välj klass</label>
<select ng-model="selectedItem"></select>
</li>
<li>
<label>Sök på klassnamn</label>
<input type="text" required />
</li>
<li>
<label>Aktuella klasser för anställd</label>
<ul>
<li>
<label>klass 1 test</label>
<input type="checkbox" />
</li>
<li>
<label>klass 2 test</label>
<input type="checkbox" />
</li>
</ul>
</li>
<li>
<label> Välj Kurs</label>
<select ng-model="selectedItem"></select>
</li>
<li>
<label>Sök på kursnamn</label>
<input type="text" required />
</li>
<li>
<label>Aktuella kurser för anställd</label>
<ul>
<li>
<label>kurs 1 test</label>
<input type="checkbox" />
</li>
<li>
<label>kurs 2 test</label>
<input type="checkbox" />
</li>
</ul>
</li>
<li>
</ol>
</fieldset>
<fieldset>
<button type=submit>Spara ändringar</button>
</fieldset>
</form>
</div>
</div>
<div class="col-md-8 gradeSelect" ng-click="SchoolAdmCtrl.UserWithoutRoles(); SchoolAdmCtrl.GetAllClasses(); AddEmp = ! AddEmp; editEmp = false" id="AddEmp">
<a><h1>Klicka här för att hantera anställda som ännu inte har roller i systemet</h1></a>
</div>
{{AddEmp}}
<div class="col-md-8 gradeSelect" ng-if="AddEmp">
<div>
<h1 style="color:red">{{SchoolAdmCtrl.noUsersFound}}</h1>
<form name="AddEmpForm" ng-if="SchoolAdmCtrl.noUsersFound !=''">
<fieldset>
<legend>Välj anställd för hantering</legend>
<ol>
<li>
<label>
Välj roll att tilldela användare<br />
<select ng-model="SelectRole2" name="SelectRole2_field" ng-options="role as role for role in SchoolAdmCtrl.allRoles" required></select>
<span style="color:red" ng-show="AddEmpForm.SelectRole2_field.$error.required">Välj roll</span>
</label>
</li>
<li>
<label>
Hantera anställda som ännu inte har roller i systemet<br />
<select ng-model="selectUserWithout2" name="SelectUserWithout2_field"
ng-options="user as user.Email for user in SchoolAdmCtrl.userWithoutRoles | filter : Sokperson2"
required></select>
<span style="color:red" ng-show="AddEmpForm.SelectUserWithout2_field.$error.required">Välj användare</span>
</label>
</li>
<li>
<label>
Sök på person<br />
<input ng-model="Sokperson2" type="text" />
</label>
</li>
</ol>
</fieldset>
<fieldset>
<legend>Redigera anställd</legend>
<ol>
<li>
<label>
Kön<br />
<select ng-model="Kon2" name="Kon2_field" required>
<option>Female</option>
<option>Male</option>
</select>
<span style="color:red" ng-show="AddEmpForm.Kon2_field.$error.required">Välj kön</span>
</label>
</li>
<li>
<label>
Förnamn<br />
<input ng-model="Fornamn2" name="Fornamn2_field" type="text" required ng-minlength="2" ng-maxlength="20" ng-pattern="/^[a-z ,.'-]+$/i" />
<span style="color:red" ng-show="AddEmpForm.Fornamn2_field.$error.minlength">För kort!</span>
<span style="color:red" ng-show="AddEmpForm.Fornamn2_field.$error.maxlength">För långt!</span>
<span style="color:red" ng-show="AddEmpForm.Fornamn2_field.$error.pattern"> A-Z -'!</span>
</label>
</li>
<li>
<label>
Efternamn<br />
<input ng-model="Efternamn2" name="Efternamn2_field" type="text" required ng-minlength="2" ng-maxlength="20" ng-pattern="/^[a-z ,.'-]+$/i" />
<span style="color:red" ng-show="AddEmpForm.Efternamn2_field.$error.minlength">För kort!</span>
<span style="color:red" ng-show="AddEmpForm.Efternamn2_field.$error.maxlength">För långt!</span>
<span style="color:red" ng-show="AddEmpForm.Efternamn2_field.$error.pattern"> A-Z -'!</span>
</label>
</li>
<li>
<label>
Personnummer<br />
<input ng-model="Personnummer2" name="Personnummer2_field" type="text" placeholder="ÅÅÅÅ-MM-DD" ng-minlength="10" ng-maxlength="10" ng-pattern="/^((\d{4})-(\d{2})-(\d{2})|(\d{2})\/(\d{2})\/(\d{4}))$/" required />
<span style="color:red" ng-show="AddEmpForm.Personnummer2_field.$error.pattern">Följ "ÅÅÅÅ-MM-DD".</span>
</label>
</li>
<li>
<label>
Telefonnummer<br />
<input ng-model="Telefon2" name="Telefon2_field" type="text" required ng-minlength="9" ng-maxlength="15" ng-pattern="/\(?([0-9]{3})\)?([ .-]?)([0-9]{3})\2([0-9]{4})/" />
<span style="color:red" ng-show="AddEmpForm.Telefon2_field.$error.pattern">Felaktigt telefonformat.</span>
</label>
</li>
</ol>
</fieldset>
<fieldset ng-if="SelectRole2=='Student'">
<ol>
<li>
<label>
Välj klass för elev<br />
<select ng-model="$parent.selectClass2" name="selectClass2_field" ng-options="klass as klass.Name for klass in SchoolAdmCtrl.allClasses" required></select>
<span style="color:red" ng-show="AddEmpForm.selectRole2_field.$error.required">Välj roll</span>
</label>
</li>
<li>
<label>
Sök på klass<br />
<input ng-model="Sokklass2" type="text" />
</label>
</li>
</ol>
</fieldset>
<button type="submit"
ng-disabled="
AddEmpForm.SelectRole2_field.$error.required ||
AddEmpForm.SelectUserWithout2_field.$error.required ||
AddEmpForm.Kon2_field.$error.required ||
AddEmpForm.Fornamn2_field.$error.minlength || AddEmpForm.Fornamn2_field.$error.maxlength || AddEmpForm.Fornamn2_field.$error.pattern || AddEmpForm.Fornamn2_field.$error.required ||
AddEmpForm.Efternamn2_field.$error.minlength || AddEmpForm.Efternamn2_field.$error.maxlength || AddEmpForm.Efternamn2_field.$error.pattern && AddEmpForm.Efternamn2_field.$error.required ||
AddEmpForm.Personnummer2_field.$error.pattern || AddEmpForm.Personnummer2_field.$error.required ||
AddEmpForm.Telefon2_field.$error.pattern || AddEmpForm.Telefon2_field.$error.required"
ng-click="SchoolAdmCtrl.UserRegistration(SelectRole2, selectUserWithout2.Id, Kon2, Fornamn2, Efternamn2, Personnummer2, Telefon2, selectClass2.Id)">
Spara ändringar
</button>
</form>
</div>
</div>
</div>

There are 2 things wrong that stand out.
You're making direct calls to class methods like so: SchoolAdmCtrl.UserWithRoles(). You should really be assigning those methods to your scope in your controller, like this:
$scope.UserWithRoles = function(){ ... }
Then you'll just need to call UserWithRoles(); like this:
ng-click="UserWithRoles();"
You're storing all of your data on that class. This might work just for this example, but like Guido Bouman said above, you should be storing it all on $scope. You're very likely to get undesired behavior if you have another instance of this controller I'd bet. Also, when you do this, you'll need to change all of your vm.blah references to just be blah since it'll be in your scope.

Order forms field calculation

I am building a order form for buying Bitcoins via JotForm.Maybe someone could give me a head start here. My order form has a a few fields I have a field with current Bitcoin price which is retrieved with PHP via JSON. What I would like to do is when a user enters a amount of bitcoins he would like to order the field of TOTAL SUM would refresh automatically based on amount he entered like "2xcurent price". Any help is like really appreciated!
This is how it looks visually:
http://oi60.tinypic.com/2k4fgw.jpg
Part of my form code is here:
<h2 id="header_13" class="form-header">
Order form
</h2>
</div>
</li>
<li class="form-line" id="id_15">
<div id="cid_15" class="form-input-wide">
<div id="text_15" class="form-html">
<p>
<strong>
Bitcoin price USD:<?php echo $usd; ?>
</strong>
</p>
</div>
</div>
</li>
<li class="form-line" id="id_18">
<div id="cid_18" class="form-input-wide">
<div id="text_18" class="form-html">
<p>
<strong>
Total Sum :
</strong>
</p>
</div>
</div>
</li>
<li class="form-line" id="id_3">
<label class="form-label-top" id="label_3" for="input_3"> Email: </label>
<div id="cid_3" class="form-input-wide">
<input type="email" class=" form-textbox validate[Email]" id="input_3" name="q3_elPastas" size="25" value="" maxlength="38" />
</div>
</li>
<li class="form-line" id="id_9">
<label class="form-label-top" id="label_9" for="input_9"> Bitcoin amount: </label>
<div id="cid_9" class="form-input-wide">
<input type="text" class=" form-textbox validate[Numeric]" data-type="input-textbox" id="input_9" name="q9_pasirinktosValiutos9" size="25" value="" />
</div>
</li>
<li class="form-line" id="id_10">
<label class="form-label-top" id="label_10" for="input_10"> Bitcoin address: </label>
<div id="cid_10" class="form-input-wide">
<input type="text" class=" form-textbox validate[AlphaNumeric]" data-type="input-textbox" id="input_10" name="q10_bitcoinAdresas10" size="25" value="" maxlength="37" />
</div>
</li>
<li class="form-line" id="id_14">
<label class="form-label-top" id="label_14" for="input_14"> </label>
<div id="cid_14" class="form-input-wide">
<div class="form-single-column"><span class="form-checkbox-item" style="clear:left;"><input type="checkbox" class="form-checkbox" id="input_14_0" name="q14_input14[]" value="I Agree to receive newsletter" />
<label for="input_14_0">I Agree to receive news letter </label></span><span class="clearfix"></span>
</div>
</div>
</li>
<li class="form-line" id="id_12">
<div id="cid_12" class="form-input-wide">
<div style="width:100%; text-align:Left;">
<script id="jcf_custom_field" type="text/javascript" src="http://js.jotform.com/WidgetsServer.min.js"></script>
<iframe onload="widgetFrameLoaded(12)" frameborder="0" scrolling="no" class="custom-field-frame" id="customFieldFrame_12" src="" style="border:none;width:400px; height: 45px">
</iframe>
<div>
<input id="input_12" class="form-hidden widget-required form-widget" type="hidden" name="q12_clickTo" value="">
</div>
</div>
</div>
</li>
<li class="form-line" id="id_2">
<div id="cid_2" class="form-input-wide">
<div style="text-align:center" class="form-buttons-wrapper">
<button id="input_2" type="submit" class="form-submit-button">
ORDER!
</button>
</div>
</div>
</li>
<li style="display:none">
Should be Empty:
<input type="text" name="website" value="" />
</li>
</ul>

I solved this by simply using an array of objects. So for example, I am accepting registrations. So to get the total price I go about it like this:
var registrants = [];
registrants.push({ price: 30 });
registrants.push({ price: 10 });
registrants.push({ price: 20 });
var totalPrice = 0;
for(var x = 0; x < registrants.length; x++){
totalPrice += registrants[x]["price"];
}
and you would just update the price property of the corresponding registrant when appropriate.

Categories