SitePoint Sponsor

User Tag List

Results 1 to 19 of 19

Thread: Jquery Form

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery Form

    Hi i want to create a form exactly like the form in here www[dot]myclean[dot]com, i got a slider working and stuck adding the value of the checkbox if checked to the value of the slider and ouput in the #price here is my jsfiddle[dot]net/RwH5A/5/ you can just ignore the textbox because i only use it to display the value's. Better if you could help me more with the form Thanks!

  2. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,389
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Hi Peggy,

    Here's how I might go about it. I've created an options variable to store any extra costs that are added via the checkboxes (I'm assuming there may be more on the finished form). I've also separated out the code responsible for calculating and displaying the total to its own function - avoiding duplicated code makes it easier to change in the future.

    Code JavaScript:
    var baseRate = 84,
        rooms = 1,
        options = 0;
     
    var calculatePrice = function(){
        var total = baseRate * rooms + options;
        $('#price').html('$' + total + '/clean');
    };
     
    calculatePrice();
     
    $( "#slider-range-max" ).slider({
        range: "max",
        min: 1,
        max: 10,
        value:1,
        slide: function( event, ui ) {
            $( "#amount" ).val( ui.value );
            rooms = ui.value;
            calculatePrice();        
        }
    });
     
    $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
     
    $("input:checkbox").click(function() 
    {   
        if($(this).is(':checked')) {
            options += Number(this.value);
            calculatePrice();
        } else {
            options -= this.value;
            calculatePrice();
        }
    });

    Here is the jsFiddle of my code, in case you want to see it in action. If you've any questions about what I've done or why, feel free to ask

  3. #3
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi fret, thank you for this . but i already got it working and kind of the same code you did
    but new problem is look at this http://jsfiddle.net/RwH5A/13/ i added an array of price and i don't know where's the problem

  4. #4
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Update ..i got it working but there's a bug
    http://jsfiddle.net/RwH5A/14/
    when you check the checkbox and move the slider it does not add the value of the checkbox
    and reducing the value of the price when removing the check

  5. #5
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,389
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    The problem is here, the double-quotes around the numbers mean that JS is treating the values as strings instead of numbers:
    Code JavaScript:
    var t = {
        0: "119",
        1: "119",
        2: "139",
        3: "159",
        4: "189",
        5: "219",
        6: "249",
    };
    What you're actually doing is creating an object, rather than an array. To use an array (which would be slightly neater) just do this:
    Code JavaScript:
    var t = [119, 119, 139, 159, 189, 219, 249];

    You've also got a bug in your code that I also ran into when coding my last post. Try moving the slider upto 3 rooms, and the price is $159. Tick the checkbox and the price is $169. Now move the slider back down to 2 rooms, and uncheck the box - now the price is $129, the user just got a discount That's why I introduced the separate variable in my version for holding the checkbox costs.

    Edit: Here's a varation on my original code example, but using an array of prices: http://jsfiddle.net/z2zaz/3/

  6. #6
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Fret! , this really is working..i didn't notice your reply in my email because it went to spam.
    http://jsfiddle.net/RwH5A/40/ more update 3 checkbox now..please try it. the checkboxes i want it to function like
    a radio button which when click one and click another only 1 is check.

  7. #7
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i added it to your code
    http://jsfiddle.net/z2zaz/4/
    ..let's use your code..it's much cleaner and better

  8. #8
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Update again
    http://jsfiddle.net/z2zaz/5/
    the bug here is it's always adding the value of checked every click >.<

  9. #9
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,389
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Morning Peggy,

    You didn't actually need to add any extra code to get it working with multiple checkboxes. Take a look at this section of code from my last example:
    Code JavaScript:
    $("input:checkbox").click(function() 
    {   
        if($(this).is(':checked')) {
            options += Number(this.value);
            calculatePrice();
        } else {
            options -= this.value;
            calculatePrice();
        }
    });
    Here jQuery is attaching a click handler to all the checkboxes that it finds on the page. So you can add extra options to your form and they will just work

  10. #10
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good Morning Fret!,actually it's 7pm here hahah..
    Yes it is i noticed that! very flexible code thanks!.. http://jsfiddle.net/z2zaz/5/ but please try this one.. it keeps on adding and adding..i was thinking on how to put a refresh or reset value for the price .

  11. #11
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,389
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Ah, sorry, now I understand what you want to do.. maybe it would be better to use radio buttons instead?
    http://jsfiddle.net/z2zaz/6/

  12. #12
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can i make a radio button square like a checkbox? i hope its possible

  13. #13
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,389
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by peggy023 View Post
    can i make a radio button square like a checkbox? i hope its possible
    Not that I know of.. why, do you need it to be square? Switching to radio buttons seemed practical because it gives you the behaviour you want, where only one option can be selected at a time.

  14. #14
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    because i want to create same form exactly like in this site www.myclean.com

  15. #15
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also the checkbox is optional i think whether they want to check 1 or none, can radio button remove check like checkbox when click again?


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
  •