0

I am trying to get the date while clicking the submit button. In the console the other 2 data fields value is being sent but not the date. The calendar is being displayed and the date comes in the text box.

Due to that it is displaying data:Failure

I changed the format to "yyyy-mm-dd" in the datepicker.js file

HTML code:

<!doctype html>
<html lang="en">

<head>
  <title></title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="css/datepicker.css"> 
  <script src="js/datepicker.js"></script> 


</head>

<body>

  <div style="overflow-x: auto;">  
      <div class="card-body">
        <div class="col-md-12" style="display:inline-flex" >
          <div class="col-md-4" style="padding-left: 0px;"> 
            Report: <select class="select2able" id="repkpi">
            </select>          
          </div>
          <div class="col-md-3"> 
            Sheet: <select class="select2able" id="sheetxl">

            </select>          
          </div>
          <div class="col-md-3" style="display: flex;">
           <label for="datepicker" class="astrick" id=datepicker>Date:</label> 
           <input type="text" class="form-control datepicker" data-toggle="datepicker">

          </div> 

          <div class = "col-md-2">
           <button type="button" class="btn btn-primary submitrepbtn" id="btn_submitrep">Submit</button>

          </div>
        </div>

        <table class="table table-striped table-bordered table-hover table-responsive" id="TbodyRuleRepo"
          style="width:100%; font-size: 12px;"></table>
      </div>  
    </div>
  </div>

Date picker

    <script>
      $(function() {
        $('[data-toggle="datepicker"]').datepicker({
          autoHide: true,
          zIndex: 2048,
        });
      });
    </script>

AJAX call

$(document).on('click','.submitrepbtn', function(){
    debugger;
    let date = $('#datepicker').val();
    let Sheet = $("#sheetxl  option:selected").text();
    let repsheet= $("#repkpi option:selected").text();

    let repObj = new Object(); 

    repObj.date = date;
    repObj.sheet= Sheet;
    repObj.kpi=repsheet;

    let sendDate = new Object();
    sendDate = repObj;

    $.ajax({
        type: 'POST',
        url: 'apicall',
        contentType: 'application/json',
        data: JSON.stringify(sendDate),
        success: function (data) {
            debugger;

               var a=JSON.stringify(data);
                pwIsf.alert({msg:'Data:'+a, type:'info'}); 


        },
          error: function (xhr, status, statusText) {     
            var err=JSON.stringify(data);
            pwIsf.alert({msg:'Error!'+err, type:'error'});       
        }

    })

 }
 );
Improve this question

1 Answer 1

Reset to default
1

try to change

 <label for="datepicker" class="astrick" id=datepicker>Date:</label> 
 <input type="text" class="form-control datepicker" data-toggle="datepicker">

into 

 <label for="datepicker" class="astrick">Date:</label> 
 <input type="text" class="form-control datepicker" id="datepicker" data-toggle="datepicker">

You were trying to get the value of the element matching the id datepicker, but in your code that element was the label of the input, not the input itself.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.