1

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!

12
  • Are you creating the form in your own function? (it looks like you are but just to be sure) Why are you not setting the date field '#default_value' when the form is rebuilt? It would help if we could see the whole form build function and ajax callback function
    – 2pha
    Feb 21, 2015 at 14:56
  • What do you mean with 'creating the form in your own function'?
    – Neglexis
    Feb 21, 2015 at 15:05
  • you say you are "working on a module with a form". is the form array being created in your module? If so it would be helpful to see it.
    – 2pha
    Feb 21, 2015 at 15:08
  • Have edited my op with the form function.
    – Neglexis
    Feb 21, 2015 at 15:14
  • How is the ajax being called on the form? You don't seems to be using the drupal ajax system
    – 2pha
    Feb 21, 2015 at 15:16

1 Answer 1

0

Ok, I feel slightly embarrassed now, but the solution was actually quite simple.

As you can see from my JS, the 'selectedDate' gets set AS THE PAGE LOADS, not when the button is clicked. So of course, altering the date won't have an effect on the selectedDate variable.

Case closed.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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