[SOLVED] Dynamic Form Help

[dfowler]

Hey guys, I currently have a form that is separated into 4 different pages.  I was curious if there was a way to incorporate everything into either 1 or 2 pages.  Here is the code for the 4 pages:

 

Page1

<?php
include 'header.php';

$query = "select * from table_a where active='1'";
$a = array();
$result=mysql_query($query);
while (($row = mysql_fetch_assoc($result)) !== false) {
  $a[] = $row;
}
?>
<form action="2.php" method="POST">
Please select which area this item falls under:
<table>
<tr>
	<td>A: <select name="a">
	<?php foreach($a as $m) { ?><option value="<?php echo $m['id']; ?>"><?php echo $m['name']; ?></option><?php } ?></td>
</tr>
<tr>
	<td><input type="submit" value="Next" /></td>
</tr>
</table>
</form>
<?php
include 'footer.php';
?>

 

Page 2

<?php
include 'header.php';

$a = $_POST['a'];

$query = "select * from table_b where active='1' and a_id='$a'";
$b = array();
$result=mysql_query($query);
while (($row = mysql_fetch_assoc($result)) !== false) {
  $b[] = $row;
}

if (!$b) {
echo "Sorry there are no categories for this area.";
} else {
?>
<form action="3.php" method="POST">
<table>
<tr>
	Now select which category this item falls under:
</tr>
<tr>
	<td>B: <select name="b">
	<?php foreach($b as $c) { ?><option value="<?php echo $c['id']; ?>"><?php echo $c['name']; ?></option><?php } ?></td>
</tr>
<tr>
	<td><input type="submit" value="Next" /><input type="button" onClick="parent.location='1.php'" value="Back">
</td>
</tr>
</table>
</form>
<?php }
include 'footer.php';
?>

 

Page 3

<?php
include 'header.php';

$b = $_POST['b'];

$query = "select * from table_c where active='1' and b_id='$b'";
$c = array();
$result=mysql_query($query);
while (($row = mysql_fetch_assoc($result)) !== false) {
  $c[] = $row;
}

?>
<form action="4.php" method="POST">
<table>	
	<?php 
		if (!$c) {
			echo "Sorry there are no items for this category.";
		} else {
			foreach ($c as $i) {
		?><tr>
	  			<td valign="top">Name:<input type="text" name="name[<?php echo $i['name']; ?>]" value="<?php echo $i['name']; ?>" /></td>
		<tr>
			<td valign="top">Description:<br />(Max 50 char)</td>
		</tr>
		<tr>
			<td valign="top"><textarea name="desc[<?php echo $i['name']; ?>]"><?php echo $i['description']; ?></textarea></td>
		</tr>
		<tr>
			<td>Will this item have extra options?</td>
		</tr>
		<tr>
			<?php if ($i['options'] == 1) { ?>
			<td><input type="radio" value="1" name="options[<?php echo $i['name']; ?>]" checked>Yes
			<input type="radio" value="0" name="options[<?php echo $i['name']; ?>]">No <br />
			Short prompt to go with options: <input type="text" name="options_p[<?php echo $i['name']; ?>]" value="<?php echo $i['options_prompt']; ?>" size="40" /></td>
			<?php } else { ?>
			<td><input type="radio" value="1" name="options[<?php echo $i['name']; ?>]" onclick="Check(this);">Yes
			<input type="radio" value="0" name="options[<?php echo $i['name']; ?>]" onclick="Check(this);">No
			<div id="prompt" style="display:none">Short prompt to go with options: <input type="text" name="options_p[<?php echo $i['name']; ?>]" value="<?php echo $i['options_prompt']; ?>" size="40" /></div></td>
			<?php } ?>				
		</tr>
		<tr>
			<td>Price: $<input type="text" name="price[<?php echo $i['name']; ?>]" value="<?php echo $i['price']; ?>" size="5" /></td>
		</tr>			
			<td valign="top"><input type="hidden" name="id[<?php echo $i['name']; ?>]" value="<?php echo $i['id']; ?>" /></td>
  			</tr>
		</tr>			
			<td valign="top"><hr /></td>
  			</tr>
		<?php
			}
		?>
	<tr>
		<td><input type="submit" value="Submit" /></td>
	</tr>
	<?php
		}
	?>
</table>
</form>
<?php
include 'footer.php';
?>

 

Page 4

<?php
include 'system.php';

foreach($_POST['name'] as $k => $v) {
mysql_query("UPDATE table_c SET name='". $v ."', description='". $_POST['desc'][$k] ."', price='". $_POST['price'][$k] ."', options='". $_POST['options'][$k] ."', options_prompt='". $_POST['options_p'][$k] ."' WHERE id = '". $_POST['id'][$k] ."'");
}

print "Item(s) successfully edited!";
?>

[dbo]

So what are you asking exactly? Put your HTML code all on one page and your form processing code on 1 page if it isn't already.

[GingerRobot]

Yes, you can have it all on one page. You'll need to employ some ajax to do it, however. See this FAQ for something which is at least a little similar:

 

http://www.phpfreaks.com/forums/index.php/topic,155984.0.html

 

It's done without a database, and its all on one page, so you might find it a little confusing. However, if might give you the general idea.

 

Also, see www.ajaxfreaks.com/tutorials for some basic tutorials on AJAX.

[dfowler]

Yes, you can have it all on one page. You'll need to employ some ajax to do it, however. See this FAQ for something which is at least a little similar:

 

http://www.phpfreaks.com/forums/index.php/topic,155984.0.html

 

It's done without a database, and its all on one page, so you might find it a little confusing. However, if might give you the general idea.

 

Also, see www.ajaxfreaks.com/tutorials for some basic tutorials on AJAX.

Ok, it kind of makes sense to me.  However, I can't seem to get it to work.  I'm guessing I'm messing something up with it actually calling from a database instead of it working without one.

[dfowler]

Ok, I had thought that I got this to work finally.  However, it only works in Firefox.  Doesn't work at all with IE.  Here is the code:

 

<?php
$query = "select * from table_a where active='1'";
$list1 = array();
$result=mysql_query($query);
while (($row = mysql_fetch_assoc($result)) !== false) {
	$list1[] = $row;
}

if( isset($_GET['Param']) )
{
	$NewData = "";
	$P = (int)$_GET['Param'];

	if (!mysql_query("SELECT * FROM table_b WHERE a_id='$P'")) {
		echo "Database is down";
	}
	$query = "select * from table_b where active='1' and a_id='$P'";
	$result=mysql_query($query);
	while ($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
		$NewData .= "<option value='".$row['id']."'>".$row['name']."</option>\n";
	}
	echo $NewData; //Send Data back
	exit; //we're finished so exit..
}
?>
<script language="javascript">


function ajaxFunction(ID, Param) {
var loaderphp = "<?php echo $_SERVER['PHP_SELF'] ?>";

//we don't need to change anymore of this script
var xmlHttp;
try {
	// Firefox, Opera 8.0+, Safari
	xmlHttp=new XMLHttpRequest();
} catch(e) {
	// Internet Explorer
	try {
		xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	} catch(e) {
		try {
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		} catch(e) {
			alert("Your browser does not support AJAX!");
			return false;
		}
	}
}
xmlHttp.onreadystatechange=function() {
	if(xmlHttp.readyState==4) {
		document.getElementById(ID).innerHTML = xmlHttp.responseText;
	}
}
xmlHttp.open("GET", loaderphp+"?Param="+Param,true);
xmlHttp.send(null);
}
</script>

</head>
<body>

<!-- OK a basic form-->
<form method="post" enctype="multipart/form-data" name="myForm" target="_self" action="2.php">
<table border="0">
  <tr>
    <td>
	<!-- 
	OK here we call the ajaxFuntion LBox2 refers to where the returned date will go
	and the this.value will be the value of the select option
	-->Meal:
	<select name="list1" onchange="ajaxFunction('LBox2', this.value);">
		<option value=''></option>
	<?php 
		foreach($list1 as $l)
		{ ?>
		<option value="<?php echo $l['id']; ?>"><?php echo $l['name']; ?></option>
		<?php } ?>
	?>
	</select>
</td>
    <td>	Category:
	<select name="list2" id="LBox2">
			<!-- OK the ID of this list box is LBox2 as refered to above -->
	</select>
</td>
  </tr>
</table>
  <input type="submit" name="Submit" value="Submit" />
</form>

 

 

I can't see why this isn't working, any help would be greatly appreciated!

[dfowler]

I've tried tweaking things here and there, but still doesn't work with IE.  Continues to work perfectly with Firefox though.  It has those checks to make sure AJAX works with different browsers.  It is really starting to bug me, I know I must be missing something; but I can't see what it is.

[dfowler]

Ok here is where I am now.  I was hoping somebody can take a look and see if I am missing something.

 

AJAX Function - header.php

<script type="text/javascript">
function ajaxFunction(ID, Param) {
var loaderphp = "<?php echo $_SERVER['PHP_SELF'] ?>";

//test browsers
var xmlHttp;
try {
	// Firefox, Opera 8.0+, Safari
	xmlHttp=new XMLHttpRequest();
} catch(e) {
	// Internet Explorer
	try {
		xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	} catch(e) {
		try {
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		} catch(e) {
			alert("Your browser does not support AJAX!");
			return false;
		}
	}
}
xmlHttp.onreadystatechange=function() {
	if(xmlHttp.readyState==4) {
		document.getElementById(ID).innerHTML = xmlHttp.responseText;
	}
}
xmlHttp.open("GET", loaderphp+"?Param="+Param,true);
xmlHttp.send(null);
}
</script>

 

 

Form - 1.php

<?php
include 'header.php';

//FIRST list box
$query = "select * from table_a where active='1'";
$list1 = array();
$result=mysql_query($query);
while (($row = mysql_fetch_assoc($result)) !== false) {
	$list1[] = $row;
}

if(isset($_GET['Param']) )
{
	$NewData = "";
	$P = $_GET['Param'];

	if (!mysql_query("SELECT * FROM table_b WHERE a_id='$P'")) {
		echo "Database is down";
	}
	$query = "select * from table_b where active='1' and a_id='$P'";
	$result = mysql_query($query);
	while (($row = mysql_fetch_assoc($result)) !== false) {
		$NewData .= "<option value='".$row['id']."'>".$row['name']."</option>\n";
	}
	echo $NewData; //Send Data back
	exit;
}
?>
<form method="post" enctype="multipart/form-data" name="myForm" target="_self" action="2.php">
<table border="0">
<tr>
	<td>Option A:<select name="list1" onChange="ajaxFunction('LBox2', this.value);">
			<option value=''></option>
		<?php 
			foreach($list1 as $l)
			{ ?>
			<option value="<?php echo $l['id']; ?>"><?php echo $l['name']; ?></option>
			<?php } ?>
	</select>
	</td>
	<td>Option B:<select name="list2" id="LBox2">
	</select>
	</td>
</tr>
</table>
  <input type="submit" name="Submit" value="Submit" />
</form>
<?php
include 'footer.php';
?>

 

 

Just to clarify, the form loads up on IE, but when you pick an option in the first select box nothing happens to the second select box.