AboutPricingCommunityTeamsStart Free TrialLog in
Avatar of Steynsk
Steynsk
Flag 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).


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>

Open in new window

ASPjQueryJavaScript
Avatar of undefined
Last Comment
Steynsk
8/22/2022 - Mon
Big Monty
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

Scott Fell
>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.
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
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Big Monty
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
Scott Fell
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Steynsk
ASKER
Thanks again Scott this was exactly what I was looking for.

Kind regards,

Steynsk
Plans and Pricing
Resources
Product
Podcasts
Careers
Contact Us
Teams
Certified Expert Program
Credly Partnership
Udemy Partnership
Privacy Policy
Terms of Use

© 1996-2023 Experts Exchange, LLC. All rights reserved. Covered by US Patent