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.

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. ;)

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.

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.

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

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 ;)

This question has already been answered. Start a new discussion instead.