Display other data based on dropdown selection

JavaScript
21

Pullo, figured it out. Also, I am using the old PHP MySQL commands since I am trying to maintain a site that was built over 10 years ago and have to correct/fix things but do not have time to update all of it to current, good stuff. :rolleyes:

OK, thanks to Pullo, I now somewhat understand what is going on to possibly make my form update if the right information is entered. That being said, I have tried to integrate into my form the lessons taught here.

However, I have done something wrong as it does not return anything - well, at least the information is not placed in the appropriate boxes.

Please review this and let me know where I messed up - besides trying to do this at all :blush:

Here is my code thus far. It is using the data Pullo posted earlier since I know that was working in the sample he authored above.

InputForm.php

<?php
	session_start();

	// Connection Variables
	$hostname="localhost";
	$mysql_login="user";
	$mysql_password="pw";
	$database='sitepoint';
	

	// Connect to the database server
	$link = mysql_connect($hostname, $mysql_login, $mysql_password);
	if (!$link)
	{
		die('Could not connect: ' . mysql_error());
	}
   $db_selected = mysql_select_db($database, $link);
  if (!$db_selected) {
      die ('Can\\'t use ' . $database . ' : ' . mysql_error());
  }

  $myQuery = "SELECT * FROM Meeting_Places ";
			
	if ($_SERVER['REQUEST_METHOD'] == 'POST')
  {
    $task = isset($_POST['task']) ? $_POST['task'] : false;
     if ($task == "Register") {
      $formValues = $_POST;
      $formErrors = array();
      if (!VerifyForm($formValues, $formErrors))
      DisplayForm($formValues, $formErrors);
      else     {
        ProcessForm($formValues);     }
      }
      else if ($task == 'ReturnToMainPage')
        header('Location: index.php');
  }
  else
  {
    DisplayForm(null, null);
}


function DisplayForm($values, $errors)
{ ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<title>SACCC Meeting Information Change</title>
<link rel="stylesheet" type="text/css" href="view.css" media="all" />
<script type="text/javascript" src="view.js"></script>
<script type="text/javascript" src="calendar.js"></script>
</head>
<body id="main_body" >

	<img id="top" src="top.png" alt=""></img>
	<div id="form_container">
	
		<h1><a>SACCC Meeting Information Change</a></h1>
		<form id="form_754506" class="appnitro"  method="post" action="">
					<div class="form_description">
			<h2>SACCC Meeting Information Change</h2>
			<p>Use this form to change the SACCC Monthly Meeting information.</p>
		</div>						
			<ul >		
				<li id="li_2" >
					<label class="description" >Meeting Date: </label>
					<span>
						<input id="element_2_1" name="element_2_1" class="element text" size="2" maxlength="2" value="" type="text" />
						<label for="element_2_1">MM</label>
					</span>
					<span>
						<input id="element_2_2" name="element_2_2" class="element text" size="2" maxlength="2" value="" type="text" />
						<label for="element_2_2">DD</label>
					</span>
					<span>
						<input id="element_2_3" name="element_2_3" class="element text" size="4" maxlength="4" value="" type="text" />
						<label for="element_2_3">YYYY</label>
					</span>
				
					<span id="calendar_2">
						<img id="cal_img_2" class="datepicker" src="calendar.gif" alt="Pick a date." />	
					</span>
					<script type="text/javascript">
						Calendar.setup({
						inputField	 : "element_2_3",
						baseField    : "element_2",
						displayArea  : "calendar_2",
						button		 : "cal_img_2",
						ifFormat	 : "%B %e, %Y",
						onSelect	 : selectDate
						});
					</script>
				</li>		
				<li id="li_3" >
		<label class="description" for="element_3">Meeting Time </label>
		<span>
			<label>HH</label>		
			<select id="element_3_1" name="element_3_1" class="element text" >
				<?php
					for($i=0; $i<12 ; ++$i)
					{
						if($i<9)
						{
							$j = $i + 1;
							echo "<option value=\\"0" . $j . "\\">0" .$j . "</option>";
						}
						else
						{
							$j = $i + 1;
							echo "<option value=\\"" . $j . "\\">" .$j . "</option>";
						}
					}
				?>
				
			</select>
		</span>
		<span>
			<label>MM</label>		
			<select id="element_3_2" name="element_3_2" class="element text" >
			<option value = "00" selected = "selected">00</option>
			<option value = "15">15</option>
			<option value = "30">30</option>
			<option value = "45">45</option>
			</select>
		</span>
		<span>
			<label>AM/PM</label>		
			<select class="element select" id="element_3_4" name="element_3_4">
				<option value="AM" >AM</option>
				<option value="PM" >PM</option>
			</select>

		</span>
		</li>		<li id="li_4" >
		<label class="description" >Meeting Place </label>
		<div>
		in meeting place div
			<select>
			<option value="0">Please Select</option>
<?php
 		  $myQuery = "SELECT * FROM meeting_places ";
	
		$result = mysql_query($myQuery);

		while ($info = mysql_fetch_assoc($result))
		{
			echo '<option value="' . $info['id'] . '">' . $info['MeetingPlace'] . '</option>';
		}

?>			
			</select>
		</div>
		</li>		
		<li id="li_5" >
		<label class="description" >Meeting Address </label>
		
		<div>
			<input id="element_5_1" name="element_5_1" class="element text large" type="text" />
			<label for="element_5_1">Street Address</label>
		</div>
	
		<div>
		<span style="float:left">
			<input id="element_5_3" name="element_5_3" class="element text medium" style="width:14em" type="text" />
			<label for="element_5_3">City</label>
		</span>
		<span style="float:left">

			<select id="element_5_4" name="element_5_4" class="element text medium" type="text" >

				<option value="ID">ID</option>
				<option value="WA">WA</option>
			</select>
			<label for="element_5_4">State</label>			
		</span>
		<span style="float:left">
			<input id="element_5_5" name="element_5_5" class="element text medium" type="text" />
			<label for="element_5_5">Zip Code</label>
			</span>
		</div>
	
		</li>		
		
		<li id="li_6" >
		<label class="description" for="element_6">Comments </label>
		<div>
			<textarea id="element_6" name="element_6" class="element textarea medium" rows="4" cols="50"></textarea>
		</div>
		</li>
			
					<li class="buttons">
			    <input type="hidden" name="form_id" value="754506" />
			    <input id="newForm" method="post" class="button_text" type="submit" name="addNew" value="Add New" action="<?= $_SERVER['PHP_SELF'] ?>"/>
				<input id="saveForm" method="post" class="button_text" type="submit" name="submit" value="Submit" action="<?= $_SERVER['PHP_SELF'] ?>"/>
		</li>
			</ul>
		</form>	
		<?php }
		?>		
	</div>
	
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
      function insertResults(json){
        $("#element_5_1").val(json["StreetAddress"]);
        $("#element_5_3").val(json["City"]);
        $("#element_5_4").val(json["State"]);
        $("#element_5_5").val(json["ZipCode"]);
		$("#element_6").val(json["Comments"]);
      }

      function clearForm(){
        $("#element_5_1, #element_5_3, #element_5_4, #element_5_5, #element_6").val("");
      }

      function makeAjaxRequest(placeId){
        $.ajax({
          type: "POST",
          data: { placeId: placeId },
          dataType: "json",
          url: "process_ajax999.php",
          success: function(json) {
            insertResults(json);
          }
        });
      }

      $("#meetingPlace").on("change", function(){
        var id = $(this).val();
        if (id === "0"){
		alert('id is zero');
          clearForm();
        } else {
          makeAjaxRequest(id);
        }
      });
    </script>
	</body>
</html>

process_ajax.php

<?php
	// Connection Variables
	$hostname="localhost";
	$mysql_login="user";
	$mysql_password="pw";
	$database='sitepoint';
	

	// Connect to the database server
	$link = mysql_connect($hostname, $mysql_login, $mysql_password);
	if (!$link)
	{
		die('Could not connect: ' . mysql_error());
	}
   $db_selected = mysql_select_db($database, $link);
  if (!$db_selected) {
      die ('Can\\'t use ' . $database . ' : ' . mysql_error());
  }
  $placeId = $_POST['placeId'];

  $query = "SELECT * from meeting_places";
  $result = mysql_query($query) or die('Query failed: ' . mysql_error());
 echo 'in process_ajax99.php<br>';
	while ($row = mysql_fetch_assoc($result)) {
    if ($placeId == $row['id']){
      echo json_encode($row);
    }
  }
?>
22

Hi there,

There are a number of errors with the code you posted, but no probs, let’s go through them.

InputForm.php

[LIST]
[*]During my debugging, I removed the following, as these lines reference files on your server I have no access to:

<link rel="stylesheet" type="text/css" href="view.css" media="all" />
<script type="text/javascript" src="view.js"></script>
<script type="text/javascript" src="calendar.js"></script>
<script type="text/javascript">
  Calendar.setup({
    inputField   : "element_2_3",
    baseField    : "element_2",
    displayArea  : "calendar_2",
    button     : "cal_img_2",
    ifFormat   : "%B %e, %Y",
    onSelect   : selectDate
});
</script>

This is not an error, more something to be aware of.

[*]You forgot to give the select element an id. Without an id, nothing will happen when its value changes.

So, this:

<select>
  <option value="0">Please Select</option>
  <?php
    $myQuery = "SELECT * FROM meeting_places ";
    $result = mysql_query($myQuery);
    while ($info = mysql_fetch_assoc($result)) {
      echo '<option value="' . $info['id'] . '">' . $info['MeetingPlace'] . '</option>';
    }
  ?>      
</select>

Should be:

<select id="meetingPlace">
  <option value="0">Please Select</option>
  <?php
    $myQuery = "SELECT * FROM meeting_places ";
    $result = mysql_query($myQuery);
    while ($info = mysql_fetch_assoc($result)) {
      echo '<option value="' . $info['id'] . '">' . $info['MeetingPlace'] . '</option>';
    }
  ?>      
</select>

[*]This might be a typo, but above you called your file “process_ajax.php”, yet in the JavaScript you have:

function makeAjaxRequest(placeId){
  $.ajax({
    type: "POST",
    data: { placeId: placeId },
    dataType: "json", 
    url: "process_ajax999.php",
    success: function(json) {
      insertResults(json);
    }
  });
}

Obviously the file referenced under the URL attribute should correspond with the name of the actual file.[/LIST]

process_ajax.php

In this file, the first value echoed will be the return value, so your request was returning “in process_ajax99.php<br>”.

Remove this line:

echo 'in process_ajax99.php<br>';

Then everything will work as expected.

Happy Christmas :slight_smile:

1 Like