Jquery Dropdown Menu

**hcmar2** · Jan 16, 2013 10:38

Hello,

I am after a Jquery which is similar to this. The each attribute it contain must carry a value to the total. Please refer to attachment for a detail view.

Big help...Thanks.

**Pullo** · Jan 17, 2013 01:30

Hi there hcmar2,

Welcome to the forums.

This will do what you need.
Any questions just let me know.

Code JavaScript:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Multiple select addition</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
  </head>
 
  <body>
    <select multiple id="mySelect">
      <option value="10">Volvo</option>
      <option value="20">Saab</option>
      <option value="30">Opel</option>
      <option value="40">Audi</option>
    </select>
 
    <p>Total: <span id="total"></span></p>
 
    <script>
      $("#mySelect").change(function(){
        t = 0;
        $.each($(this).val(), function(i, v){
          t += Number(v);
        });
        $("#total").text(t);
      })
    </script>
  </body>
</html>

**hcmar2** · Jan 17, 2013 04:05

Hello, Thanks for the reply.. you are really helpful..
I tried pasting it, but it does not work. i found a way to do it can you go through this code and tell me how to make it as this. i am not good at this. please help me..
please find the attachment for it ...

calculator_2.png

{ each option on dropdown must contain a value and it should add everything on what user type in first text box... then the second option dropdown.. and display the total of each selections on total....}
{ then next step must be display the total and depends on the total , images must be displayed once user press "BOOK" button.. }

Appreciate your help..

Code HTML4Strict:

<html>
<head>
<script type="text/javascript">
var divsarray=new Array('div0','div1','div2');
 
function showDivs(divs)
{
//get number of div to show
var num = parseInt(divs);
 
//show the div
document.getElementById(divsarray[num]).style.display='block';
 
//add one for next div
document.getElementById('lastdiv').value=(num+1);
 
//set quantity field
var quantity = 'quantity' + num; 
 
//set price field
var price = 'price' + num;
 
//set total field
var total = 'total' + num;
 
//put values in inputs fields of div displayed above
document.getElementById(quantity).value= document.getElementById('quantity100').value;
document.getElementById(price).value = document.getElementById('price100').value;
document.getElementById(total).value=document.getElementById('total100').value;
 
//Clear the original input fields
document.getElementById('quantity100').value = "";
document.getElementById('mySelect').options[0].selected=true;
document.getElementById('price100').value = "";
document.getElementById('total100').value = "";
document.getElementById('grand').style.display='block';
 
//calculate the grand total
var grand=0;
for(var j=0;j<divsarray.length;j++)
{
var mytotal = "total" + j;
grand = eval(document.getElementById(mytotal).value) + grand;
document.getElementById('grandtotal').value=grand;
}
}
 
function updateForm(what) 
{
selected = what.mySelect.selectedIndex;
values = what.mySelect.options[selected].value;
document.getElementById('price100').value = values;
document.getElementById('total100').value = eval(values * document.getElementById('quantity100').value).toFixed(2);
}
</script>
</head>
<body>
<form name="divsform" id="divsform">
Quantity / Price per Unit / Total
<div id="div0" style="display:none">
<input type="text" name="quantity0" id="quantity0">
<input type="text" name="price0" id="price0">
<input type="text" name="total0" id="total0" value="0">
<p>
</div>
<div id="div1" style="display:none">
<input type="text" name="quantity1" id="quantity1">
<input type="text" name="price1" id="price1">
<input type="text" name="total1" id="total1" value="0">
<p>
</div>
<div id="div2" style="display:none">
<input type="text" name="quantity2" id="quantity2">
<input type="text" name="price2" id="price2">
<input type="text" name="total2" id="total2" value="0">
<p>
</div>
<div id="grand" style="display:none">
Order Total:
<input type="text" value="0" id="grandtotal" name="grandtotal">
</div>
<p>
<input type="text" name="quantity100" id="quantity100">
<select name="mySelect" onChange="updateForm(this.form)">
<option value="">
<option value="2.99">4x6
<option value="4.99">5x7
<option value="7.99">8x10
</select>
<input type="hiddentext" name="price100" id="price100">
<input type="text" name="total100" id="total100" onClick="divsform.total100.value = (divsform.quantity100.value - 0) * (divsform.price100.value - 0)">
<input type="hidden" value="Add another item" onClick="showDivs(document.getElementById('lastdiv').value)">
<input type="hidden" value="Submit Order">
<input type="text" id="lastdiv" value=0 style="display:none">
</form>
</body>
</html>

**Pullo** · Jan 19, 2013 07:00

Hi,

Should the user be able to select multiple items from the drop downs or only one?
Also, should the user be able to enter decimals into the input box, or only whole numbers?

**hcmar2** · Jan 19, 2013 07:30

Hello Pullo,

Nope. Only one item must be able to pick and again nope.. it must be INT and doesnt need to accept decimals.

thanks

**Pullo** · Jan 19, 2013 11:00

Hi there,

I made you a demo: http://hibbard.eu/blog/pages/booking-calculator/

Is this the kind of thing you are after?

**hcmar2** · Jan 19, 2013 15:19

Hey Pullo,

..You are amazing...This is exactly what i am after.

you have done it very neatly..

**Pullo** · Jan 19, 2013 15:25

No problem

Just to be complete, here's the code (in case it helps anyone else or anyone else can improve on it).

Code:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Booking Calculator</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
    <style>
    #result{
      margin:15px 0 0 5px;
    }
    
    #result img{
      display:none;
    }
    </style>
  </head>
 
  <body>
    <h1>Booking Calculator</h1>
    <form id="myForm">
      <input id="myTextbox" type="text"  autocomplete="off">
    
      <select class="mySelect" id="s1">
        <option value="0">Please select a value</option>
        <option value="100">One hundred</option>
        <option value="200">Two hundred</option>
        <option value="300">Three hundred</option>
        <option value="400">Four hundred</option>
      </select>
      
      <select class="mySelect" id="s2">
        <option value="0">Please select a value</option>
        <option value="1000">One Thousand</option>
        <option value="2000">Two Thousand</option>
        <option value="3000">Three Thousand</option>
        <option value="4000">Four Thousand</option>
      </select>
      <p>Total: <span id="total">0</span></p>
      
      <input type="submit" value="Book">
     </form>
    
    <div id="result">
      <img src="1.png" id="img_1" />
      <img src="2.png" id="img_2" />
      <img src="3.png" id="img_3" />
      <img src="4.png" id="img_4" />
      <img src="5.png" id="img_5" />
    </div>
    
    <script>
      function updateTotal(){
        v1 = Number($("#myTextbox").val());
        v2 = Number($("#s1").val());
        v3 = Number($("#s2").val());
        $("#total").text(v1 + v2 + v3)
      }
    
      $(".mySelect").change(function(){
        updateTotal();
      })
      
      $("#myTextbox").on("input", function(event) {
        updateTotal();
      })
    
      $('#myTextbox').keydown(function(event) {
        // Allow: backspace, delete, tab, escape, and enter
        if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || 
        // Allow: Ctrl+A
        (event.keyCode == 65 && event.ctrlKey === true) || 
        // Allow: home, end, left, right
        (event.keyCode >= 35 && event.keyCode <= 39)) {
        // let it happen, don't do anything
          return;
        }
        else {
          // Ensure that it is a number and stop the keypress
          if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
            event.preventDefault(); 
          }  
        }
      });
    
      $("#myForm").submit(function(){
        $("#result img").css("display", "none");
        
        t = Number($("#total").text());
        if (t == 0){
          alert("Please fill out at least one field")
        }else if (t > 0 && t < 500){
          $("#img_1").css("display", "block");
        }else if (t >= 500 && t < 800){
          $("#img_2").css("display", "block");
        }else if (t >= 800 && t < 1500){
          $("#img_3").css("display", "block");
        }else if (t >= 1500 && t < 2000){
          $("#img_4").css("display", "block");
        }else if (t >= 2000){
          $("#img_5").css("display", "block");
        } 
        return false;
      })
    </script>
  </body>
</html>

**hcmar2** · Jan 19, 2013 16:59

Hey Pullo,

Thanks alot for helping me out.
I tried testing the code unfortunately i get no output. can you check this link let me know the problem.
http://jsbin.com/ulutec/1/edit

Thanks alot

**Pullo** · Jan 20, 2013 02:17

You forgot to include jQuery.
You can include it via the "Add Library" button at the top of the page.
Also, the program picked up on a couple of other minor errors you might want to fix - mostly missing semi-colons

**hcmar2** · Jan 20, 2013 04:22

Hey Pullo,

It works

Thanks alot Pullo... You are awsom..!!

**hcmar2** · Jan 20, 2013 08:08

Hey Pullo,

I modified little bit and just need some help to have a small button to reset the image display and clear all the fields.
can you help me with that?

Thanks

**Pullo** · Jan 20, 2013 13:28

Sure!
I updated my original demo to incorporate this feature: http://hibbard.eu/blog/pages/booking-calculator/

**hcmar2** · Jan 20, 2013 15:25

thatz what exactly i am after

User Tag List

Thread: Jquery Dropdown Menu

Thread Tools

Display

Jquery Dropdown Menu

Bookmarks

Bookmarks

Posting Permissions