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

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

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.
0
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.
0
SteynskAuthor Commented:
HI bportlock,

Thanks for your comment.

But no this does not change the situation.

0
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;"

0
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

0

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

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.