SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fire Javascript calculations on field update

    The following is working ie calculating after the user either loses focus of the fields, or onclick - i would like the functions 'doTotal' and 'calcMenu' to calculate as the input field is updated (ie 'onKeyup) ?

    Would I need to add this line to each of the input fields in order to achieve this:

    Code:
    document.getElementById("fullday1").onkeyup = dototal;
    document.getElementById("halfday1").onkeyup = dototal;
    document.getElementById("SingleRooms1").onkeyup = dototal;
    HTML Code:
    <form id="quote" action="" method="get"><script type="text/javascript">// <![CDATA[
    jQuery(document).ready(function($){     jQuery('#quote').change(function (){doTotal(this)}); });
    // ]]></script>
    <script type="text/javascript">// <![CDATA[
    $('#quote').change(function() { calcMenu(this); });
    // ]]></script>
    <table width="532" border="1" cellspacing="1" cellpadding="0.5">
    <tbody>
    <tr>
    <th scope="col" width="30">
    <div align="center">Date</div></th>
    <th scope="col" width="128">
    <div align="center">Amount of Delegates  Day Conference @ R 240 pp</div></th>
    <th width="112">
    <div align="center">Amount of Delegates Full Day Conference @ R 260 pp</div></th>
    <th width="112">
    <div align="center">Menu No</div></th>
    <th width="112">
    <div align="center">Price pp for Menu (1-7: R70, 8-10 R85, 11: R105, 12: R85)</div></th>
    <th width="112">
    <div align="center">Total Persons for meals</div></th>
    <th width="112">
    <div align="center">Amount of Single Rooms @ R 480 pp</div></th>
    <th width="112">
    <div align="center">Amount of Double Rooms @ R 720 pp</div></th>
    <th width="134">
    <div align="center">Total for the day</div></th>
    </tr>
    <tr>
    <td>
    <div align="center"><input type="text" name="date1" size="10" /></div></td>
    <td>
    <div align="center"><input type="text" name="halfday1" size="5" maxlength="10" /></div></td>
    <td>
    <div align="center"><input type="text" name="fullday1" size="5" /></div></td>
    <td>
    <div align="center"><input type="text" name="MenuNo1" size="5" /></div></td>
    <td>
    <div align="center"><input type="text" name="MenuPrice1" size="5" /></div></td>
    <td>
    <div align="center"><input type="text" name="MealPersons1" size="5" /></div></td>
    <td>
    <div align="center"><input type="text" name="SingleRooms1" size="5" /></div></td>
    <td>
    <div align="center"><input type="text" name="DoubleRooms1" size="5" /></div></td>
    <td>
    <div align="center"><input type="text" name="total1" size="5" /></div></td>
    </tr>
    <tr>
    <td>
    <div align="center"><input type="text" name="date2" size="10" /></div></td>
    <td>
    <div align="center"><input type="text" name="halfday2" size="5" /></div></td>
    <td>
    <div align="center"><input type="text" name="fullday2" size="5" /></div></td>
    <td>
    <div align="center"><input type="text" name="MenuNo2" size="5" /></div></td>
    <td>
    <div align="center"><input type="text" name="MenuPrice2" size="5" /></div></td>
    <td>
    <div align="center"><input type="text" name="MealPersons2" size="5" /></div></td>
    <td>
    <div align="center"><input type="text" name="SingleRooms2" size="5" /></div></td>
    <td>
    <div align="center"><input type="text" name="DoubleRooms2" size="5" /></div></td>
    <td>
    <div align="center"><input type="text" name="total2" size="5" /></div></td>
    </tr>
    <tr>
    <td>
    <div align="center"><input type="text" name="date3" size="10" /></div></td>
    <td>
    <div align="center"><input type="text" name="halfday3" size="5" /></div></td>
    <td>
    <div align="center"><input type="text" name="fullday3" size="5" /></div></td>
    <td>
    <div align="center"><input type="text" name="MenuNo3" size="5" /></div></td>
    <td>
    <div align="center"><input type="text" name="MenuPrice3" size="5" /></div></td>
    <td>
    <div align="center"><input type="text" name="MealPersons3" size="5" /></div></td>
    <td>
    <div align="center"><input type="text" name="SingleRooms3" size="5" /></div></td>
    <td>
    <div align="center"><input type="text" name="DoubleRooms3" size="5" /></div></td>
    <td>
    <div align="center"><input type="text" name="total3" size="5" /></div></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    </tbody>
    </table>
    </form>

    Code:
    function doTotal(form) {
        var a = (+form.halfday1.value);
        var b = (+form.fullday1.value);
        var c = (+form.SingleRooms1.value);
        var d = (+form.DoubleRooms1.value);
    
    
    
        form.total1.value = (a * 240) + (b* 260) + (+ form.MenuPrice1.value *  form.MealPersons1.value) + (c * 480) + (d * 720) ;
    }
    
    
    var prices = [
        {
            values: [1,2,3,4,5,6,7],
            price: 70
        },
        {
            values: [8,9,10,12],
            price: 85
        },
        {
            values: [11],
            price: 105
        }
    ];
    
    function calcMenu(form)
    {
        var i, searchValue = parseInt(form.MenuNo1.value);
        form.MenuPrice1.value = '';
    
        for (i in prices)
        {
            if ($.inArray(searchValue, prices[i].values) != -1)
            {
                form.MenuPrice1.value = prices[i].price;
            }
        }
    }

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

    I would do it with jQuery, sseing as how you are using that anyway.

    You currently have:

    Code JavaScript:
    $('#quote').change(function (){
      doTotal(this);
      calcMenu(this);
    });

    change it to this:

    Code JavaScript:
    $('#quote').keyup(function (){
      doTotal(this);
      calcMenu(this);
    });

  3. #3
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Pullo - Thank you so so much ! It works beautifully

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,315
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    No probs

  5. #5
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo
    I have recently had some issues with jquery, and my calculation no longer works? and I pasted it exactly a you have it, and I am getting this message now:
    Uncaught TypeError: Property '$' of object [object Object] is not a function

    I downgraded from jquery 1.8 to version 1.7.2 as that is what my wordpress installation is choosing.

    can I alter this so it is compatible with version 1.7.2?

    Thankyou

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

    Can you post a link to your page?
    It would be easier if I could have a look.

  7. #7
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there. Thank you for your reply
    Sure, http://www.airport-game-lodge.co.za/?page_id=2229
    Last edited by ultramel123; Apr 18, 2013 at 05:08. Reason: removed pw

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,315
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Password noted. Maybe you want to delete it from this public forum?

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

    Yeah, jQuery is running in compatibility mode.

    Change this:

    Code JavaScript:
    $('#quote').keyup(function (){
      doTotal(this);
      calcMenu(this);
    });

    to this:

    Code JavaScript:
    jQuery('#quote').keyup(function (){
      doTotal(this);
      calcMenu(this);
    });

    That should sort things out.

  10. #10
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much. it is now calculating, however the second calculation (calcMenu) is not working?

    Uncaught TypeError: Cannot call method 'inArray' of undefined www.airport-game-lodge.co.za:178
    calcMenu www.airport-game-lodge.co.za:178
    (anonymous function) www.airport-game-lodge.co.za:329
    f.event.dispatch jquery.js:3
    h.handle.i
    function doTotal(form) {
    var a = (+form.halfday1.value);
    var b = (+form.fullday1.value);
    var c = (+form.SingleRooms1.value);
    var d = (+form.DoubleRooms1.value);



    form.total1.value = (a * 240) + (b* 260) + (+ form.MenuPrice1.value * form.MealPersons1.value) + (c * 480) + (d * 720) ;
    }


    var prices = [
    {
    values: [1,2,3,4,5,6,7],
    price: 70
    },
    {
    values: [8,9,10,12],
    price: 85
    },
    {
    values: [11],
    price: 105
    }
    ];

    function calcMenu(form)
    {
    var i, searchValue = parseInt(form.MenuNo1.value);
    form.MenuPrice1.value = '';

    for (i in prices)
    {
    if ($.inArray(searchValue, prices[i].values) != -1)
    {
    form.MenuPrice1.value = prices[i].price;
    }
    }
    }

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

    It's the same thing.

    Just change:

    Code JavaScript:
    if ($.inArray(searchValue, prices[i].values) != -1)

    into

    Code JavaScript:
    if (jQuery.inArray(searchValue, prices[i].values) != -1)

    and it'll work.

  12. #12
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh! I see now, the $ is replaced with jQuery.......great
    thank you very much


Tags for this Thread

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
  •