Jquery Form

JavaScript
1

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

2

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.

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

3

Hi fret, thank you for this :). but i already got it working and kind of the same code you did :slight_smile:
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

Update :)…i got it working but there’s a bug

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

The problem is here, the double-quotes around the numbers mean that JS is treating the values as strings instead of numbers:

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:

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

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

i added it to your code

:)…let’s use your code…it’s much cleaner and better :smiley:

8

Update again :slight_smile:

the bug here is it’s always adding the value of checked every click >.<

9

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:

$("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 :slight_smile:

10

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 :D.

11

Ah, sorry, now I understand what you want to do… maybe it would be better to use radio buttons instead?

12

can i make a radio button square like a checkbox? :slight_smile: i hope its possible

13

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

because i want to create same form exactly like in this site www.myclean.com :slight_smile:

15

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?

16

look what i found…i already applied it http://jsfiddle.net/z2zaz/7/

17

then add this
$(“:radio”).behaveLikeCheckbox();
it’s from here… but i can’t make it work :slight_smile: http://www.digitss.com/jquery/radio-with-checkbox-behavior.html
help please! :slight_smile: im so close!

18

OK, seeing as you want the input to look like a checkbox, and have some of the checkbox behaviour, it’s better to actually go back to using a checkbox I think.

Here’s the modified JS:

$("input:checkbox").click(function() {
    $(this).siblings(':checked').prop('checked', false);

    if($(this).is(':checked')) {
        options = Number(this.value);
        calculatePrice();
    } else {
        options = 0;
        calculatePrice();
    }
});

and here’s the fiddle of the whole thing: http://jsfiddle.net/z2zaz/9/

19

haha! :slight_smile: really great you make it work! exactly :smiley: and there’s no bug
is there any thank you button or repute button here :smiley: thank you so much!
now i can move on with the form that im making.
I hope you answer again when i posted another problem :slight_smile:
really great help! :slight_smile: