Develop Reference

Javascript global variable vs. HTML data attribute

When we use $(this).data('options',$('#send1 option').clone());, it works, but when I use a global variable to store list data, it does not work. What is the difference between these two methods?
First method (works): This code clones data to the data attribute and then filters and copies to both send1 and send2.
$("#receiver").change(function() {
if ($(this).data('options') == undefined) {
/* Takes an array of all options-2 and kind of embeds it in select1 */
$(this).data('options',$('#send1 option').clone());
}
if ($(this).data('options-2') == undefined) {
$(this).data('options-2',$('#send2 option').clone());
}
var id1 = $(this).val();
console.log(id1);
var options1 = $(this).data('options').filter('[value=' + id1 + ']');
var options2 = $(this).data('options-2').filter('[value=' + id1 + ']');
$('.send1 ').html(options1);
$('.send2 ').html(options2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<h5>Hello ListBox</h5>
<div>
<select name="Receiver" id="receiver">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select class="send1" name="ShipFrom1" id="send1">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
<select class="send2" name="ShipFrom2" id="send2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
</div>
Second method (doesn't work): This code uses a Javascript global variable. I am trying to clone the send1 options to a and then filter the global variable according to the value of receiver. Then, I copy the a result to both send1 and send2.
var a = $('#send1 option').clone();
$("#receiver").change(function() {
var id1 = $(this).val();
console.log(id1);
var options1 = a.filter('[value=' + id1 + ']');
$('.send1 ').html(options1);
$('.send2 ').html(options1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div>
<select name="Receiver" id="receiver">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select class="send1" name="ShipFrom1" id="send1">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
<select class="send2" name="ShipFrom2" id="send2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
</div>

I don't think you are using the best method for this ...
I suggest:
function setOption() {
var receiverVal = $('#receiver').val()
$('#send1 option:not(.'+receiverVal+')').hide();
$('#send2 option:not(.'+receiverVal+')').hide();
$('#send1 option.'+receiverVal).show();
$('#send2 option.'+receiverVal).show();
$('#send1 option:visible').first().attr('selected', 'selected');
$('#send2 option:visible').first().attr('selected', 'selected');
}
setOption();
$("#receiver").change(setOption)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<select name="Receiver" id="receiver">
<option value="fruit" >Fruit</option>
<option value="animal">Animal</option>
<option value="bird" >Bird</option>
<option value="car" >Car</option>
</select>
<select class="send1" name="ShipFrom1" id="send1">
<option value="10" class="fruit" >Banana </option>
<option value="11" class="fruit" >Apple </option>
<option value="12" class="fruit" >Orange </option>
<option value="21" class="animal" >Wolf </option>
<option value="22" class="animal" >Fox </option>
<option value="23" class="animal" >Bear </option>
<option value="31" class="bird" >Eagle </option>
<option value="32" class="bird" >Hawk </option>
<option value="41" class="car" >BWM <option>
</select>
<select class="send2" name="ShipFrom2" id="send2" class="bird">
<option value="10" class="fruit" >Banana </option>
<option value="11" class="fruit" >Apple </option>
<option value="12" class="fruit" >Orange </option>
<option value="21" class="animal" >Wolf </option>
<option value="22" class="animal" >Fox </option>
<option value="23" class="animal" >Bear </option>
<option value="31" class="bird" >Eagle </option>
<option value="32" class="bird" >Hawk </option>
<option value="41" class="car" >BWM <option>
</select>

How to make an if statement to disable select option?

I have three select menus where the user selects a subject, year and season. However, I want it so that if the user selects the year '2019', the 'Fall' option will get disabled.
<select name="Subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="Year">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select name="Season">
<option value="Spring">Spring</option>
<option value="Fall">Fall</option>
</select>

Create and event handler for the Year's change event and disable the season based on what Year's new value is.
https://jsfiddle.net/075fnm4a/
HTML
<select name="Subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="Year">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select name="Season">
<option value="Spring">Spring</option>
<option value="Fall">Fall</option>
</select>
Jquery
$(document).ready(function(){
$('select[name="Year"]').on('change',function(){
var $this = $(this);
$('select[name="Season"]').find('option[value="Fall"]').prop('disabled', ($this.val() == '2019') ); // disabled or enabled
});
$('select[name="Year"]').trigger('change');
});

Like this.
document.querySelector('#year').onchange = ev => {
const value = ev.target.value;
if (value === '2019') {
document.querySelector('#fall').disabled = true;
} else {
document.querySelector('#fall').disabled = false;
}
}
<select name="Subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="Year" id="year">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select name="Season">
<option value="Spring">Spring</option>
<option value="Fall" id="fall" disabled>Fall</option>
</select>

<select name="Subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="Year" id="years">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select name="Season" id="seasons">
<option value="Spring">Spring</option>
<option value="Fall">Fall</option>
</select>
$('#years').on('change', function(){
if($(this).val()==='2019'){
$("#seasons option").each(function()
{
if($(this).val() === 'Fall'){
$(this).attr('disabled', 'disabled');
}
});
}
});

You can onchange event and bind callback to it that get season select element and enable and disable Fall season according to selection value
<select name="Subject">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="Biology">Biology</option>
</select>
<select name="Year" onchange="changeYear(this.value)">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select name="Season">
<option value="Spring" >Spring</option>
<option value="Fall" disabled>Fall</option>
</select>
<script>
function changeYear(value)
{
var seasons = document.getElementsByName("Season")[0].options;
var fallSeason = Array.apply(null, seasons).find(season => season.value === 'Fall');
fallSeason.disabled = (value==='2019')
}
</script>

How do you add/remove people dynamically from a list in html?

This question has been asked on this forum multiple times. Yet every time I've applied the code and edited the fields to accommodate my code it doesn't seem to work. Essentially I'm trying to develop a list from a form, so once the fields are filled out and you click the add button. The info provided would populate in an ordered list below the form. Here is the following html and javascript code I've got so far. When I click the add button the information that was typed gets showed in the url bar after the original domain name, but it never makes a list.
var list = document.getElementById('list');
function add(){
var name = document.getElementById('name').value;
var people = document.getElementById('people').value;
var phone = document.getElementById('phone').value;
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(name + people + phone));
list.appendChild(entry);
return false;
}
<html>
<head>
<meta charset="UTF-8">
<title>Whiskey on Water</title>
<h1>Whiskey on Water: Waiting List</h1>
</head>
<body>
<form id="lineInfo" onsubmit="return add()">
<fieldset>
<legend>Customer Information</legend>
<label for="name">Name*</label>
<input name="name" id="name" type="text" />
<label for="people">How many people?</label>
<input name="people" id="people" type="number" list="people1" />
<datalist id="people1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
</datalist>
<label for="phone">Phone Number*</label>
<input name="phone" id="phone" type="tel"/>
<script src="wow.js"></script>
<button onclick='add ()' type="submit"> Add to List </button>
</fieldset>
</form>
<ol id="list"></ol>
</body>
</html>

Well, your code works when run as a SO Snippet (see below), so we will need more info about the problem you're having before we can answer your question.
That said, I did notice that your new list item was adding twice, and this is because you are running the add() function twice: Once for the onclick handler on the button press, and once as the action of the form upon submit. So, we need to remove one of those... I bet that you'll end up wanting to keep the form, but my working code below removes the form (keeping the onclick on the button) because I bet that your problem is that, although your code works, you are refreshing your page with the form, clearing out the options that have been added to your list. If this sounds right to you then look into passing/fetching the new list items via GET params.
var list = document.getElementById('list');
function add(){
var name = document.getElementById('name').value;
var people = document.getElementById('people').value;
var phone = document.getElementById('phone').value;
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(name + people + phone));
list.appendChild(entry);
return false;
}
<html>
<head>
<meta charset="UTF-8">
<title>Whiskey on Water</title>
<h1>Whiskey on Water: Waiting List</h1>
</head>
<body>
<fieldset>
<legend>Customer Information</legend>
<label for="name">Name*</label>
<input name="name" id="name" type="text" />
<label for="people">How many people?</label>
<input name="people" id="people" type="number" list="people1" />
<datalist id="people1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
</datalist>
<label for="phone">Phone Number*</label>
<input name="phone" id="phone" type="tel"/>
<script src="wow.js"></script>
<button onclick='add ()' type="submit"> Add to List </button>
</fieldset>
<ol id="list"></ol>
</body>
</html>

This may help assuming each field has an id:
document.querySelector('#yourButton').addEventListener('click', function(e){
/* Stop the form from submiting if useful */
e.preventDefault();
/* get the values of fields one at a time */
var field1 = document.querySelector('#input1').value;
var field2 = document.querySelector('#input2').value;
...
/** prepare new node and insert */
var newNode = '<ul>'+'<li>'+field1+'</li>'+'<li>'+field2+'</li>'+'</ul>';
document.querySelector('body').appendChild(newNode);
});

How to multiply price by quantity and display price in text field? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm trying to set up an order form for clothing. The price of the item varies based on it's size. I need it to multiply the value of the options in the size field (the price) by the quantity, and then display the total price. I'm guessing there's some pretty simple script to make this happen but I'm a total newbie.
I tried tinkering around with this script I found on here. Is there something I can just add to this to make it work?:
<script type="text/javascript">
$(window).load(function(){
$('form').change(function() {
var total = 0;
$.each($(".summable") ,function() {
total += parseFloat($(this).val());
});
$("#sum").val(total)
});
});
</script>
Here's the form:
<form><br />Shirts:
<br>Size<br>
<select class="summable" name="shirt size" id="shirt size">
<option value="0" selected="selected">Click to select</option>
<option value="20.00">Child(s) XSmall</option>
<option value="20.00">Child(s) Small</option>
<option value="20.00">Child(s) Medium</option>
<option value="20.00">Child(s) Large</option>
<option value="20.00">Child(s) Xlarge</option>
<option value="21.00">Adult XSmall</option>
<option value="21.00">Adult Small</option>
<option value="21.00">Adult Meduim</option>
<option value="21.00">Adult Large</option>
<option value="21.00">Adult XLarge</option>
<option value="21.00">Adult XXLarge</option>
</select>
<br />Quantity<br>
<select name="shirt quantity" id="shirt quantity">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<br>
<br>
<br />Jackets:
<br>Size<br>
<select class="summable" name="jacket size" id="jacket size">
<option value="0" selected="selected">Click to select</option>
<option value="40.00">Child(s) XSmall</option>
<option value="40.00">Child(s) Small</option>
<option value="40.00">Child(s) Medium</option>
<option value="40.00">Child(s) Large</option>
<option value="40.00">Child(s) Xlarge</option>
<option value="44.00">Adult XSmall</option>
<option value="44.00">Adult Small</option>
<option value="44.00">Adult Meduim</option>
<option value="44.00">Adult Large</option>
<option value="44.00">Adult XLarge</option>
<option value="44.00">Adult XXLarge</option>
</select>
<br />Quantity<br>
<select name="jacket quantity" id="jacket quantity">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<br>
<br>
Total:<input id="sum" type="text"/>
</form>
Any insight greatly appreciated, thanks.

$(function () {
$('select').change(function () {
var s = $('#shirt_size option:selected').val();
var sq = $('#shirt_quantity option:selected').val();
var j = $('#jacket_size option:selected').val();
var jq = $('#jacket_quantity option:selected').val();
if (s === 0 && j === 0) {
alert('You must select a size');
}
if (sq === 0 && jq === 0) {
alert('You must select a quantity');
}
var stotal = s * sq;
var jtotal = j * jq;
var total = stotal + jtotal;
$('#sum').val(total);
});
});
Something like this would do the trick.. (if you cleaned up the HTML, that is)

Consider a structure like
<form>
<fieldset class="itemgroup">
<select class="size">
<option value="0" disabled selected>Size</option>
<option value="10.00">Regular</option>
<option value="15.00">Large</option>
</select>
<select class="quantity">
<option value="0" disabled selected>Quantity</option>
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</fieldset>
</form>
Now to get the <select>s then their values and multiply, because we're working within a node that supports the form's change event and can be an ancestor of form elements..
$('.itemgroup').change(function () {
var size = parseFloat(this.getElementsByClassName('size')[0].value),
quantity = parseFloat(this.getElementsByClassName('quantity')[0].value);
console.log(size, quantity, size * quantity);
});
Demo

This should do the job for you:
$(document).ready(function()
{
$('form').change(function()
{
var total = 0;
$.each($(".summable") ,function()
{
var price = parseFloat($(this).val()),
qty = parseInt($(this).nextAll("select:first").val());
total += price*qty;
});
$("#sum").val(total)
});
});
Example here:
http://jsfiddle.net/vmD85/7/

Here: This should do the trick. :)
I've fixed some code. Some of the changes I made:
I removed a lot of the <br>'s.
I created a function total to contain your update code
I enclosed each type in a <div> with a class name "typegroup" that I first seek up to using .closest() Then seek down to the quality field I labeled with the class "quantity". I used classes to find each one so they are repeatable for each type (they are not forced to be unique).
I changed fields like "shirt size" to "shirt_size" since they need to be one word.
Here is the working example:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
total = function(){
$('form').change(function() {
var total = 0;
$(".summable").each(function() {
total += parseFloat($(this).val() * $(this).closest(".typegroup").find(".quantity").val());
});
$("#sum").val(total)
});
}
$(document).ready(function(){
total();
});
</script>
</head>
<body>
<form>
<div class="typegroup">
<div>Shirts:</div>
<div>Size: <span>
<select class="summable" name="shirt_size" id="shirt_size">
<option value="0" selected="selected">Click to select</option>
<option value="20.00">Child(s) XSmall</option>
<option value="20.00">Child(s) Small</option>
<option value="20.00">Child(s) Medium</option>
<option value="20.00">Child(s) Large</option>
<option value="20.00">Child(s) Xlarge</option>
<option value="21.00">Adult XSmall</option>
<option value="21.00">Adult Small</option>
<option value="21.00">Adult Meduim</option>
<option value="21.00">Adult Large</option>
<option value="21.00">Adult XLarge</option>
<option value="21.00">Adult XXLarge</option>
</select>
</span></div>
<div>Quantity: <span>
<select class="quantity" name="shirt_quantity" id="shirt_quantity">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</span></div>
</div>
<br>
<div class="typegroup">
<div>Jackets:</div>
<div>Size: <span>
<select class="summable" name="jacket_size" id="jacket_size">
<option value="0" selected="selected">Click to select</option>
<option value="40.00">Child(s) XSmall</option>
<option value="40.00">Child(s) Small</option>
<option value="40.00">Child(s) Medium</option>
<option value="40.00">Child(s) Large</option>
<option value="40.00">Child(s) Xlarge</option>
<option value="44.00">Adult XSmall</option>
<option value="44.00">Adult Small</option>
<option value="44.00">Adult Meduim</option>
<option value="44.00">Adult Large</option>
<option value="44.00">Adult XLarge</option>
<option value="44.00">Adult XXLarge</option>
</select>
</span></div>
<div>Quantity: <span>
<select class="quantity" name="jacket_quantity" id="jacket_quantity">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</span></div>
</div>
<br>
<div>Total: <input id="sum" type="text"/></div>
</form>
</body>
</html>

.push not working in ie6 or safari

I have a click event on that works great in firefox and ie 9. The idea is basically to take a selection from a dropdown and push the value into an array then show it in a div. If the value is empty then empty the array and the div. On click of "submitList" parse the list in php.
Is there a better way to do this that is compatible with all browsers?
The HTML / PHP looks like this...
$chart_query = mysql_query("SELECT id, title FROM songs WHERE team_name='$team_name' ORDER BY title ASC");
while($row = mysql_fetch_array($chart_query)){
$song_id = $row['id'];
$song_title = $row['title'];
$song_chart .= '<div align="left" class="song_links">';
if ($logOptions_id == $admin_id) {
$song_chart .= '<div id="songChart'.$song_id.'" style="border-bottom:1px dotted gray;">
<select name="selection" class="selection">
<option></option>
<option value="01-'.$song_id.'&'.$song_title.'">1</option>
<option value="02-'.$song_id.'&'.$song_title.'">2</option>
<option value="03-'.$song_id.'&'.$song_title.'">3</option>
<option value="04-'.$song_id.'&'.$song_title.'">4</option>
<option value="05-'.$song_id.'&'.$song_title.'">5</option>
<option value="06-'.$song_id.'&'.$song_title.'">6</option>
<option value="07-'.$song_id.'&'.$song_title.'">7</option>
<option value="08-'.$song_id.'&'.$song_title.'">8</option>
<option value="09-'.$song_id.'&'.$song_title.'">9</option>
<option value="10-'.$song_id.'&'.$song_title.'">10</option>
<option value="11-'.$song_id.'&'.$song_title.'">11</option>
<option value="12-'.$song_id.'&'.$song_title.'">12</option>
<option value="13-'.$song_id.'&'.$song_title.'">12</option>
<option value="14-'.$song_id.'&'.$song_title.'">14</option>
<option value="15-'.$song_id.'&'.$song_title.'">15</option>
</select>
– '.$song_title.' <img src="../images/loading.gif" id="chartDeletingpic'.$song_id.'" style="display:none;" /> delete</div></div>';
} else {
$song_chart .= ' – '.$song_title.'</div>';
}
}
Here is another portion...
<div id="selectionButton" style="display:none; width:96%; clear:both; padding:3px 10px;">
<label>List-Date</label><br />
<select name="list_month_New" class="formFields" id="list_month_New">
<option value=""></option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="list_day_New" class="formFields" id="list_day_New">
<option value=""></option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="list_year_New" class="formFields" id="list_year_New">
<option value=""></option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
</select><br />
<div>
<div id="selected_songs" style="clear:both; padding:5px 0px; color:#225c7e;">
</div>
<div style="width:100%; background-color:#F3F3F3; border:1px solid #D1D1D1;">
<div align="right">
<img src="../images/loading.gif" id="songListLoading_New" style="display:none;" />
<input id="submitList" type="submit" value="submit" class="submit" style="margin:0px;" />
</div>
</div>
</div>
</div>
<div id="selectionBox" style="width:96%; clear:both; padding:3px 10px;">'.$song_chart.'</div>
<input name="team_name" id="team_name" type="hidden" value="'.$team_name.'" /><br />
</div>';
This is the jquery...
$(document).ready(function(){
$(".selection").val("");
$("#list_month_New").val("");
$("#list_day_New").val("");
$("#list_year_New").val("");
$(".selection option").click(function(){
s = [];
$("#selectionBox select option:selected").each(function(){
$("#selected_songs").text('');
var v = $(this).val();
if(v != ''){
s.push(v);
}
if(s != ""){
$('#selectionButton').show();
}else{
$("#list_month_New").val();
$("#list_day_New").val();
$("#list_year_New").val();
$('#selectionButton').hide();
}
});
s.sort();
jQuery.each(s, function(){
O = "";
O = this+"<br />";
str = /&(.+)/.exec(O)[1];
num = O.replace(/\-.*/, '');
fullString = '<span style="color:black">'+num+'</span> - '+str;
$("#selected_songs").append(fullString);
});
$("#submitList").click(function(){
if(s != ""){
$("#songListLoading_New").show();
var m = $("#list_month_New").val();
var d = $("#list_day_New").val();
var y = $("#list_year_New").val();
var n = "<?php echo $team_name; ?>";
if(m == "" || d == "" || y == ""){
alert("You must include an entire date");
$(".selection").val("");
$("#selected_songs").text("");
$('#selectionButton').hide();
$("#songListLoading_New").hide();
$("#list_month_New").val("");
$("#list_day_New").val("");
$("#list_year_New").val("");
s = '';
}else{
$.post('scripts/sendList.php?id=<?php echo $id; ?>', {s:s, m:m, d:d, y:y, n:n}, function(data){
$(".list").prepend(data);
$(".list").slideDown(900);
$(".selection").val("");
$("#selected_songs").text("");
$('#selectionButton').hide();
$("#list_month_New").val("");
$("#list_day_New").val("");
$("#list_year_New").val("");
$("#songListLoading_New").hide();
}); s = '';
}
}
});
});
});

The problem was with the .selection and #selectionBox. For some reason it was getting confused and there was a conflict in other browsers.