Dynamic Content Based on Form Selection

Updating same page based on form content

[mdinnocenzo]

I have a page that has a form on it. I want the bottom half of the page to display data based on the form selections. I want all the data on the same page as the form, with out reloading a page everytime.
Example
page loads displaying all data for user
user changes select form item a
(information on bottom of page now only shows information that pertains to select item)

I don't know where to start and have two books on PHP, been coding for 2 weeks and this is the last page that is being a thorn in my side.

Right now i am trying to do an iframe, there has to be some way to call a function on submit and have it echo or print what i need at the bottom of the page.

Here is what i have for the form:

<form action="" method="POST" class="shifty">
<div class="manuallabel"><label>Select a month for Points Awards:</label></div>
<div class="manualfield">
<select size="1" id="month" name="month">
<option value="">Select Month</option>
<option value="12">January</option>
 <option value="1">February</option>
 <option value="2">March</option>
 <option value="3">April</option>
 <option value="4">May</option>
 <option value="5">June</option>
 <option value="6">July</option>
 <option value="7">August</option>
 <option value="8">September</option>
 <option value="9">October</option>
 <option value="10">November</option>
 <option value="11">December</option>
</select>
&nbsp;&nbsp;&nbsp;
<input name="view_all_months" type="checkbox" value="1" checked/>View all months
</div>
<br />
<div class="manuallabel"><label>Select Type of Award to View:</label></div>
<div class="manualfield">
<select name="type" id="type" width="100px" size="1">
<option value="">Select Award</option>
<?php
$cv = mysqli_connect("localhost","","");
$rowcount = 0;
mysqli_select_db($cv,"tech_points");
$q = mysqli_query($cv,"select * from points_itemkey order by item_description");
while ($abc = mysqli_fetch_row($q)) {
 // $rowcount++;
 //for ($k=0; $k<count($abc); $k++){
 print "<option value =\"". htmlspecialchars($abc[0]) ."\">"
 .htmlspecialchars($abc[1]) ."</option>";
 //}
 }
?>
</select>
&nbsp;&nbsp;&nbsp;
<input name="view_all_months" type="checkbox" value="1" checked/>View all Awards
</div>
<br />
<div class="manuallabel"><label>Select Type of Redemption View:</label></div>
<div class="manualfield">
<select name="type" id="redeem" width="100px" size="1">
<option value="">Select Redemption</option>
<?php
$cv = mysqli_connect("localhost","root","nopasswords");
$rowcount = 0;
mysqli_select_db($cv,"tech_points");
$q = mysqli_query($cv,"select * from redemption_itemkey order by item_no");
while ($abc = mysqli_fetch_row($q)) {
 // $rowcount++;
 //for ($k=0; $k<count($abc); $k++){
 print "<option value =\"". htmlspecialchars($abc[0]) ."\">"
 .htmlspecialchars($abc[1]) ."</option>";
 //}
 }
?>
</select>
&nbsp;&nbsp;&nbsp;
<input name="view_all_months" type="checkbox" value="1" checked/>View all Redemptions
</div>
<br />
<div class="manualfield"><input name="View" type="submit" value="View" />
<input name="" type="reset" />
</div>
<?php 
function getdata(){
print htmlspecialchars($_SERVER['PHP_AUTH_USER']); 
}
?>
</form><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="shifty"><iframe scrolling="auto" width="840">
<?php 
print htmlspecialchars($_SERVER['PHP_AUTH_USER']); 
?> 
</iframe></div>

[edited by: eelixduppy at 5:06 am (utc) on Oct. 21, 2009]
[edit reason] removed db specifics [/edit]

[mdinnocenzo]

The very last <?php tag is just test junk to see if it would work.

Sorry for the long post.

Thanks Dino

[Samanthatouch]

AJAX will do that for you. Look around for a tutorial or example using AJAX.
Hope this helps. It's a very general answer :)

[TheMadScientist]

Yeah, JS / AJAX is the way to go, PHP actually has to reload the entire page, unless you use JS / AJAX to only load the information you need from the PHP and you don't need the iFrame at all, you can use:

<div id="ShowResults" style="display:none"></div>

Then in the JS
document.getElementById('ShowResults').style.display = "block";
document.getElementById('ShowResults').innerHTML = 'The HTML returned by PHP';

[mdinnocenzo]

Lovely another language to learn, ok will investigate that.

How do i get the form to call a PHP function using the onclick event on the form.

Thanks

[TheMadScientist]

I use something like:
<form id="FormID" action="javascript:yourFunction(document.getElementById('FormID'));">

Lovely another language to learn, ok will investigate that.

LMAO... I've felt the same way and that's just the price you have to pay for 'cool' and 'do it yourself' these days. Wait 'till you want to make all your URLs friendly. (I basically decided to do be cool I needed: HTML, CSS, PHP, MySQL, JS and Mod_Rewrite, which happen to add up to the bonus language: AJAX and makes sites cool)

Have fun with it... It's work now, but will hopefully payoff in the long-run.

[mdinnocenzo]

Well at least I have some experience with Java and I know VB 5&6 pretty well. A little .NET.

I guess thats the price we pay for volunteering for projects like this.

Thanks

Dino

[TheMadScientist]

I guess thats the price we pay for volunteering for projects like this.

Been there, done that... I hope you get some extra 'java' or something out of the deal. Good luck. You should be able to solve this one quickly in the JS / AJAX forum. (It's easy as long as you can find a sample of code, and you might be able to track it down just by searching.)

[mdinnocenzo]

One last question on this one, so i found a page for the AJAX Code, and the example seems pretty straight forward, but can i put the java script in a PHP page instead of an ASP page. I have my server setup to run ASP on Apache, but my SQL statements to fill the Picklists are PHP.

Thanks

[TheMadScientist]

You should be able to put the JS anywhere the browser has access to the script. I often use PHP to fill JS variables with dynamic information I need to pass to a function and have been known to parse .JS files as PHP to create functions on-the-fly without issues...

[mdinnocenzo]

I really hate to bother, and if i can get the correct output for the example i could figure out the rest.
Example is located here [w3schools.com...]

I created the files that they talk about, and made sure to use the php file.

my form uses a select item

<select size="1" id="txtHint" name="txtHint" onchange="showHint(this.value)">

my output area is using direct copy from example

<div class="shifty"><p>Suggestions: <span id="txtHint"></span></p></div>

and i changed the .js file to match php file extension

var url="gethint.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);

Now when I change the select control, it removes the populated options and doesn't output anything to the span.

I can share the url for the actual page if need be to show a working example.

Thanks MadScientist for all your help so far. I'm so close to being finished i can taste it, and boy is it bitter right now.

Thanks

Dino

[mdinnocenzo]

NEVEMIND = as soon as i re-read the post i noticed that i have the select and span as the same name.

ugh

[mdinnocenzo]

RESOLVED
I had to add the following lines at the top of the .js file. I was using the wrong syntax in most of my tries.

var month;
var type;
month = document.getElementById("month").value;
type = document.getElementById("type").value;