troubleshooting Question

catch the values of a dynamic number of text input fields

Avatar of Steynsk
SteynskFlag for Netherlands asked on
ASPjQueryJavaScript
6 Comments1 Solution1116 ViewsLast Modified:
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?

<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>
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 6 Comments.
Start Free Trial
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.

-Mike Kapnisakis, Warner Bros