CODEWITHSUNDEEP
javascriptformsdate
Giovanni De Stefanis
Giovanni De Stefanis

Reputation: 47

Picking date from id element in a form

I'm trying to pick a date from an id with this code. Actually I'm able to get correct data only if I manually declare it the date, so I guess that mistake is in document.getElementById('fromDate').value; 

<input id="fromDate" type="date">
<input id="toDate" type="date">

<button type="button" onclick="loadDoc()">Invia richiesta</button>

<p id="stampain"></p>
<p id="stampafi"></p>
<p id="stampali"></p>

 <script>

    // Define the data start
    var datastart = document.getElementById('fromDate').value; // doesn't pick data
    // var datastart = '30/03/2017'; // manually
    var datastart1 = datastart.split('/').reverse().join('-');
    var ds = new Date(datastart1);
    var start_dt = ds.toISOString().substring(0,10);

    // Define the data start
    var dataend = document.getElementById('toDate').value; // doesn't pick data
    // var dataend = '30/03/2017'; // manually
    var dataend1 = dataend.split('/').reverse().join('-');
    var de = new Date(dataend1);
    var end_dt = de.toISOString().substring(0,10);

    var CALENDAR_ID = 'my-id';
    var TOKEN = 'my-token';


    function loadDoc() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById('print').innerHTML = this.responseText;
        }
      };
          xhttp.open('GET', 'https://api.teamup.com/'+CALENDAR_ID+'/events?_teamup_token='+TOKEN+'&startDate='+start_dt+'&endDate='+end_dt, true);
      xhttp.send();


    var e = document.getElementById('stampain').innerHTML = start_dt;
    var f = document.getElementById('stampafi').innerHTML = end_dt;


    }
    </script>

But output is undefined, ofcourse i'm missing something! Any solution?

Upvotes: 1

Views: 227

Answers (1)

prasanth
prasanth

Reputation: 22500

Apply the variable declaration inside the loadDoc() function.If declare as global .Its load on document load.At the time the value are not set.so there is undefined after button click.

function loadDoc() {
// Define the data start
var datastart = document.getElementById('fromDate').value; // doesn't pick data
console.log(datastart)
// var datastart = '30/03/2017'; // manually
var datastart1 = datastart.split('/').reverse().join('-');
var ds = new Date(datastart1);
var start_dt = ds.toISOString().substring(0, 10);

// Define the data start
var dataend = document.getElementById('toDate').value; // doesn't pick data
// var dataend = '30/03/2017'; // manually
var dataend1 = dataend.split('/').reverse().join('-');
var de = new Date(dataend1);
var end_dt = de.toISOString().substring(0, 10);

var CALENDAR_ID = 'my-id';
var TOKEN = 'my-token';


  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById('print').innerHTML = this.responseText;
    }
  };
  xhttp.open('GET', 'https://api.teamup.com/' + CALENDAR_ID + '/events?_teamup_token=' + TOKEN + '&startDate=' + start_dt + '&endDate=' + end_dt, true);
  xhttp.send();


  var e = document.getElementById('stampain').innerHTML = start_dt;
  var f = document.getElementById('stampafi').innerHTML = end_dt;


}
<input id="fromDate" type="date">
<input id="toDate" type="date">

<button type="button" onclick="loadDoc()">Invia richiesta</button>

<p id="stampain"></p>
<p id="stampafi"></p>
<p id="stampali"></p>

Upvotes: 2

Related Questions