I’m currently working on a module with a form where people enter information about their order and select products, where the product selection is handled by JavaScript.

The handling of the form will happen with AJAX.

But my current problem is that when outputting my form with the date_popup type, my JavaScript can’t get it’s value. This is the form element.

$form['date'] = array(         '#type' => 'date_popup',         '#title' => t('Datum'),         '#id' => 'new-order-date',         '#date_label_position' => '',         '#default_value' => $today,         '#date_type' => DATE_DATETIME,         '#date_timezone' => date_default_timezone(),         '#date_format' => 'd/m/Y',         '#date_increment' => 1,         '#date_year_range' => '0:+3',         '#datepicker_options' => array('minDate' => 'today'),     ); 

So, when processing the JS request, the value of the input text box is never changed. This is what I’m using for getting the selected date.

var dateField = document.getElementById("new-order-date-datepicker-popup-0"); var selectedDate = dateField.value; 

However, this always returns the default date, not the date I picked.

My form is generated with this function.

function expoline_order_add_form($form, &$form_state) {      if (func_num_args() > 2) {         $client = func_get_arg(2);     } else {         $client = 0;     }      $clientoptions = array();     $query = db_query("SELECT * FROM {expoline_clients}");   foreach ($query as $currentclient) {         $clientoptions[$currentclient->cid] = $currentclient->name;     };      $form['client'] = array(         '#type' => 'select',         '#title' => t('Klant'),         '#default_value' => $client,         '#required' => TRUE,         '#options' => $clientoptions,         '#multiple' => FALSE,     );     $today = date("Y-m-d H:i:s");     $form['date'] = array(         '#type' => 'date_popup',         '#title' => t('Datum'),         '#id' => 'new-order-date',         '#date_label_position' => '',         //'#default_value' => $today,         '#date_type' => DATE_DATETIME,         '#date_timezone' => date_default_timezone(),         '#date_format' => 'd/m/Y',         '#date_increment' => 1,         '#date_year_range' => '0:+3',         '#datepicker_options' => array('minDate' => 'today'),     );      $form['save-order'] = array(         '#type' => 'submit',         '#value' => t('value'),     );     $form['#prefix'] = '<div class="my-form-class">';     $form['#suffix'] = '</div>';      return $form;  } 

And this is my JavaScript

$(document).ready(function() {        var oTable = $('#datatable-1').dataTable();       var pTable = $('#datatable-2').dataTable();        var currentOrder = {};        var selectDropdown = document.getElementById("edit-client");       var currentClient = selectDropdown.options[selectDropdown.selectedIndex].value;        var dateField = document.getElementById("new-order-date-datepicker-popup-0");       var selectedDate = dateField.value;        currentOrder.client = currentClient;       currentOrder.date = selectedDate;       currentOrder.products = [];        $('.product-row').dblclick(function() {          var clickedProduct = {};          clickedProduct.ID = $(this).children().eq(0).text();          if (currentOrder.products[clickedProduct.ID]) {           currentOrder.products[clickedProduct.ID].amount++;           var elementID = 'product-' + clickedProduct.ID;           document.getElementById(elementID).value = currentOrder.products[clickedProduct.ID].amount;         }         else {           var newOrderLine = {};           newOrderLine.productName = $(this).children().eq(2).text();           newOrderLine.amount = 1;           currentOrder.products[clickedProduct.ID] = (newOrderLine);           //currentOrder.products[clickedProduct.ID].productName = $(this).children().eq(2).text()           //currentOrder.products[clickedProduct.ID].amount = 1;           oTable.fnAddData( [             $(this).children().eq(1).text(),             '<input id="product-' + clickedProduct.ID + '" type="text" value="1" size="3">',]           );         }          console.log(currentOrder);       });         $('#products-paint').click(function() {         pTable.fnFilter('paint');       });       $('#products-linemarkings').click(function() {         //pTable.fnFilter('linemarkeringen');          var saveData = {};         saveData.client = currentClient;         saveData.products = [];         var product = {};         product.name = 'Fruitsap';         product.amount = 1;         saveData.products.push(product);         $.post( "http://localhost/expoline/test", currentOrder, function( data ) {           //$( ".result" ).html( data );           alert("succes");         });       }); 

Any help?

Thanks!