Link to home
Start Free TrialLog in
Avatar of Steynsk
SteynskFlag for Netherlands

asked on

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).


User generated image
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>

Open in new window

Avatar of Big Monty
Big Monty
Flag of United States of America image

if you assign a class to each textbox, you could do something like this in jquery:

$('.className').each( function() {
         alert( $(this).val() )
});

Open in new window

>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

<%
date1=request.form("date1")
%>

Open in new window


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.
Avatar of 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?

Kind regards,

Steynsk
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
ASKER CERTIFIED SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Steynsk

ASKER

Thanks again Scott this was exactly what I was looking for.

Kind regards,

Steynsk