Chrome's Mac version seems to have an issue with PHP/Javascript and passing 'This.value'

[BennyTheBunny]

Let's start out with a Howdy and a Thanks! for any suggestion you may have.

This is an existing PHP/javaScript/Ajax system used by a note-for-profit for whom I'm working pro bono. Converting to jQuery isn't a practical solution do to costs and size of the code base.

Chrome's Mac version seems to have an issue with PHP/Javascript and passing variables such is 'This.value'.
It appears it passes the data but what is passes is the error for 'undifined veriable'.

Interesting that there is no issue under windows with Chrome, IE, firefox (didn't check Safari)
And on a Mac it works with IE and Firefox but not with Chrome or Safari.

However, it's easly to demonstrate that the 'This.value' , in [highlight #FCE94F]<select name="state" id="state" onclick="showTown(this.value,'all',false)" >[/highlight], is not reaching the javascript 'showTown' in the case of MAC Chrome.
So, this is what I'm assuming - 'This.value' is for some reason seen by Chrome's Mac version as 'undifined' and is being corrupted.


Code involved:

on a php page there is the following code segment(note the <select name='state'...> line ):

<div class="selectFilter">
<span class="tableLabel">State:</span>
<!-- Very important that 'onclick' instead of 'onchange' as when states are changed it would trip the showTown -->
<!-- <select name="state" id="state" onclick="showTown(this.value)"> -->
[highlight #FCE94F] <select name="state" id="state" onclick="showTown(this.value,'all',false)" >[/highlight]
<option value="all">All</option>
<?php
include "./support/stateslist.php";
?>
</select>
</div>
<div class="clearing" style="height: 7px;">&nbsp;</div>
<div class="selectFilter">
<div id="listCities"></div>
</div>


When the 'onclick' event occurs it passes variables to a called javaScript.

function showTown(str, cty, fistPass)
{
if (str=="")
{
document.getElementById("listCities").innerHTML="";
return;
}

if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("listCities").innerHTML=xmlhttp.responseText;
document.getElementById("devType").value = 'all';

//newTotals(str,'all','all');
if (cty=="")
{
newTotals(str,'all','all');
}else{
newTotals(str,cty,'all');
}
}
}

xmlhttp.open("GET","support/getCity2.php?state="+str+"&city="+cty+"&firstPass="+fistPass,true);

xmlhttp.send(null);
}

And the above is used to power this PHP:

<?php
include "support.php";
$state=$_GET['state'];
$city=$_GET['city'];
$OnLoad=$_GET['firstPass'];


$preloadedcity = '';

?>
<span class="tableLabel">Town:</span>
<select name="city" id="city" onChange="handleForm()">
<option value="all">All</option>
<?php
$citySQL="SELECT DISTINCT(city) FROM tblproject where state like '$state' ORDER BY city ASC";
$cityResult=mysql_query($citySQL);
for ($x=0;$x<mysql_num_rows($cityResult);$x++) {
$cityDetail=mysql_fetch_array($cityResult);
if((strtoupper($cityDetail[city])== strtoupper($city)) && ( $OnLoad == true) ){
$preloadedcity = "selected";
}else{
$preloadedcity = "";
}
echo "<option name='city' id='city' $preloadedcity value='$cityDetail[city]'>$cityDetail[city]</option>";
}
?>
</select>

 

[vacunita]

PHP and Javascript run independently, that is they don't directly interact.

Since the error you are getting is a JS error we can rule out the PHP side.

JS works off HTML elements, so the raw PHP is of no use. We need to see first what the PHP include below is outputting for the drop down:

<select name="state" id="state" onclick="showTown(this.value,'all',false)" >
<option value="all">All</option>
<?php
[highlight #EDD400]include "./support/stateslist.php";[/highlight]
?>
</select>

As a Guess here, and only because I know it happens, its possible the the showTown function is getting fired before the dropdown gets its value, and since you have no default value set, it issues that error. To be completely sure, you can set your "ALL" option to be selected by default.

<option value="all" [highlight #CC0000][COLOR=#FFFFFF]selected="selected"[/color][/highlight]>All</option>

If when you attempt to run it, the value is ALL, then you know the function is getting fired too early, before the dropdown has a chance to set the selected value.

To make sure this doesn't happen change the onlcick event to an onchange event. so the function only fires when the value has actually been changed.

<select name="state" id="state" [highlight #3465A4][COLOR=#FFFFFF]onchange[/color][/highlight]="showTown(this.value,'all',false)" >

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[BennyTheBunny]

Has to be 'onClick' or the code will not work - this is an existing and functional website that only has issues with .
MAC Chrome / MAC Safari - so this issue is browser not code base.

 

[vacunita]

Has to be 'onClick' or the code will not work

Why? The difference between onclick and onchange does not affect functionality, only timing in setting the value. The difference may be browser based, but the only thing you can change is the code, not the browser behavior.

Try it before saying it doesn't work.




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[BennyTheBunny]

what made you think I had not tested that before I posted? - and noted it in the code-base - it doesnt' work that way for a reason - the 'state' is passed in as by the URL - if you use onchange the code will not work - tested and retested.

 

[vacunita]

O.k I missed the comment inside the HTML:

<!-- Very important that 'onclick' instead of 'onchange' as when states are changed it would trip the showTown -->

So the question is how is it tripping the showTown? There's no reason it should unless the dropdown value is being changed. Which is what you want.

Try a simple test, create a single dropdown, and use on change to get the value.

<script type="text/javascript">
function testShow(ddValue)
{
alert(ddValue);
}
</script>

<select name="mydropdown" onChange="testShow(this.value);">
...
</select>

It would also be helpful to see the actual HTML rendered for the state dropdown rather than the PHP include.














----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech