Populating Multiple Text Fields Based On A Dynamic Drop-Down List Selection

[Venom Rush]

Hi there

I'm new to php and MySQL and I'm busy trying to build a page that when the administrator selects an item from a drop-down list, that has been populated from a database, it populates multiple text fields with the appropriate information from the database. For example, if the administrator selects "Flower Show" from the selection box then the text fields Heading, Date and Details get populated with "Flower Show", date of the flower show, and a description of the flower show.

Here is what I have so far:

<form name="events" method="post"  action="<?= $_SERVER['PHP_SELF']?>">
<table>
  <tr>
    <td>&nbsp;</td>
    <td>
      <?php 
	// open connection to MySQL server
	$connection = mysql_connect('localhost', 'username', 'password')
	or die ('Unable to connect!');
					
	//select database
	mysql_select_db('test') or die ('Unable to select database!');
					
	//create and execute query
	$query = 'SELECT DISTINCT heading FROM events ORDER BY heading';
	$result = mysql_query($query) or die ('Error in query: $query. ' . mysql_error());
					
	//create selection list
	echo "<select name='Events'>\n";
					
	while($row = mysql_fetch_row($result))
	{
		$heading = $row[0];
		echo "<option value='$heading'>$heading\n";
	}
	echo "</select>"
      ?>
    </td>
  </tr>
  <tr>
    <td align="right" valign="top"><p>Heading:</p></td>
    <td>
      <input type="text" name="eventHeading" id="eventHeading" class="heading">
    </td>
  </tr>
  <tr>
    <td align="right" valign="top"><p>Date:</p></td>
    <td>
      <input type="text" name="eventDate" id="eventDate" class="date">
    </td>
  </tr>
  <tr>
    <td align="right" valign="top"><p>Details:</p></td>
    <td>
      <textarea name="eventDetails" id="eventDetails" class="details"></textarea>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>
      <input name="submit" type="submit" class="submitForm" value="Submit">
    </td>
  </tr>
</table>
</form>

Any help will be greatly appreciated. Been searching the web endlessly for a solution.

[kkeith29]

does it matter if the page reloads or not?

[Venom Rush]

does it matter if the page reloads or not?

No it doesn't. But it would be nice if it didn't have to. I know this involves javascript though.

But shoot away...any solution is a good solution at this point. ;)

[kkeith29]

why does the information need to be text fields?
are going to submit it again or something

[Venom Rush]

why does the information need to be text fields? are going to submit it again or something

Yes. The form is basically an edit form.

I've been working on something while waiting for a response to this thread and managed to get something working. Might not be the cleanest way in a php purest's eyes but it works.

What I did was add a submit button next to the selection box called "Edit".
Once the administrator selects an event they click the edit button which then calls the following php code:

if ($_REQUEST['edit']){

	// open connection to MySQL server
	$connection = mysql_connect('localhost', 'username', 'password')
	or die ('Unable to connect!');
		
	//select database
	mysql_select_db('test') or die ('Unable to select database!');
	
	//define variables
	$event = $_POST['Events'];
	
	//create and execute query
	$query = "SELECT heading, date, description FROM events WHERE heading = '$event'";
	$result = mysql_query($query) or die ('Error in query: $query. ' . mysql_error());
	
	while($row = mysql_fetch_row($result))
	{
		$heading = $row[0];
		$date = $row[1];
		$description = $row[2];
	}
	
	// close connection
	mysql_close($connection);
}

Please post your solution though as I don't really think mine is the best route to go.

[bgseo]

Hi,
I am no expert, but would you consider the following approach?

1) Drop down box with all the Shows (flower show, dance show, etc)

2) Two more text fields with data (venue, date)

3) Upon selecting an option in the event select, the two text fields must be populated.

The logic:

Get all show types in an array.

Eventsarray[$id] = array("venue => $venue, "date" =>$date);

Pass this array to a javascript snippet

Create javascript function selectsow(selobj) similar to this one:

function selectshow(selObj) {
global Eventsarray();
var id = selObj.options[selObj.selectedIndex].value;

document.getElementByID('venue').value = Eventsarray[id]['venue'];
document.getElementByID('date').value = Eventsarray[id]['date'];

}

Print the select box, attach an event: 
<select id ="showtype" onchange ="selectshow(this)">
<option value = "flowershow">flowershow</option>
...

</select>

<input type ="text" name = "venue" id="venue" value = "">
<input type ="text" name = "date" id="date" value = "">

Using such approach will let you populate the fields without reloading the page.

Reloading a page, on the other hand lets you track which events your visitors are interested in, and adds to your Alexa ranking, but that's another story.

Hope this helps.

[Venom Rush]

Thanks bgseo for your response. I'll try that out. The page I'm creating is purely for editing upcoming events for a small holiday lodge. Only admin will have access to it so I'm not worried about Alexa ranking.

Thanks a bunch

[kkeith29]

do you still need my code or did the other one work out for you.

[Venom Rush]

do you still need my code or did the other one work out for you.

I'd like to see it but I don't need it. I also think it might help any others out there that have the same question as me....so spit it out ;)

[rkarim1981]

Hi, I was also in same problem, if anyone still looking for solution please mail me on [email][e-mail][/email]

[b_scorpian]

yes brother i also need the solution for dynamic drop down list,