Hi Courtrightdesign,

You ca either use Javascript to add HTML wrappers to the checkboxes and then style them with CSS

If your checkboxes already have HTML wrappers then its very easy to add the styling

Thanks! I’ll give it a go.

I’m trying to add your “Flat” checkbox style to this Gravity Forms css (https://www.gravityhelp.com/documentation/article/css-targeting-samples/#checkbox-list). What is the css I would use to have this same flat style in red? Thanks again.

Can you post the sample markup that is generated for the checkboxes?

Thanks for your always quick reply. I think it’s one of these: https://www.gravityhelp.com/documentation/article/checkboxes-field/

You will have to change the checkbox classes of smartforms to match the wrapper and inside classes of gravity forms that way it should work

You removed the generator tool i wanted to know whether each checkbox input is followed by another element inside the list like a label or span – that way it becomes easy to apply the style

Thanks

Do you mind giving me a css example?

Here is the Logo Inspiration Generator Tool for your reference: http://www.courtrightdesign.com/logo-design-inspiration-generator-tool/

Thanks again

I am not very sure of this but i am hoping something alongside these lines should work

1 – First of all you said your session value works and if that true we first call the session value like you did

THE SESSION VALUE

var mysession = "<% = session("MYSESSION") %>";

2 – Then we create a custom validation method which we shall test against like this below

THE CUSTOM VALIDATION METHOD

jQuery.validator.addMethod("minSessionValue", function(value, element) {
    return this.optional(element) || (parseFloat(value) >= mysession);
}, "* Please enter a greater value");

So from the above script we test to see if our value is equal or greater than our session value. If its less then it should return an error message “Please enter a greater value”

3 – Then we test if our value is true with these rules

THE VALIDATION RULE

theoffer:  {
    required: "#specialofferyes:checked",
    minSessionValue : true
}

NOTICE: – all this cant work without including the additional-methods.js script so you must include it on below the validation script

I mean these two scripts must be included

<script src="js/jquery.validate.js"></script>
<script src="js/additional-methods.js"></script>

Let me know if it works

Hi there Elflaire

I have added the sections of code to the javascript but it is not working correctly.

No matter what amount I enter into theoffer field it shows the error message?

Can you help at all?

Also, I need the amount entered into the field to be validated only if it is less than (<) the session value and not >=

I have copied the java below.

 <script type="text/javascript">

        $(function() {        

        var mysession = "<% = session("MYSESSION") %>";

        jQuery.validator.addMethod("minSessionValue", function(value, element) {
    return this.optional(element) || (parseFloat(value) >= mysession);
}, "* Please enter a greater value");

                    /* @date picker
                    ------------------------------------------------------------------ */                    

                    $("#coursedate").datepicker({
    numberOfMonths: 3,
    prevText: '<i class="fa fa-chevron-left" />',
    nextText: '<i class="fa fa-chevron-right" />',            
    showButtonPanel: false,
    dateFormat: 'dd-mm-yy',
    onClose: function( selectedDate ) {
        $("#theenddate").datepicker( "option", "minDate", selectedDate );
    }                    
});
                    $("#theenddate").datepicker({
    numberOfMonths: 3,
    prevText: '<i class="fa fa-chevron-left" />',
    nextText: '<i class="fa fa-chevron-right" />',            
    showButtonPanel: false,
    dateFormat: 'dd-mm-yy',
    onClose: function( selectedDate ) {
        $("#coursedate").datepicker( "option", "maxDate", selectedDate );
    }                    
});

                /* @custom validation method (smartCaptcha) 
                ------------------------------------------------------------------ */

                $.validator.methods.smartCaptcha = function(value, element, param) {
                        return value == param;
                };

                $(".errorsContainer").hide();        
                $( "#smart-form" ).validate({

                        /* @validation states + elements 
                        ------------------------------------------- */

                        errorClass: "state-error",
                        validClass: "state-success",
                        errorElement: "em",

                        /* @validation rules 
                        ------------------------------------------ */

                        rules: {
                                maxattend2: {
                                        required: true
                                },

                                coursedate:{
                                        required:true    
                                },
                                specialoffer:{
                                        required: true
                                },
                                theoffer:  {
                                        required: "#specialofferyes:checked",
                                        min: mysession
                                },                                            
                                gender:{
                                        required: true
                                }                                                                                            

                        },

                        /* @validation error messages 
                        ---------------------------------------------- */

                        messages:{
                                maxattend2: {
                                        required: 'Please enter a value'
                                },                                                                                                
                                coursedate:{
                                        required: 'Please select a start date'
                                },    
                                specialoffer:{
                                        required: 'Please select Yes or No'
                                },            
                                theoffer:{
                                        required: 'Please enter a value LESS THAN THE COURSE PRICE'
                                }                                                                        

                        },

                        /* @validation highlighting + error placement  
                        ---------------------------------------------------- */    

invalidHandler: function(form, validator) {
     $(".errorsContainer").show();
},                        
highlight: function(element, errorClass, validClass) {
$(element).closest('.field').addClass(errorClass).removeClass(validClass);
                        },
unhighlight: function(element, errorClass, validClass) {
$(element).closest('.field').removeClass(errorClass).addClass(validClass);
},
errorPlacement: function(error, element) {
if (element.is(":radio") || element.is(":checkbox")) {
element.closest('.option-group').after(error);
} else {
error.insertAfter(element.parent());
}
}

                });        

        });                

    </script>

Hi Elflaire As you can see from my above comment the solution didnt work : ( Could you offer more advice please? The support had not expired when I had raised the question and the above comments : (

HI hadn’t looked at it let me do it tonight

You are a gentleman. Thank you : )

I was thinking what if we generate that value from the server end and put it in an input as a value – then test – theoffer value against our generated input value

Yes indeed. Sounds good. I am using classic ASP vbscript. Currently the session value is taken from a recordset value. So rather than creating a session you are suggesting that we create an input value such as a hidden form element as a value to test against? Could you give me an example please?

Thanks Aristotle25,

You mentioned you are using the mailer quote can you post / share the slider code so that i show you how to change that?

Thanks

smart-form.js
- Changed the dollar sign to €
- i just see that the only change i tried is changing the dollar sign in the first ui val part:

 .val("€" + ui.value); 

-> this causes the slider to stop functioning or the currency becomes a hashtag.
- i also see that this is the only location to make changes for the currency, i must have been tired.
- i suppose i have to change both these values: ”$” to “€”?
->

/* @budget slider
                ------------------------------------------- */
                function createSlider(){
                    $( "#budget-slider" ).slider({
                        range: "min",
                        value: 50,
                        min: 250,
                        max: 25000,
                        step: 50,
                        slide: function(event, ui) {
                            $("#budget").val("€" + ui.value);
                        }
                    });

                    $("#budget").val("$" + $("#budget-slider").slider("value"));
                }

Oh yes that was it the dollar sign in quotes is a string

neh it’s not working, changing the code like below changes the currency icon into this (also when moving the slider):

 ? 

 $("#budget").val("€" + ui.value);
                        }
                    });

                    $("#budget").val("€" + $("#budget-slider").slider("value"));
                } 

i meant a diamond shaped question mark

Hello Desimc

The short answer

$("#datepicker").datepicker({
    prevText: '<i class="fa fa-chevron-left" />',
    nextText: '<i class="fa fa-chevron-right" />',                
    beforeShowDay: function(date) {
        var day = date.getDay();
        return [(day != 1), ''];
    }
});

#datepicker represents your datepicker id

The long answer

The datepicker by default uses this numbering of days

Sunday = 0 Monday = 1 Tuesday = 2 Wednesday = 3 Thursady = 4 Friday = 5 Saturday = 6

Then the cycle repeats again

If we are to disable days of the week we need to follow that pattern in mind for example

Disable Sunday

$("#datepicker").datepicker({
    prevText: '<i class="fa fa-chevron-left" />',
    nextText: '<i class="fa fa-chevron-right" />',                
    beforeShowDay: function(date) {
        var day = date.getDay();
        return [(day != 0), ''];
    }
});

Disable Monday

$("#datepicker").datepicker({
    prevText: '<i class="fa fa-chevron-left" />',
    nextText: '<i class="fa fa-chevron-right" />',                
    beforeShowDay: function(date) {
        var day = date.getDay();
        return [(day != 1), ''];
    }
});

Disable Monday and Tuesday

$("#datepicker").datepicker({
    prevText: '<i class="fa fa-chevron-left" />',
    nextText: '<i class="fa fa-chevron-right" />',                
    beforeShowDay: function(date) {
        var day = date.getDay();
        return [(day != 1 && day != 2)];
    }
});

Hope that helps

Thanks

Brilliant. Now one more silly question. Which file do I find #datepicker ?

Oh sorry

If you are using working forms with php that should be smart-form.js

If you are using the template files – that should be located inside the head section of your form HTML

Amazing stuff. I am using working form with php. I found smar-form.js.

It’s

$("#date").datepicker({
    prevText: '<i class="fa fa-chevron-left" />',
    nextText: '<i class="fa fa-chevron-right" />',                
    beforeShowDay: function(date) {
        var day = date.getDay();
        return [(day != 0), ''];
    }
});

Not #datepicker, otherwise calendar won’t show.

Thank you for great fast support. Amazing

What is the id of the datepicker field in the form index HTML / PHP Document? It should match that ID for it to work and make sure you have all the relevant scripts in the header for the form…

In case it fails just send me a link to your form

Thanks

Yeah its #date It’s working perfectly. Is there a chance we can delete certain dates in a month ?

Like which dates?

You can create an array of dates you want to disable and then disable them at will

Hi Can I disable 03/03/2016 disable as we are full house.

Set the array of dates to disable

var datesArray = ["2016-03-03"];

Call the array beforeShowDay

$("#date").datepicker({
    prevText: '<i class="fa fa-chevron-left" />',
    nextText: '<i class="fa fa-chevron-right" />',
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [$.inArray(string, datesArray) == -1];
    }                        
});

am i adding both these codes in smart-form.js ?

This is the current code:

 $("#date").datepicker({
prevText: '<i class="fa fa-chevron-left" />',
nextText: '<i class="fa fa-chevron-right" />',                
beforeShowDay: function(date) {
var day = date.getDay();
return [(day != 2), ''];
}
});    

Tuesdays are disabled. Now I want to disable 3/3 also just for this week.

I did this. But this doesn’t bring up the calendar at all. what am I doing wrong here ?

$("#date").datepicker({
prevText: '<i class="fa fa-chevron-left" />',
nextText: '<i class="fa fa-chevron-right" />',   
var datesArray = ["03-Mar-2016"];
beforeShowDay: function(date) {
var day = date.getDay();
return [(day != 2), ''];
var string = jQuery.datepicker.formatDate('d-M-yy', date);
return [$.inArray(string, datesArray) == -1];
}
});    

For that we shall create a fuction for all the dates to be disabled – here are the steps

THE HTML

Create the HTML withe the input ID (#date)

<input type="text" id="date" name="date" class="gui-input">

THE JQUERY

We first create an array of dates to disable minus weekdays (Tuesday)

var disableddates = ["3-3-2016", "3-11-2016", "3-20-2016", "3-25-2016"];

I used many dates in an array but you can just include one – [“3-3-2016”]

Then we create a fucnction that incorporates the array of dates to disable and disabled Tuesdays

function DisableSpecificDates(date) {
    var m = date.getMonth();
    var d = date.getDate();
    var y = date.getFullYear();
    var currentdate = (m + 1) + '-' + d + '-' + y ;
    for (var i = 0; i < disableddates.length; i++) {
        if ($.inArray(currentdate, disableddates) != -1 ) {
            return [false];
        } 
    }

    var dayTuesdays = date.getDay();
    return [(dayTuesdays != 2), ''];
}

Lastly create the datepicker instance with our function for disabling dates

$("#date").datepicker({
    prevText: '<i class="fa fa-chevron-left" />',
    nextText: '<i class="fa fa-chevron-right" />',
    beforeShowDay:DisableSpecificDates
});

The entire script will look like this

var disableddates = ["3-3-2016", "3-11-2016", "3-20-2016", "3-25-2016"];

function DisableSpecificDates(date) {
    var m = date.getMonth();
    var d = date.getDate();
    var y = date.getFullYear();
    var currentdate = (m + 1) + '-' + d + '-' + y ;
    for (var i = 0; i < disableddates.length; i++) {
        if ($.inArray(currentdate, disableddates) != -1 ) {
            return [false];
        } 
    }

    var dayTuesdays = date.getDay();
    return [(dayTuesdays != 2), ''];
}

$("#date").datepicker({
    prevText: '<i class="fa fa-chevron-left" />',
    nextText: '<i class="fa fa-chevron-right" />',
    beforeShowDay:DisableSpecificDates
});

This is really confusing me. Can you message me your email address so I can assign you control panel access. And if you could please help me sort this. Disable Tuesdays and disable 3/3 date. At the moment all Tuesdays are disabled as per your instructions and its working fine. Now I want to disable 03/3 date also.

Thanks

Hello,

Do you mean all dates disabling all dates before Date 1 in the same datepicker or in the next datepicker?

This should be the default behavior

Hi there

There are two date pickers on the same form. Start date for an event (date1) and an end date for event (date2).

Once date1 has been selected I would like date2 to open from that previously selected date (date1) and to have all dates before that date disabled.

Can i see a link to your set up it should work that way by default if you use onselect and close functions…

Yes of course… here’s the code:

/* @date picker ------------------------------------------------------------------ */ $("#coursedate").datepicker({ numberOfMonths: 3, prevText: '<i class="fa fa-chevron-left" />', nextText: '<i class="fa fa-chevron-right" />', showButtonPanel: false, dateFormat: 'dd-mm-yy' }); $("#theenddate").datepicker({ numberOfMonths: 3, prevText: '<i class="fa fa-chevron-left" />', nextText: '<i class="fa fa-chevron-right" />', showButtonPanel: false, dateFormat: 'dd-mm-yy' });

and the html

<div class="frm-row"> <div class="section colm colm6"> <label for="coursedate" class="field-label">Course <strong>START</strong> date <em> * </em> </label> <label for="coursedate" class="field prepend-icon"> <input type="text" id="coursedate" name="coursedate" class="gui-input" placeholder="Start date" readonly> <label class="field-icon"><i class="fa fa-calendar" /></label> </label> </div><!-- end section --> <div class="section colm colm6"> <label for="theenddate" class="field-label">Course <strong>END</strong> date (leave blank if open)</label> <label for="theenddate" class="field prepend-icon"> <input type="text" id="theenddate" name="theenddate" class="gui-input" placeholder="End date" readonly> <label class="field-icon"><i class="fa fa-calendar" /></label> </label> </div><!-- end section --> </div>

Let me create an example for you

Hi Elflaire, That would be great.

Thank you : )