two conflicting java scripts

Hi Experts,

I've got this excellently working javascript (function testAge) created by Kadaba on this forum.
But when I add a line of code to make my date picker work Kadaba's script does no longer work.

The code is beneath and the conflicting line of code is 51
<html> 
<title>Inschrijven</title> 
<head> 
<script type="text/javascript"> 
function testAge(val) 
{ 
        var ageTuplets = val.split("-"); // dd-mm-yyyy 
        // ageTuplets[0] = dd,ageTuplets[1] = mm,ageTuplets[2] = yyyy 
        var enteredDate = new Date().setFullYear(ageTuplets[2],(ageTuplets[1]-1),ageTuplets[0]); 
        var today = new Date(); 
        today.setFullYear(today.getFullYear()-16); 
         
        if (enteredDate>today) 
        { 
                document.getElementById('askParents').style.display="block"; 
        } 
        else 
        { 
                document.getElementById('askParents').style.display="none"; 
        } 
} 
</script> 
</head> 
<body> 
<form method="post" name="inschrijving" action="<?php echo $_SERVER['PHP_SELF']; ?>"> 
<table> 
<tr> 
        <td align="right">Geboortedatum</td> 
        <td>:</td> 
        <td align="center" width="50"><font color=red><b>*</b></font></td> 
        <td> 
                <div id="ageContainer"> 
                <input name="gebdat" size="50" onchange="testAge(this.value)"> 
                        <a href="javascript:void(0)" onclick="if(self.gfPop)gfPop.fPopCalendar(document.inschrijving.gebdat);return false;" > 
                                <img class="PopcalTrigger" align="absmiddle" src="../lib/calender/calbtn.gif" width="34" height="22" border="0" alt=""> 
                </img></a> 
                </div> 
        </td> 
</tr> 
<tr style="display:none;" id="askParents"> 
        <td align="right">Parent email</td> 
        <td>:</td> 
        <td align="center" width="50"><font color=red><b>*</b></font></td> 
        <td> 
                <input id="parEmail" type="text"> 
        </td> 
</tr> 
</table>
</form>
 </form>
<iframe width=174 height=189 name="gToday:normal:../lib/calender/agenda.js" id="gToday:normal:../lib/calender/agenda.js" src="../lib/calender/ipopeng.htm" scrolling="no" frameborder="0" style="visibility:visible; z-index:999; position:absolute; top:-500px; left:-500px;"></iframe>
</body> 
</html>

Open in new window

LVL 1
SteynskAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Beverley PortlockCommented:
Please post the contents of agenda.js since that probably has the conflicting code
Beverley PortlockCommented:
How do you know that line 51 is the problem line? Is there an error message? If so please post that as well.
SteynskAuthor Commented:
I've got additional information (just discoverd)

When I use manualy add a value and click outside of the textbox, the script works.
But when I use the date picker and add the same date the second hidden text field does not appear.

A tempory URL can be found over here:

http://test.zfczuidlaren.nl/inschrijving/inschrijven1.php

Thanks

Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Beverley PortlockCommented:
It seems to me that the calendar insertion is not triggering the onChange event associated with the input field. That's why doing it manually works but "injecting" the value fails.

I'm looking a bit more, but that's my suspicion.
Beverley PortlockCommented:
What happens if you change

onclick="if(self.gfPop)gfPop.fPopCalendar(document.inschrijving.gebdat); return false;"

to

onclick="if(self.gfPop)gfPop.fPopCalendar(document.inschrijving.gebdat); testAge(this.value); return false;"

To ensure that the testAge() function is called.
SteynskAuthor Commented:
HI bportlock,

Thanks for your comment.

But no this does not change the situation.

Beverley PortlockCommented:
Rather than this.value in

onclick="if(self.gfPop)gfPop.fPopCalendar(document.inschrijving.gebdat); testAge(this.value); return false;"

Maybe we need to be more specific

onclick="if(self.gfPop)gfPop.fPopCalendar(document.inschrijving.gebdat); testAge(document.inschrijving.gebdat.value); return false;"

kadabaCommented:
>> It seems to me that the calendar insertion is not triggering the onChange event associated with the input field. That's why doing it manually works but "injecting" the value fails.

This is true since the onchange is detected on blur of an element and we are not even focusing on the text box.

>> onclick="if(self.gfPop)gfPop.fPopCalendar(document.inschrijving.gebdat); testAge(this.value); return false;"

This would fail as this would indicate the anchor object.

>> onclick="if(self.gfPop)gfPop.fPopCalendar(document.inschrijving.gebdat); testAge(document.inschrijving.gebdat.value); return false;"

This would have solved the issue perhaps provided the calendar was synchronous, but since its not, testAge will be immediately executed and would not produce desired results.

We could probably poll the text box field for the change in the value and get this done, but I feel its really not necessary.

The better way to do the validation would be to validate on submit of the form.

I tried both ways polling(commented code) and on submit validation and i prefer the latter approach as its neater.( The commented code is just for your reference on how to do the polling.)

let me know. Sorry for the delay I was asleep :)

<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
<title>Inschrijven</title> 
 
<script type="text/javascript"> 
//var pollAge;
//var prevDate;
function testAge(val) 
{ 
	//if(val == '' || prevDate == val)
	//{
		//pollAge = setTimeout(function(){testAge(document.inschrijving.gebdat.value)},100);
		//return;
	//}
	//prevDate = val;
	var ageTuplets = val.split("-"); // dd-mm-yyyy 
	// ageTuplets[0] = dd,ageTuplets[1] = mm,ageTuplets[2] = yyyy 
	var enteredDate = new Date().setFullYear(ageTuplets[2],(ageTuplets[1]-1),ageTuplets[0]); 
	var today = new Date(); 
	today.setFullYear(today.getFullYear()-16); 
	 
	if (enteredDate>today) 
	{ 
			document.getElementById('askParents').style.display="block"; 
			return false;
	} 
	else 
	{ 
			document.getElementById('askParents').style.display="none"; 
			return true;
	}
	//clearTimeout(pollAge);
} 
//function calculateAge()
//{
//	var inpObj = document.inschrijving.gebdat;
//	pollAge = setTimeout(function(){testAge(inpObj.value)},100);
//}

function validateForm(form)
{
	if(!testAge(form.gebdat.value))
	{	
		form.gebdat.defaultClassName = form.gebdat.clssName;// default class if any present
		form.gebdat.className = "error";
		return false;
	}else{
		form.gebdat.className = form.gebdat.defaultClassName;// get the default class back on
	}
	return true;
}

</script> 
<style type="text/css">
.error{
background-color:yellow;
}
</style>
</head><body> 
<form method="post" name="inschrijving" action="/inschrijving/inschrijven1.php" onsubmit="return validateForm(this);"> 
<table> 
<tbody><tr> 
        <td align="right">Geboortedatum</td> 
        <td>:</td> 
        <td align="center" width="50"><font color="red"><b>*</b></font></td> 
        <td> 
                <div id="ageContainer"> 
                <input name="gebdat" size="50" onchange="testAge(this.value)"> 
                <a href="javascript:void(0)" onclick="if(self.gfPop)gfPop.fPopCalendar(document.inschrijving.gebdat);return false;"> 
                <img class="PopcalTrigger" src="inschrijven1.php_files/calbtn.gif" alt="" align="absmiddle" border="0" height="22" width="34"> 
                </a> 
                </div> 
        </td> 
</tr>
<tr> 
        <td align="right">test</td> 
        <td>:</td> 
        <td align="center" width="50"><font color="red"><b>*</b></font></td> 
        <td><input name="test" size="50"></td></tr>
        
<tr style="display: none;" id="askParents"> 
        <td align="right">Parent email</td> 
        <td>:</td> 
        <td align="center" width="50"><font color="red"><b>*</b></font></td> 
        <td> 
                <input id="parEmail" type="text"> 
        </td> 
</tr> 
</tbody></table>
<input type="submit" id="mySubmit" name="mySubmit" value="submit">
</form>
 
<iframe name="gToday:normal:../lib/calender/agenda.js" id="gToday:normal:../lib/calender/agenda.js" src="inschrijven1.php_files/ipopeng.htm" style="visibility: visible; z-index: 999; position: absolute; top: -500px; left: 171px; width: 174px; height: 168px;" scrolling="no" frameborder="0" height="189" width="174"></iframe>
</body></html>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SteynskAuthor Commented:
Excellent....  Thank you (a lot)
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.