This is a function I need to call when my JQuery date picker selects both to and from dates:

function showUser() {
    // Retrieve values from the selects
    var DateFrom = document.getElementById('DateFrom').value;
    var DateTo = document.getElementById('DateTo').value;


    if (dtd=="" || dtm == "" || dfd == "" || dfm == "") {
        document.getElementById("txtHint").innerHTML="";
        return;
    }

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
    }

    xmlhttp.open("GET","/StreetHailDrivers.php?DateFrom="+DateFrom+"&DateTo="+DateTo,true);
    xmlhttp.send();
}

and this is my datepicker:

  $(function() {
    $('.datepicker').datepicker({ onSelect: showUser(), minDate: -90, maxDate: "+1D" });
  });

If i take out the onSelect: showUser() The datepicker works fine, but doesnt post the data, but if i include the onselect the datepicker doesnt work. no drop down.

I also tried the onchange event in the html:

 <input type="text" class="datepicker"  name="DateTo" id="DateTo" onchange="showUser()" /> 

what should I do to get it working?

This is a function I need to call when my JQuery date picker selects both to and from dates:

function showUser() {
    // Retrieve values from the selects
    var DateFrom = document.getElementById('DateFrom').value;
    var DateTo = document.getElementById('DateTo').value;


    if (dtd=="" || dtm == "" || dfd == "" || dfm == "") {
        document.getElementById("txtHint").innerHTML="";
        return;
    }

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
    }

    xmlhttp.open("GET","/StreetHailDrivers.php?DateFrom="+DateFrom+"&DateTo="+DateTo,true);
    xmlhttp.send();
}

and this is my datepicker:

  $(function() {
    $('.datepicker').datepicker({ onSelect: showUser(), minDate: -90, maxDate: "+1D" });
  });

If i take out the onSelect: showUser() The datepicker works fine, but doesnt post the data, but if i include the onselect the datepicker doesnt work. no drop down.

I also tried the onchange event in the html:

 <input type="text" class="datepicker"  name="DateTo" id="DateTo" onchange="showUser()" /> 

what should I do to get it working?

• javascript
• jquery
• html
• jquery-ui
• datepicker

1 Answer 1

jsFiddle Demo

The main issue is that the function showUser is not defined in a scope available to the scope where the datepicker is assigned. The result is more than likely an error that you can see in your console: "Uncaught ReferenceError: showUser is not defined ". When the error is caused all of the script execution is halted and the datepicker is not constructed. You should make sure that the datepicker object has access to this function.

I believe it is expecting a pointer to a function for that parameter. As such it should probably be

onSelect: showUser

Using onSelect: showUser() will set the value of onSelect to the return value of showUser which is undefined.