• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 473
  • Last Modified:

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

0
Steynsk
Asked:
Steynsk
  • 5
  • 3
1 Solution
 
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
SteynskAuthor Commented:
Excellent....  Thank you (a lot)
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now