Jquery Dropdown Menu

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.

Hi there hcmar2,

Welcome to the forums.

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

<!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>

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 …

{ 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… :slight_smile:


<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>

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?

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 :slight_smile:

Hi there,

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

Is this the kind of thing you are after?

Hey Pullo,

…You are amazing…This is exactly what i am after. :slight_smile: you have done it very neatly…

No problem :slight_smile:

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

<!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>

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.

Thanks alot :wink:

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

Hey Pullo,

It works :slight_smile: Thanks alot Pullo… You are awsom…!!

:slight_smile: :slight_smile: :slight_smile:

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 :slight_smile:

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

thatz what exactly i am after :slight_smile: