We help IT Professionals succeed at work.

catch the values of a dynamic number of text input fields

Steynsk
Steynsk asked
on
6 Comments
1 Solution
1,100 Views
Last Modified: 2014-05-09
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

Comment
Watch Question

View Solution Only

Big MontyWeb Ninja at large
CERTIFIED EXPERT

Commented:
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 FellDeveloper
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013

Commented:
>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

Author

Commented:
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
Big MontyWeb Ninja at large
CERTIFIED EXPERT

Commented:
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
Developer
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Steynsk

Author

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

Kind regards,

Steynsk

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.

View Solution