Changing border of raddatepicker w/ javascript

3 posts, 0 answers
  1. Garrett
    Garrett avatar
    35 posts
    Member since:
    Feb 2012

    Posted 19 Nov 2013 Link to this post

    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. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 20 Nov 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Garrett
    Garrett avatar
    35 posts
    Member since:
    Feb 2012

    Posted 21 Nov 2013 Link to this post

    Works beautifully, thanks as always Shinu!
Back to Top