Javascript Dropdown Menu Addition

Question

right now on my page you can select add to basket and it will add them up in the total. I am trying to change it so you can select between 1 and 3 and it will add them together in the total but im unsure h=of how to change my page so it will do this?

Current Script:

<script>
    var w = 0
    var x = 19.99
    var y = 24.99

    function total1()
    {
        w = w + x
        document.getElementById('Total').value= w;
    }


    function total2()
    {
        w = w + y
        document.getElementById('Total').value= w;
    }
 </script>

Table to select options and display them:

<table id="t2">
    <tr>
        <td>
            <img src="item1.png" alt="Sunset Boulevard T-Shirt Men" style="width:350x;height:250px">
        </td>

        <td>
            <img src="item2.png" alt="Sunset Boulevard T-Shirt Woman" style="width:350x;height:250px">
        </td>
    </tr>

    <tr>
        <td>
            <p id="price">£19.99</p>
        </td>
        <td>
            <p id="price">£24.99</p>
        </td>
    </tr>

    <tr>
        <td>
            <input type="button" value= "Add To Basket" onclick ="total1()">
        </td>

        <td>
            <input type="button" value= "Add To Basket" onclick ="total2()">             
        </td>
    </tr>
</table>
<br>

<h3 id="header3"></h3>

<div id="all">
    Basket: <input type="text" id="Total"  disabled="disabled">
</div>

This might help? http://jsfiddle.net/YPYz8/.

Gofoboso
– Gofoboso

2015-04-12 23:24:04 +00:00
Commented Apr 12, 2015 at 23:24 — Gofoboso
– Gofoboso, Commented Apr 12, 2015 at 23:24
@Gofoboso I think that comment was for a different question

Alvaro Montoro
– Alvaro Montoro

2015-04-12 23:42:00 +00:00
Commented Apr 12, 2015 at 23:42 — Alvaro Montoro
– Alvaro Montoro, Commented Apr 12, 2015 at 23:42

Joe Packer · Accepted Answer · 2015-04-13 01:36:04Z

1

Not sure if this is exactly what you are looking for but you could simply just add a count to the number of products.

The other option you could do is add a select drop down list (DDL) in there they select the number of products they want and then just multiply the value of the DDL by the price of the item on change of the select.

var w = 0
var x = 19.99
var y = 24.99
var count1 = 0, count2 = 0;

function total1() {
    if(count1 < 3){
        w = w + x
        document.getElementById('Total').value= w;
        count1++;
    }
}

function total2() {
    if(count1 < 3){
        w = w + y
        document.getElementById('Total').value= w;
        count2++;
    }
}

answered Apr 13, 2015 at 1:36

Joe Packer

5253 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bram · Accepted Answer · 2015-04-13 14:15:35Z

1

I would add a select with the allowed number of quantities next to the "Add to basket" button. In your case you want between 1 and 3, so it's a simple one:

<select id="select1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

The id would be "select1" for the first box, and "select2" for the second box (kind of following the same name convention that you use for the functions).

Then in the total1() and total2() functions, you can easily read the value of the select and multiply the price by it:

w = w + x * document.getElementById("select1").value;

You can see the code on this JSFiddle or below:

var w = 0
var x = 19.99
var y = 24.99

function total1()
{
    w = w + x * document.getElementById("select1").value;
    document.getElementById('Total').value= w;
}


function total2()
{
    w = w + y * document.getElementById("select2").value;;
    document.getElementById('Total').value= w;
}

<table id="t2">
    <tr>
        <td>
            <img src="item1.png" alt="Sunset Boulevard T-Shirt Men" style="width:350x;height:20px">
        </td>
        
        <td>
           <img src="item2.png" alt="Sunset Boulevard T-Shirt Woman" style="width:350x;height:20px">
       </td>
    </tr>

    <tr>
        <td>
            <p id="price">£19.99</p>
        </td>

        <td>
            <p id="price">£24.99</p>
        </td>
    </tr>
    
    <tr>
        <td>
            <select id="select1">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
            <input type="button" value= "Add To Basket" onclick ="total1()">
        </td>
        <td>
            <select id="select2">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
            <input type="button" value= "Add To Basket" onclick ="total2()">
        </td>
    </tr>
</table>
<br>

<h3 id="header3"></h3>

<div id="all">
    Basket: <input type="text" id="Total"  disabled="disabled" >
</div>

edited Apr 13, 2015 at 14:15

Bram

2,6006 gold badges42 silver badges63 bronze badges

answered Apr 13, 2015 at 13:21

Alvaro Montoro

30k7 gold badges68 silver badges92 bronze badges

2 Comments

Alvaro Montoro Over a year ago

As a side comment: you may want to clean your code. Right now there are some things that are a bit off and that you may want to fix too (e.g.: non-closed tags, empty ids, or duplicated ids)

Alvaro Montoro Over a year ago

Thanks @BramDriesen for updating the code. I hadn't realized that id had changed on the question too

Collectives™ on Stack Overflow

Javascript Dropdown Menu Addition

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related