将同一页面上文本框中的数据打印成正确格式的隐藏字段

Question

I have a checkout form in ubercart. In order for me to display a calender in the admin section, i need to be able to retreive a game date that the user selects as they complete checkout.

This calender will be displayed in a view, but the webform checkout extra field is not compatible.

As an easy fix, I have added an extra field that IS compatible in views, but I am not able to assign a datepicker to this field.

My question is, can I keep the original field, but as they enter a date at the top of the page, the hidden field at the bottom of the page gets the date entered into it too?

Here is the code for the date picker at the top of the page, which is three select boxes and a calendar link.

<select class="month form-select" id="edit-panes-webform-nid5-0-date-month" name="panes[webform_nid5][0][date][month]"><option value="" selected="selected">Month</option><option value="1">Jan</option><option value="2">Feb</option><option value="3">Mar</option><option value="4">Apr</option><option value="5">May</option><option value="6">Jun</option><option value="7">Jul</option><option value="8">Aug</option><option value="9">Sep</option><option value="10">Oct</option><option value="11">Nov</option><option value="12">Dec</option></select>

<select class="day form-select" id="edit-panes-webform-nid5-0-date-day" name="panes[webform_nid5][0][date][day]"><option value="" selected="selected">Day</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select>

<select class="year form-select" id="edit-panes-webform-nid5-0-date-year" name="panes[webform_nid5][0][date][year]"><option value="" selected="selected">Year</option><option value="2013">2013</option><option value="2014">2014</option><option value="2015">2015</option></select>

<input type="image" src="/sites/all/modules/webform/images/calendar.png" class="webform-calendar webform-calendar-start-2013-09-06 webform-calendar-end-2015-09-05 webform-calendar-day-1 hasDatepicker" alt="Open popup calendar" title="Open popup calendar" id="dp1378391293298">

For the bottom hidden date value box, I am able to enter a php snippet.

I dont suppose there is a simple way to print the values of the three select boxes as soon as they are completed?

I tried something like...

<?php
  $get_month = $_POST['panes[webform_nid5][0][date][month]'];
  print($get_month);
  $get_day = $_POST['panes[webform_nid5][0][date][day]'];
  print($get_day);
  $get_year = $_POST['panes[webform_nid5][0][date][year]'];
  print($get_year);
?>

But that doesnt work, and I would need the date to read in a format DD-MM-YY

Can anyone help?

Answer 1

EDITED As you have jquery available o the page this makes things much simpler

<script>
  function changeDate() 
  {
    var $ = jQuery; //for some reason $ is not already defined as jQuery
    var date = $('select#edit-panes-webform-nid5-0-date-month').val() 
    + '-' 
    + $('select#edit-panes-webform-nid5-0-date-day').val() 
    + '-' 
    + $('select#edit-panes-webform-nid5-0-date-year').val();

    $('input#edit-panes-billing-address-billing-ucxf-date-of-game').val(date);
  }
</script>

I have tried this on your page and it works when using the select boxes but not from the popup calander without editing the jquery date picker and it depends on what the licence allows you to do with that

this is assuming that your hidden date box is a div or span not an input, if it is an input change the line

document.getElementById("hidden-date-box-id").innerHtml = month + '-' + day + '-' + year;

to

document.getElementById("hidden-date-box-id").value = month + '-' + day + '-' + year;

<script>
  function changeDate() 
  {
    var month = document.getElementById("edit-panes-webform-nid5-0-date-month").value;
    var day   = document.getElementById("edit-panes-webform-nid5-0-date-day").value;
    var year  = document.getElementById("edit-panes-webform-nid5-0-date-year").value;

    document.getElementById("hidden-date-box-id").innerHtml = month + '-' + day + '-' + year;
  }
</script>

then add onchange="changeDate(); return false;" to each oof your select's

this is untested code and i rarely use pure javascript but im pretty sure its correct