2016-09-16 31 views
1

我正在製作活動預訂表單,我需要用戶能夠點擊日曆上的表格單元格以選擇其開始日期。如何製作日曆表> td可選表單元素?

很遺憾,我對Javascript的知識有限,在過去的幾個月裏,我把所有的工作都拋在了PHP的後面。

因此,據我瞭解,我需要執行某種Ajax操作以'GET'日期(例如2016/9/16)並將其作爲POST數據與其餘表單數據一起發送。我很高興地參加了一個關於udemy的AJAX課程。

到目前爲止,

這裏是我的形式

enter image description here

的日曆是簡單的表格,每一天都是在像example/2016/5/4的URL鏈接到一個特定的頁面數據。

這裏是我如何生成我的日曆......

{table_open}<table id="tt-calendar">{/table_open} 

        {heading_row_start}<tr>{/heading_row_start} 

         {heading_previous_cell} 
          <th class="text-center"> 

          </th> 
         {/heading_previous_cell} 

         {heading_title_cell} 
          <th class="text-center" colspan="{colspan}"> 
           <h4> 
            {heading} 
           </h4> 
          </th> 
         {/heading_title_cell} 

         {heading_next_cell} 
          <th class="text-center"> 

          </th> 
         {/heading_next_cell} 

        {heading_row_end}</tr>{/heading_row_end} 
        {week_row_start}<tr>{/week_row_start} 

         {week_day_cell} 
          <td> 
           <strong> 
            {week_day} 
           </strong> 
          </td> 
         {/week_day_cell} 

        {week_row_end}</tr>{/week_row_end} 
        {cal_row_start}<tr>{/cal_row_start} 

         {cal_cell_start}<td>{/cal_cell_start} 

         {cal_cell_start_today}<td id="tt-calendar-today">{/cal_cell_start_today} 

         {cal_cell_start_other}<td id="tt-calendar-test">{/cal_cell_start_other} 

         {cal_cell_content} 
          <a id="tt-calendar-event" href="' . base_url() . 'schedule/today/' . $year . '/' . $month . '/{day}/' . $student_id . '"> 
           {day} 
          </a> 
         {/cal_cell_content} 

         {cal_cell_content_today} 
          <a href="' . base_url() . 'schedule/today/' . $year . '/' . $month . '/{day}/' . $student_id . '"> 
           {day} 
          </a> 
         {/cal_cell_content_today} 

         {cal_cell_no_content} 
          <a href="' . base_url() . 'schedule/today/' . $year . '/' . $month . '/{day}/' . $student_id . '"> 
           {day} 
          </a> 
         {/cal_cell_no_content} 

         {cal_cell_no_content_today} 
          <a href="' . base_url() . 'schedule/today/' . $year . '/' . $month . '/{day}/' . $student_id . '"> 
           {day} 
          </a> 
         {/cal_cell_no_content_today} 

         {cal_cell_blank}&nbsp;{/cal_cell_blank} 

         {cal_cell_other}{day}{/cal_cel_other} 

         {cal_cell_end}</td>{/cal_cell_end} 

         {cal_cell_end_today}</td>{/cal_cell_end_today} 

         {cal_cell_end_other}</td>{/cal_cell_end_other} 

        {cal_row_end}</tr>{/cal_row_end} 

       {table_close}</table>{/table_close} 

所以...我怎麼做一個日曆「TD」元素的選擇「形式」元素是能夠通過它的POST數據與表單數據的其餘部分一起? 鏈接到額外的文章/教程,將不勝感激......

+2

你在想複雜。不要試圖將表格單元格變成其他任何東西,但只需要在表單中爲日期隱藏字段就已經開始了。然後點擊一個表格單元格,用相應的值填充該隱藏字段。 (或者首先讓它成爲日期輸入字段,然後讓日期選擇器處理剩下的日期,但在尚不支持它的瀏覽器中需要日期選擇器的polyfil。) – CBroe

+0

嘿,那真是太棒了。真是個好主意! –

回答