Html input field not registring on first click

Question

I am having issues with begin date field. the first time that the page loads, if you click on the begin date field the calender is not poping up, however if I click on any other field/label and than click back on begin date field, it works just fine. I have tried the following with no success:

1- I have tried using onclick and onchange to invoke the js function 2- I have tird adding a listener on page load to the beginDate element. 3- Tried moving focuse to another element on page load.

var tripsByCategory = {
    1: ["3", "5"],
    2: ["2", "3", "4"],
    3: ["5", "7"]
}

function changecat(value) {
    if (value.length == 0) document.getElementById("duration").innerHTML = "";
    else {
        var catOptions = "";
        for (categoryId in tripsByCategory[value]) {
            catOptions += "";
        }
        document.getElementById("duration").innerHTML = catOptions;
    }
}

function datePicker() {

    $('#beginDate').datepicker({dateFormat: "yy-mm-dd"}); 

}


function clearPage() {
     var form = document.getElementById("costForm");
     form.onsubmit = form.reset(); 
     document.addEventListener("click", function() {
         datePicker();
        //alert("yay");
        }, true);

        document.getElementById("beginDate").addEventListener("click", function() {
            datePicker();
        }, false);
}

body{
background-color: #7fc7d6;
}

.sectionTitle{
    text-align: center;
}
.column3 {
  float: left;
  width: 100%;
  padding: 2px;
}
    
.row::after {
  display: table;
}





test


 
 
 



    
        !Testing
        
            
                Number of Travelers:
                
            
            
            
                Begin Date:
                
                  
            
                Choose a Destenation:
                
            
                
                Choose a Duration:

user_9278352 · Answer

Since I see that you're using jQuery my suggestion would be to use an event listener.

Create a document ready function:

$(document).ready(function(){

});

And inside of that function, add the listener function

$(document).ready(function(){
    $('#beginDate').click("off").click(function(){
        //Process data
    });
});

EDIT: In addition, you may want to run your code through a syntax checker such as: https://validator.w3.org/

I bring this one up because your syntax for html select is incorrect, it should be

It seems you are self-closing the tag, which can cause issues.

user_2494754 · Answer

Use the Event mousedown instead, that solve the issue. This is a common issue not related to jquery. But it might not work flawlessly on mobiles, you will have to add touch events as well, see https://developer.mozilla.org/en-US/docs/Web/API/Touch_events.

var tripsByCategory = {
    1: ["3", "5"],
    2: ["2", "3", "4"],
    3: ["5", "7"]
}

function changecat(value) {
    if (value.length == 0) document.getElementById("duration").innerHTML = "";
    else {
        var catOptions = "";
        for (categoryId in tripsByCategory[value]) {
            catOptions += "";
        }
        document.getElementById("duration").innerHTML = catOptions;
    }
}

function datePicker() {

    $('#beginDate').datepicker({dateFormat: "yy-mm-dd"}); 

}


function clearPage() {
     var form = document.getElementById("costForm");
     form.onsubmit = form.reset();
       document.getElementById("beginDate").addEventListener("mousedown", function() {
            datePicker();
        }, false);
}

body{
background-color: #7fc7d6;
}

.sectionTitle{
    text-align: center;
}
.column3 {
  float: left;
  width: 100%;
  padding: 2px;
}
    
.row::after {
  display: table;
}





test


 
 
 



    
        !Testing
        
            
                Number of Travelers:
                
            
            
            
                Begin Date:
                
                  
            
                Choose a Destenation:
                
            
                
                Choose a Duration:

Html input field not registring on first click

2 Answers