catch the values of a dynamic number of text input fields
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).
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>
>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?
You just need to capture using request.form. If you have a <input name="date1"> you capture that with asp code
Or you are posting ajax, but the result on the process page is the same.
Can you pair down your code with just the part we need to look at, you have a lot there.
Steynsk
ASKER
Thank you again Big and Scott,
I think I go for Scott's solution but in his example I will only get one value. And my question is about the dynamic number of values that comes in. In some cases I will receive 1 and in other cases 24 values. My cuestion is how do I deal with this not constant factor in ASP?
well, your question asked "how can I do this without server based code?" so that was the answer I gave...
to use server based code, you would name each textbox the same, for example, myTextBox, and on the page you post to, do a simple
myValues = Request.Form("myTextBox")
it doesn't matter if you just have 1 or 24 text boxes, you'll get a comma delimited string of values, like this:
myValue1,myValue2,myValue3, etc
to parse all of the values, you would use the split function, which would put everything in an array, and loop through the array:
myValues = Request.Form("myTextBox")
if InStr( myValues, "," ) = 0 then
'-- you only have one value
else
arrayOfMyValues = Split( myValues, "," )
for each val in arrMyValues '-- loop through array to manage each value
Response.Write val & "<br/>"
next
loop
Open in new window