So, here is what I am trying to do. I have the online shop layout template - Individual Product-Large - being used as the page prior to shopping cart used by the customer to finalize the selection of the product. The product is actually a service with a defined start date. I would like to have the customer select a start date using the datepicker (JQUERY UI Widget) that I have succesfully installed on this page.
My question is probably not a very smart one, but how in the world do you get the information chosen on the date picker to populate the tag_capturedetails field. I have tried all weekend and have searched everywhere, but have not found any reference to this with a working solution. Any help on this would be super appreciated. Here is my code for the page as described:
<link type="text/css" href="/css/custom-theme/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/Javascript/jquery-ui-1.8.21.custom.min.js"></script>
<h2 style="text-align: left;">
<table>
<tbody>
<tr>
<td rowspan="4" style="background-image: url(http://www.solderlab.com/images/cssimg/blue-gradient.jpg); padding-right: 25px; padding-left: 25px; background-attachment: scroll; padding-top: 10px; text-align: left; vertical-align: top;">
<h4><span style="font-size: 13px;"><span style="font-weight: normal; font-family: arial; font-size: 13px;">{tag_description}</span><span style="font-weight: normal; font-family: arial; font-size: 13px;">{tag_smallimage}</span></span></h4>
</td>
<td style="padding-top: 20px; text-align: center; vertical-align: top;"><span style="font-family: arial; font-size: 16px;">{tag_largeimage}</span></td>
</tr>
<tr>
<td style="white-space: nowrap;"><span style="font-family: arial; font-size: 16px;">Click on an image to expand {tag_poplets}</span> </td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td style="background-image: url(http://www.solderlab.com/gray-gradient.gif); padding-right: 20px; padding-left: 20px; padding-bottom: 10px; text-align: left; vertical-align: top; white-space: nowrap;"><span style="font-family: arial; font-size: 16px;"><span style="font-size: 20px; font-family: arial;">Configure your quote or order: </span><br />
<span style="font-size: 20px; font-family: arial;"> Product: {tag_name}</span></span>
<div><span style="font-family: arial; font-size: 16px;">{tag_custom3} {tag_grouping}</span></div>
<div><span style="font-family: arial; font-size: 16px;">{tag_custom2} {tag_addtocartinputfield}</span></div>
<div><span name="date" id="details" style="display: none; font-family: arial; font-size: 16px;">{tag_capturedetails, Specify your start date}<br />
</span></div>
<meta charset="utf-8" />
<script>
$(function() {
$( ".selector" ).datepicker({ altField: "#actualDate" });
//getter
var altField = $( ".selector" ).datepicker( "option", "details" );
//setter
$( ".selector" ).datepicker( "option", "details", "#actualDate" );
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "/images/calendar.gif",
buttonImageOnly: true
});
});
</script>
<div class="demo">
<p><span style="font-family: arial; font-size: 16px;">STEP 3: Select your test start date:
</span><input type="text" id="datepicker" /></p>
<p><span style="font-size: medium; font-family: arial; color: #ffffff;">{tag_custom1}<br />
</span><span style="font-size: medium; font-family: arial; color: #ffffff;">{tag_custom4}</span></p>
</div>
<div><span style="font-family: arial; font-size: 16px;">{tag_buynow, Go to Cart}</span></div>
</td>
</tr>
</tbody>
</table>
<table>
</table>
</h2>
<div style="text-align: center;"><em><br />
</em></div>
