SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.
    Attached Images Attached Images

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,343
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    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>

  3. #3
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Last edited by Dark Tranquility; Jan 17, 2013 at 12:04. Reason: Added HTML code highlight

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,343
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    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?

  5. #5
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,343
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

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

    Is this the kind of thing you are after?

  7. #7
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Pullo,

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

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,343
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    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>

  9. #9
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,343
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    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

  11. #11
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Pullo,

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


  12. #12
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,343
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Sure!
    I updated my original demo to incorporate this feature: http://hibbard.eu/blog/pages/booking-calculator/

  14. #14
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thatz what exactly i am after


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •