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,872
    Mentioned
    206 Post(s)
    Tagged
    12 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,872
    Mentioned
    206 Post(s)
    Tagged
    12 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,872
    Mentioned
    206 Post(s)
    Tagged
    12 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,872
    Mentioned
    206 Post(s)
    Tagged
    12 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,872
    Mentioned
    206 Post(s)
    Tagged
    12 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,872
    Mentioned
    206 Post(s)
    Tagged
    12 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
  •