Avatar of fwlrichard
fwlrichard
 asked on

How to use PHP and Javascript to auto select Option value on load?

Hi,

I'm trying to figure out how to get the dropdown or select option selected on load?
I don't know how to get or pass the values of $country and $state from the index.php into the javascript functions then how do I check if its the right option to set selected as true?
I don't know how or if you can mix javascript and php scripting...

I've tried to make this work for days now...
Just trying to test echo true with php into the function to test. I can't make anything work. I have tried every which way I could think of and then some....    the list goes and goes... ie..
   addOption(document.drop_down.DD1, "1", "United States", <?php echo "true"; ?>);
   addOption(document.drop_down.DD1, "1", "United States", <?php echo "\"true\""; ?>);
   addOption(document.drop_down.DD1, "1", "United States", "<?php echo "true"; ?>");
   addOption(document.drop_down.DD1, "1", "United States", "<?php echo 'true'; ?>");
   addOption(document.drop_down.DD1, "1", "United States", "<?php echo 'chr(34)'.'true'.'chr(34)'; ?>");

This may just be something that has to be set after the fact somehow with something like getElementById...

Thanks
Richard

 
<?php
//  index.php
// Get or load country and state variables
$country = "1";			// For testing set default as country 1
$state = "14";			// For testing set default as state as 14
?>

<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>Auto fill second dropdowns...</title>
<script language="javascript" src="list.js"></script>
</head>

<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onload="fill_DD1();">
<form name="drop_down" action="index.php" method="POST" >
		
<SELECT NAME="DD1" onChange="fill_DD2();">
<Option value="">Country</option>
</SELECT>

&nbsp;

<SELECT NAME="DD2">
<Option value="">State</option>
</SELECT>

</form>
</body>
</html>

Open in new window

// list.js
// Function is used to fill the first dropdown selectbox on load
function fill_DD1(){ 
addOption(document.drop_down.DD1, "1", "United States", "false", 'false');
addOption(document.drop_down.DD1, "2", "Canada", "false", "false");
addOption(document.drop_down.DD1, "3", "United Kingdom", "false", "false");
fill_DD2();
}


// ON selection of first dropdown fill the second dropdown
function fill_DD2(){
 removeAllOptions(document.drop_down.DD2);
    // First remove all options from the second dropdown
 addOption(document.drop_down.DD2, "", "Select State", "");    // Add the first option value to second dropdown

// later I would like to get the values from the database or cache file
  if(document.drop_down.DD1.value == '1'){
   addOption(document.drop_down.DD2,"14", "Alabama", "false", "false");

   addOption(document.drop_down.DD2,"15", "Alaska", "false", "false");

   addOption(document.drop_down.DD2,"16", "Arizona", "false", "false");

  }


  if(document.drop_down.DD1.value == '2'){

   addOption(document.drop_down.DD2,"2", "Alberta", "false", "false");

   addOption(document.drop_down.DD2,"3", "British Columbia", "false", "false");

   addOption(document.drop_down.DD2,"4", "Manitoba", "false", "false");

  }

  if(document.drop_down.DD1.value == '3'){

   addOption(document.drop_down.DD2,"1", "London");

  }
}


// Function to remove all options from a selectbox
function removeAllOptions(selectbox){
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{selectbox.remove(i);}
}


// function to add options to a selectbox
function addOption(selectbox, value, text, defaultSelected, selected){
	var optn = document.createElement("OPTION");
	optn.text = text;
	optn.value = value;
        if (selected=="true"){optn.selected = selected;}
	selectbox.options.add(optn);
}

Open in new window

PHPJavaScript

Avatar of undefined
Last Comment
fwlrichard

8/22/2022 - Mon
honestman31

I think you are trying to use PHP inside the file  list.js
 if that is the case then you are wrong ,
You should rename the file  list.js  to be list.php    and
change this line  <script language="javascript" src="list.js"></script>
 to be
<script language="javascript" src="list.php"></script>

this way it should work  
ASKER CERTIFIED SOLUTION
dsmile

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
fwlrichard

ASKER
honestman31: and dsmile:
Thank you both for the quick reply.

honestman31: I tried changing the list.js to list.php and renaming list.js to list.php it didn't seem to solve the problem. I may not have the php formated correctly. I don't get a error but it don't work.
addOption(document.drop_down.DD1, "1", "United States", "false", "<?php echo 'test';?>");

dsmile: I agree that I will most likly use a array and set the selected with a IF statment.
But the problem is how do I get the value $country value into "selectedCountry" ?

Thanks
Richard
dsmile

See the php code I gave you
<?php
//  index.php
// Get or load country and state variables
$country = "1";                 // For testing set default as country 1
$state = "14";                  // For testing set default as state as 14
?>

<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>Auto fill second dropdowns...</title>
<script language="javascript" src="list.js"></script>
<script language="JavaScript">
<!--
var selectedCountry = <?php echo $country?>;      
var selectedState = <?php echo $state?>;      
//-->
</script>
</head>

Open in new window

This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
fwlrichard

ASKER
dsmile:
Sorry about that.... I skiped the second script:
<script language="JavaScript">
<!--
var selectedCountry = <?php echo $country?>;      
var selectedState = <?php echo $state?>;      
//-->
</script>

 I have tested it and it does work.
Thank You