I'm using bootstrap to create a pop up windows which will have a wizard, when you click on the button "Launch demo modal" it will give you the pop up windows to select the date and then you will click next, on the next page in the same windows I would like to somehow display the results from the selection from the first window, see below for what I am looking to do, certain tags might be out of place but this should give you an idea. If anymore has experience or have an alternate way of doing this , input is apprecicated.
One question I have is how do I make the "next button" save the selection from the calendar which I can then cfoutput out to the next step.
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="js-title-step"></h4>
</div>
<div class="modal-body">
<div class="row hide" data-step="1" data-title="Please select the date!">
<div class="well">
<b>Please select a date on the calendar and click Next.</b><br>
<br>
<cfform>
<table>
<tr>
<td><strong>Start Date</strong>:</td>
<td><cfinput type="datefield" name="dte_one" size="10" /></td>
</tr>
</table>
</cfform>
</div>
</div>
<div class="row hide" data-step="2" data-title="This is the second and last step!">
<div class="well">
<h3 style="color:OrangeRed;">
Your Joining date is: <cfoutput>#DateFormat(Form.dte_one)# </cfoutput>
</h3>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default js-btn-step pull-left" data-orientation="cancel" data-dismiss="modal"></button>
<button type="button" class="btn btn-warning js-btn-step" data-orientation="previous"></button>
<button type="button" class="btn btn-success js-btn-step" data-orientation="next"></button>
</div>
</div>
</div>
</div>
AdChoices