Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.
Course Of The Month
Become a Premium Member and unlock a new, free course in leading technologies each month.
Solved
How to use PHP and Javascript to auto select Option value on load?
Posted on 2011-03-06
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_do
addOption(document.drop_do
addOption(document.drop_do
addOption(document.drop_do
addOption(document.drop_do
This may just be something that has to be set after the fact somehow with something like getElementById...
Thanks
Richard
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_do
addOption(document.drop_do
addOption(document.drop_do
addOption(document.drop_do
addOption(document.drop_do
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>
<SELECT NAME="DD2">
<Option value="">State</option>
</SELECT>
</form>
</body>
</html>
// 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);
}
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
2-
2
5 Comments
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
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
@fwlrichard: since your js isn't finished, I just add a sample code to give you the idea.
In PHP, you create two js var using PHP, like this
<?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>
In your js file (as I modified a little), it should look like this
In PHP, you create two js var using PHP, like this
<?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>
In your js file (as I modified a little), it should look like this
function fill_DD1(){
var ary = new Array();
ary[1] = "United States";
ary[2] = "Canada";
ary[3] = "United Kingdom";
for (i = 1; i <= 3; i++ )
{
if (selectedCountry)
{
addOption(document.drop_down.DD1, i, ary[i], "true", 'true');
}
else {
addOption(document.drop_down.DD1, i, ary[i], "false", 'false');
}
}
fill_DD2();
}
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_do
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
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_do
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
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>
Featured Post
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
Things That Drive Us Nuts
Have you noticed the use of the reCaptcha feature at EE and other web sites? It wants you to read and retype something that looks like this.
Insanity! It's not EE's fault - that's just the way reCaptcha works. But it i…
These days socially coordinated efforts have turned into a critical requirement for enterprises.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions.
Consider email address RFCs:
Look at HTML5 form input element (with type=email) regex pattern:
T…
The viewer will learn the basics of jQuery including how to code hide show and toggles.
Reference your jQuery libraries:
(CODE)
Include your new external js/jQuery file:
(CODE)
Write your first lines of code to setup your site for jQuery…
Suggested Courses
Earn Certification
HTML5 Specialist - Certification
Free withPremium
Course of the Month7 days, 7 hours left to enroll
632 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.