asked on
Hi experts,
I've got this jquery datepicker that enables me to select a free set of dates in a calendar. Sometimes you pick one date and on other occasions I select ten dates. Beneath the calendar a dynamic number of textboxes are presented to the user containing the selected dates and behind evey date it presents another textbox so the user can add a remark in relation to the selected date (see picture).
![Example]()
My question is how do I retreive the dynamic number of captured dates and optional remarks made by the user in my proces page after the page is finaly submitted?
Can this be done without server based code? And if not how do I do this in classic asp?
I've got this jquery datepicker that enables me to select a free set of dates in a calendar. Sometimes you pick one date and on other occasions I select ten dates. Beneath the calendar a dynamic number of textboxes are presented to the user containing the selected dates and behind evey date it presents another textbox so the user can add a remark in relation to the selected date (see picture).
My question is how do I retreive the dynamic number of captured dates and optional remarks made by the user in my proces page after the page is finaly submitted?
Can this be done without server based code? And if not how do I do this in classic asp?
<html>
<head>
<style type="text/css">@import url("jquery-ui.css");</style>
</head>
<body>
<table id="container" cellpadding="0" cellspacing="0">
<tr>
<td id="container_content">
<table id="content" cellpadding="0" cellspacing="0">
<td id="body" valign="top">
<form action="/afspraak-plannen" autocomplete="off" method="post">
<div class="clear"></div>
<fieldset class="clean">
<div class="clear05"></div>
<div class="clear05"></div>
<div id="datepicker"></div>
<div class="clear"></div>
<div class="clear05"></div>
<div class="error error_date maxdates" style="display:none;">
<div class="error_label">
Je kan (slechts) 365 datumkeuzes invullen.
</div>
</div>
<div class="clear05"></div>
</fieldset>
<fieldset class="form_content clean" id="scroll_dates">
<strong class="dateLabel" id="DatesLabel">Data</strong><span class="dateComment">Tijd of toelichting</span>
<div class="clear05"></div>
<div id="datePanel" class="datePanel">
<input name="DateValue1" type="text" maxlength="256" id="DateValue1" readonly class="input" value="" />
<input name="TimeValue1" type="text" maxlength="29" id="TimeValue1" class="input" value="" />
<a class="icon add" style="display:none;">Nog een tijdstip toevoegen</a>
<div class="clear"></div>
<input name="DateValue2" type="text" maxlength="256" id="DateValue2" readonly class="input" value="" />
<input name="TimeValue2" type="text" maxlength="29" id="TimeValue2" class="input" value="" />
<a class="icon add" style="display:none;">Nog een tijdstip toevoegen</a>
<div class="clear"></div>
<input name="DateValue3" type="text" maxlength="256" id="DateValue3" readonly class="input" value="" />
<input name="TimeValue3" type="text" maxlength="29" id="TimeValue3" class="input" value="" />
<a class="icon add" style="display:none;">Nog een tijdstip toevoegen</a>
<div class="clear"></div>
<input name="DateValue4" type="text" maxlength="256" id="DateValue4" readonly class="input" value="" />
<input name="TimeValue4" type="text" maxlength="29" id="TimeValue4" class="input" value="" />
<a class="icon add" style="display:none;">Nog een tijdstip toevoegen</a>
<div class="clear"></div>
<input name="DateValue5" type="text" maxlength="256" id="DateValue5" readonly class="input" value="" />
<input name="TimeValue5" type="text" maxlength="29" id="TimeValue5" class="input" value="" />
<a class="icon add" style="display:none;">Nog een tijdstip toevoegen</a>
<div class="clear"></div>
</div>
<div class="clear"></div>
<a id="moredates" class="icon add" href="javascript:void(0);" onclick="addDates();">Meer data</a>
<div class="clear"></div>
<div class="clear"></div>
<div class="error error_date maxdates" style="display:none;">
<div class="error_label">
Je kunt (maar) 200 datumkeuzes invullen.
</div>
</div>
</fieldset>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#action').val('');
$('form a').each(function(){
$(this).unbind('focus');
});
$('#datepicker').datepicker({
minDate: 0
, maxDate: 365
, dateFormat: 'DD dd-mm-yy'
, onSelect: function(dateText, inst) { checkSetDate(dateText, inst); }
, numberOfMonths: 2
, beforeShowDay: function (date){
for (i = 0; i < dates.length; i++) {
var d = new Date(dates[i]);
if (date.getMonth() == d.getMonth()
&& date.getDate() == d.getDate()
&& date.getFullYear() == d.getFullYear()) {
//[disable/enable, class for styling appearance, tool tip]
return [true, "date-active"];
}
}
if (datesInUse < 200)
{
var d = new Date();
if (date.getMonth() == d.getMonth()
&& date.getDate() == d.getDate()
&& date.getFullYear() == d.getFullYear()) {
//[disable/enable, class for styling appearance, tool tip]
return [true, "date-today"];//enable all other days
}
else{
return [true, ""];
}
}
else
return [false, ""];//disable all
}
});
initEditDates();
for (var i=0; i<dates.length; i++) {
if (dates[i].length > 0) {
date = $('#DateValue' + (i + 1))[0];
time = $('#TimeValue' + (i + 1))[0];
date.oldValue = date.value;
time.oldValue = time.value;
datesInUse++;
}
}
$('#datepicker').datepicker('refresh');
});
var dates = [];
var lastDate = 0;
var datesInUse = 0;
function checkSetDate(dateText, inst) {
var dateInUse = false;
var date = $('#datepicker').datepicker('getDate');
for (i = 0; i < dates.length; i++) {
var d = new Date(dates[i]);
if (date.getMonth() == d.getMonth()
&& date.getDate() == d.getDate()
&& date.getFullYear() == d.getFullYear()) {
$('#DateValue' + (i + 1)).val('');
$('#TimeValue' + (i + 1)).val('');
$('#TimeValue' + (i + 1)).next('.icon.add').hide();
dates[i] = '';
datesInUse-=1;
dateInUse = true;
}
}
if (dateInUse == false) {
if (datesInUse < 200) { setDate(dateText, $('#datepicker').datepicker('getDate')); }
}
else {
$('.error_time').remove();
}
if (datesInUse >= 200) {
hideMore();
}
}
function setDate(text, date){
var useDate = 0;
if (dates.length > 0){
for (var i = 0; i < dates.length; i++) {
if (dates[i] == ''){
datesInUse+=1;
useDate = i + 1;
lastDate = useDate;
break;
}
}
}
if (useDate == 0 && dates.length <= 200) {
dates.push(date);
datesInUse+=1;
lastDate = dates.length;
}
if (lastDate > 0) {
var $dv = $('input[name^="DateValue"]');
if (lastDate == $dv.length && $dv.length < 200) {
addDate();
initEditDates();
}
dates[lastDate - 1] = date;
$dv[lastDate - 1].value = text;
$dv[lastDate - 1].oldValue = text;
$($dv[lastDate - 1]).next('input').next('.icon.add').show();
var err = $dv.next('input').next('.icon.add').next('.clear').next('.error');
if(err.length > 0){
err.next('clear').remove();
err.remove();
}
}
}
function initEditDates(){
$('input[name^="DateValue"]').each(function(){
$(this).unbind('blur').blur(function(){ parseDate(this); });
$(this).unbind('focus').focus(function(){ checkAddDate(this) });
});
$('input[name^="TimeValue"]').each(function(){
$(this).unbind('focus').focus(function(event){ checkAddDate(this); });
$(this).next('.icon.add').unbind('click').click(function(){ addTime($(this).prev('input')[0]); });
});
}
function addTime(input){
var index = input.id.substr('TimeValue'.length);
var $dv = $('input[name^="DateValue"]');
if (index == $dv.length && $dv.length < 200) {
addDate();
initEditDates();
}
var err = $('.error_date').not('.maxdates');
if(err.length > 0){
err.next('clear').remove();
err.remove();
}
$dv = $('input[name^="DateValue"]');
var $tv = $('input[name^="TimeValue"]');
var newTime = false;
for(var i = 0; i < $dv.length; i++) {
var dateValue = $dv[i].value.replace('\n','');
var timeValue = $tv[i].value.replace('\n','')
if (dateValue.length == 0 && timeValue.length == 0) {
var n = i;
for (i; i>index; i--) {
if (dates.length >= i)
dates[i] = dates[i-1];
$dv[i].value = $dv[i-1].value;
$dv[i].oldValue = $dv[i-1].oldValue;
$tv[i].value = $tv[i-1].value;
$tv[i].oldValue = $tv[i-1].oldValue;
$($tv[i]).next('.icon.add').show();
}
if (n >= index) {
if (dates.length >= index)
dates[index] = dates[index-1];
else
dates.push(dates[index-1]);
$dv[index].value = $dv[index-1].value;
$dv[index].oldValue = $dv[index-1].value;
$tv[index].value = '';
$($tv[index]).next('.icon.add').show();
$($tv[index]).focus();
}
else {
if (dates.length >= n)
dates[n] = dates[index-1];
else
dates.push(dates[index-1]);
$dv[n].value = $dv[index-1].value;
$dv[n].oldValue = $dv[index-1].value;
$tv[n].value = '';
$($tv[n]).next('.icon.add').show();
$($tv[n]).focus();
}
if (dates[index-1] != '')
datesInUse+=1;
if ((parseInt(index) + 1) != $dv.length && datesInUse == $dv.length && $dv.length < 200) {
addDate();
initEditDates();
}
if (datesInUse >= 200) {
hideMore();
}
$('#datepicker').datepicker('refresh');
return;
}
}
if ($('.error_time').length == 0) {
hideMore();
$('<div class="error error_time"><div class="error_label">Je kan maximaal 20 datumkeuzes invullen. Verwijder een datum.</div></div><div class="clear"></div>').insertAfter($(input).next('.icon.add').next('.clear'));
}
}
function hideMore(){
$('.maxdates').show();
$('#moredates').hide();
}
function checkAddDate(input) {
var $dv = $('input[name^="DateValue"]');
var $tv = $('input[name^="TimeValue"]');
if ((input.id == $dv.last().attr('id').toString() || input.id == $tv.last().attr('id').toString()) && $dv.length < 20) {
addDate();
initEditDates();
}
}
function parseDate(input){
var dateValue = input.value.replace('\n','');
if ((input.oldValue != undefined && input.oldValue != dateValue) || (input.oldValue == undefined && dateValue.length > 0))
{
var err = $(input).next('input').next('.icon.add').next('.clear').next('.error');
if(err.length > 0){
err.next('clear').remove();
err.remove();
}
input.oldValue = dateValue;
if (dateValue.length > 0) {
$.post('http://www.afspreken.nl/Dates/Parse?value=' + dateValue, null, function (r) {
if (r.date == '') {
//invalid date
$('<div class="error error_date"><div class="error_label">' + r.error + '</div></div><div class="clear"></div>').insertAfter($(input).next('input').next('.icon.add').next('.clear'));
}
editDate(input, r.date);
}, 'json');
}
else {
editDate(input, '');
}
}
}
function addDate(){
var $dv = $('input[name^="DateValue"]');
var $tv = $('input[name^="TimeValue"]');
var $dvc = $dv.last().clone();
var $tvc = $tv.last().clone();
var $a = $tv.last().next('.icon.add');
var $ac = $a.clone();
var $c = $a.next('.clear');
var $cc = $c.clone();
var index = $dv.length + 1;
$dvc.attr('id', 'DateValue' + index);
$dvc.attr('name', 'DateValue' + index);
$dvc.insertAfter($c);
$dvc.val('');
$dvc.get()[0].oldValue = '';
$tvc.attr('id', 'TimeValue' + index);
$tvc.attr('name', 'TimeValue' + index);
$tvc.val('');
$tvc.insertAfter($dvc);
$ac.hide();
$ac.insertAfter($tvc);
$cc.insertAfter($ac);
//if (index >= 200) $('#moredates').hide();
//if (index >= 200) $('.maxdates').show();
}
function addDates(){
var $dv = $('input[name^="DateValue"] readonly');
if ($dv.length < 200) {
var l = $dv.length + 5;
if (l > 200) l = 200;
i = $dv.length;
for (i; i<l; i++) addDate();
initEditDates();
}
$dv = $('input[name^="DateValue"] readonly');
if ($dv.length == 200) {
hideMore();
}
}
function editDate(input, value){
var index = input.id.substr('DateValue'.length);
var newDate = true;
if (dates.length < index){
var i = dates.length;
for (i; i < index - 1; i++){
dates.push('');
}
dates.push(value);
}
else {
if (dates[index - 1] != '')
newDate = false;
dates[index - 1] = value;
}
var dateValue = input.value.replace('\n','');
if(dateValue.length > 0 && value.length > 0){
if (newDate == true)
datesInUse+=1;
lastDate = index;
$(input).next('input').next('.icon.add').show();
}
else {
if (dateValue.length == 0) {
$(input).next('input').val('').next('.icon.add').hide();
$('.error_time').remove();
}
if (dateValue.length == 0 && datesInUse > 0)
datesInUse-=1;
}
if (index == lastDate){
if (dateValue.length == 0 || value.length == 0) {
lastDate = 0;
}
if (lastDate > 0) {
$('#datepicker').datepicker('setDate', new Date(dates[lastDate - 1]));
}
}
$('#datepicker').datepicker('refresh');
}
function goToAction(action) { $('#action').val(action); document.forms[0].submit(); $('#action').val(''); return false; }
</script>
</body>
</html>
Learn from the best
Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.
Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 6 Comments.
Try for 7 days”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.
Our community of experts have been thoroughly vetted for their expertise and industry experience.
The Fellow title is reserved for select members who demonstrate sustained contributions, industry leadership, and outstanding performance. We will announce the experts being inducted into the Experts Exchange Fellowship during the annual Expert Awards, but unlike other awards, Fellow is a lifelong status. This title may not be given every year if there are no obvious candidates.
The Most Valuable Expert award recognizes technology experts who passionately share their knowledge with the community, demonstrate the core values of this platform, and go the extra mile in all aspects of their contributions. This award is based off of nominations by EE users and experts. Multiple MVEs may be awarded each year.