This is a migrated thread and some comments may be shown as answers.

Changing border of raddatepicker w/ javascript

2 Answers 79 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Garrett
Top achievements
Rank 1
Garrett asked on 19 Nov 2013, 06:35 PM
Hi!

I am currently using this javascript to alert my user that they didn't fill in a field and to make sure it's filled before clicking the button:

(before you look at this note that I will rewrite the redundancy out of it later, the original script was to check all boxes and if any of them was empty, fire the alert, I just added the color thing)

                function RadButton1_MouseOver(sender, args) {
    var quotevar = document.getElementById("<%=RadComboBox1.ClientID%>");
    var custvar = document.getElementById("<%=rcbCustomer.ClientID%>");
    var empvar = document.getElementById("<%=RadComboBox2.ClientID%>");
    var delvar = document.getElementById("<%=RadComboBox3.ClientID%>");
    var datevar = document.getElementById("<%=RadDatePicker1.ClientID%>");
                    if (quotevar.value == "" || custvar.value == "" || empvar.value == "" || delvar.value == "" || datevar.value == "") {
                        if (quotevar.value == null || quotevar.value == "") {
                            quotevar.style.borderColor = "red";
                        }
                        if (custvar.value == null || custvar.value == "") {
                            custvar.style.borderColor = "red";
                        }
                        if (empvar.value == null || empvar.value == "") {
                            empvar.style.borderColor = "red";
                        }
                        if (delvar.value == null || delvar.value == "") {
                            delvar.style.borderColor = "red";
                        }
                        if (datevar.value == null || datevar.value == "") {
                            datevar.style.borderColor = "green";
                        }
 
                        alert("Please make sure to fill in all fields at the top of the invoice before continuing.");
                    }
}

It works great on all my controls that I'm using except for raddatepicker.

I know that the script is correctly checking the control for empty data because the alert still pops up if it is the only control that isn't populated with data.

Is there some sort of alternative style that I should be changing?

I attached a few pictures.
The first one is with no fields filled in and the script generating the style and pop up correctly on all but the datepicker.
The second one shows that with all the other controls filled in, the alert still fires properly but the border color does not change.

What could it be that is limiting this from working?


2 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 20 Nov 2013, 06:06 AM
Hi Garrett,

Please have a look into the following JavaScript to show the border for the RadDatePicker.

JavaScript:
<script type="text/javascript">
    function RadButton1_MouseOver(sender, args) {
        var quotevar = document.getElementById("<%=RadComboBox1.ClientID%>");
        var custvar = document.getElementById("<%=rcbCustomer.ClientID%>");
        var empvar = document.getElementById("<%=RadComboBox2.ClientID%>");
        var delvar = document.getElementById("<%=RadComboBox3.ClientID%>");
        var datevar = document.getElementById("<%=RadDatePicker1.ClientID%>");
        if (quotevar.value == "" || custvar.value == "" || empvar.value == "" || delvar.value == "" || datevar.value == "") {
            if (quotevar.value == null || quotevar.value == "") {
                quotevar.style.border = "1px solid red";
            }
            if (custvar.value == null || custvar.value == "") {
                custvar.style.border = "1px solid red";
            }
            if (empvar.value == null || empvar.value == "") {
                empvar.style.border = "1px solid red";
            }
            if (delvar.value == null || delvar.value == "") {
                delvar.style.border = "1px solid red";
            }
            if (datevar.value == null || datevar.value == "") {
                datevar.parentElement.style.border = "1px solid red";
            }
            alert("Please make sure to fill in all fields at the top of the invoice before continuing.");
        }
    }
</script>

Thanks,
Shinu.
0
Garrett
Top achievements
Rank 1
answered on 21 Nov 2013, 09:18 PM
Works beautifully, thanks as always Shinu!
Tags
Calendar
Asked by
Garrett
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Garrett
Top achievements
Rank 1
Share this question
or