[SOLVED] Dropdown box to select which query to load in another dropdown

Greaser9780 · February 28, 2007

I want a dropdown box that will choose which results to show in a second dropdown. I was gonna use Javascript for this but can't figure out how to make the second box show results from a query as it would have to be php inside of a java function.

Any clues

itsmeArry · February 28, 2007

submit the page with the value of 1st select box.

get the value of the select box pass it to query

get the result

populate the 2nd conbobox.

thats it.

Greaser9780 · March 1, 2007

I just don't understand. I want it all on the same page I want to select a group from six. Then depending on which group is chosen it shows the dropdown fo r the appropriate query.

MadTechie · March 1, 2007

you have 3 options

1. one page that will reload on submit

2. ajax(read up) (the page will not have to reload)

3. a javascript that holds all the possible values and is called "onchange"

a VERY basic example of 1

this just loads itself up with a variable (NewData)

file: Test.php

<a href="Test.php?NewData=1">test1</a><br />
<a href="Test.php?NewData=2">test2</a><br />
<a href="Test.php?NewData=3">test3</a><br />
<?
if (isset($_GET['NewData']))
{ 
echo "<br />Results can be used for javascript or lists etc = ".$_GET['NewData'];
}
?>

Greaser9780 · March 1, 2007

I want to use java to hide dropdown boxes untill a radio button is chosen. Then depending on which radio button is selected it shows the appropriate query in a dropdown. I don't use alot of java. I placed the function in the head of my document. And used onclick for the radio buttons to display the next dropdown. Everytime I click on one of the buttons at the bottom of my browser it shows an error is on the page. Any clues?

MadTechie · March 1, 2007

i'll need the error really some sample code would also help..

Greaser9780 · March 1, 2007

Here is the function:

function toggleField(field,vis) {

var d = findDOM(field,1);

if (vis) {

d.visibility = 'visible';

} else {

d.visibility = 'hidden';

}

Here is that section of the form:

<input type="radio" name="show" value="show1"

onclick="toggleField('showone',true);toggleField('showtwo',false)" />Show 1<br />

<input type="radio" name="show" value="show2"

onclick="toggleField('showone',false);toggleField('showtwo',true)" />Show 2<br />

<input type="radio" name="show" value="noshow" checked="checked"

onclick="toggleField('showone',false);toggleField('showtwo',false)" />No Show

MadTechie · March 1, 2007

ok your looking for javascript more than php heres something for you to play with..



<html><head><title>The Form</title>

<script type="text/javascript">

function getStyleObject(objectId) {
    // cross-browser function to get an object's style object given its id
    if(document.getElementById && document.getElementById(objectId)) {
// W3C DOM
return document.getElementById(objectId).style;
    } else if (document.all && document.all(objectId)) {
// MSIE 4 DOM
return document.all(objectId).style;
    } else if (document.layers && document.layers[objectId]) {
// NN 4 DOM.. note: this won't find nested layers
return document.layers[objectId];
    } else {
return false;
    }
} // getStyleObject

function changeObjectVisibility(objectId, newVisibility) {
    // get a reference to the cross-browser style object and make sure the object exists
    var styleObject = getStyleObject(objectId);
    if(styleObject) {
styleObject.visibility = newVisibility;
return true;
    } else {
// we couldn't find the object, so we can't change its visibility
return false;
    }
} // changeObjectVisibility

function moveObject(objectId, newXCoordinate, newYCoordinate) {
    // get a reference to the cross-browser style object and make sure the object exists
    var styleObject = getStyleObject(objectId);
    if(styleObject) {
styleObject.left = newXCoordinate;
styleObject.top = newYCoordinate;
return true;
    } else {
// we couldn't find the object, so we can't very well move it
return false;
    }
} // moveObject



</script>
<script type="text/javascript">
<!--

function showAndFocus(div_id, field_to_focus)
{
  var the_div = getStyleObject(div_id);
  if (the_div != false)
  {
    changeObjectVisibility(div_id, "visible");
    field_to_focus.focus();
  }
}


function fillInName(first_name, last_name)
{
  document.main_form.the_name.value = 
	first_name + " " + last_name;

  changeObjectVisibility("nameDiv","hidden");  
}

function fillInDate()
{
  var month_select = document.date_form.the_month;
  var month = month_select.options[month_select.selectedIndex].value;

  var day_select = document.date_form.the_day;
  var day = day_select.options[day_select.selectedIndex].value;

  var year_select = document.date_form.the_year;
  var year = year_select.options[year_select.selectedIndex].value;

  document.main_form.the_date.value = 
	month + " " + day + ", " + year;

  changeObjectVisibility("dateDiv","hidden");
}

function hideAll()
{
  changeObjectVisibility("dateDiv","hidden");
  changeObjectVisibility("nameDiv","hidden");
}

// -->
</script>

</head>
<body>

<form name="main_form">
Name: <input type="text"  name = "the_name" 
  onFocus= "hideAll(); 
      showAndFocus('nameDiv',document.name_form.first_name);"><br>

Date: <input type="text" name = "the_date" 
  onFocus="hideAll(); 
      showAndFocus('dateDiv',document.date_form.the_month);"><br>

</form>

<div id="nameDiv" style="position:absolute;top:50px;left:100px;visibility:hidden;z-index:2;background-color:#CCCCCC">
<form name="name_form">
First name: <input type="text" name="first_name"><br>
Last Name: <input type="text" name="last_name"><br>
<input type="button" value="DONE" onClick="fillInName(this.form.first_name.value,this.form.last_name.value);">
</form>
</div>

<div id="dateDiv" style="position:absolute;top:50px;left:100px;visibility:hidden;z-index:2;background-color:#CCCCCC;height:50;padding:10px">
<form name="date_form">
<select name="the_month">
<option value="January">January
<option value="February">February
<option value="March">March
</select>
<select name="the_day">
<option value="1">1
<option value="2">2
<option value="3">3
</select>
<select name="the_year">
<option value="1990">1990
<option value="1991">1991
<option value="1992">1992
</select>
<input type="button" value="DONE" 
onClick="fillInDate(this.form);">
</form>
</div>

</body>
</html>

Greaser9780 · March 1, 2007

Thanks. I will give it a go and see what I get.

Greaser9780 · March 1, 2007

No clue man sorry. Way more than I needed there. It just confused me. I just can't figure out why I can't get this simple thing to work. I will post the page:

function toggleField(field,vis) {

var d = findDOM(field,1);

if (vis) {

d.visibility = 'visible';

} else {

d.visibility = 'hidden';

}

</script>

</head>

<body>

<input type="radio" name="show" value="show1"

onclick="toggleField('showone',true);toggleField('showtwo',false)" />Show 1<br />

<input type="radio" name="show" value="show2"

onclick="toggleField('showone',false);toggleField('showtwo',true)" />Show 2<br />

<input type="radio" name="show" value="noshow" checked="checked"

onclick="toggleField('showone',false);toggleField('showtwo',false)" />No Show

</form>

</body>

</html>

Greaser9780 · March 1, 2007

BUMP

itsmeArry · March 1, 2007

instad of this

var d = findDOM(field,1);
if (vis) {
 d.visibility = 'visible';
} else {
 d.visibility = 'hidden';
}

use this


if (vis) {
 document.getElementById(field).style.visibility = 'visible';
} else {
 document.getElementById(field).style.visibility = 'hidden';
}

Greaser9780 · March 1, 2007

It still puts the little alarm thing up and says error on page in the bottom left corner of my browser. Am I not including the function right?

itsmeArry · March 1, 2007

can you check it in FireFox it will give you the exact error... and post the error here..

Greaser9780 · March 1, 2007

In firefox it doesn't show an error but the dropdowns never appear like it's not working

Greaser9780 · March 1, 2007

I figured out how to get the error. Here it is:

findDOM is not defined

itsmeArry · March 1, 2007

Thats what I told you to do check the code that I gave you to replace

Greaser9780 · March 1, 2007

U da man. I forgot to take out the var d part. After that it worked like a charm.

Sign In

[SOLVED] Dropdown box to select which query to load in another dropdown

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information