Show form on dropdown help

Aridhol

I'm looking for some help on how to start looking for tutorials examples of something (terrible sentence).

Basically I have a page that does an mysql query for

fname lname date score cname result

and draws each row in the table with a while loop
e.g.

joe smith apr 25 95 john sale


This page works just fine.
What I want to do is click on a button and have a form show under each row in the table so I can do another query to submit new data for that row.

so say I wanted to update joe smith's score I would click on a button beside his row (at the end) and this would drop down a form with all the fields and a submit button so I could then do a query on submit to alter whatever data.


The problem is I have no idea where to even start looking for help on this. Any examples that are sort of like I describe would be hugely helpful and if any of the above is unclear (very likely) I'll try and clarify as best I can.

admanb

You're going to want to look at Javascript. Element.show() in particular. Basically, every row will have a hidden form beneath it that will be shown by hitting the button. There are other ways to do it (where the form doesn't even exist until you click the button, for example) but that's more complicated. Since you're going to be working with Javascript, you might want to look at Prototype; it cleans up a lot of really messy JS operations.

Ganluan

What environment/language are you creating this page in?

Aridhol

PHP

Also I got it to show the form when you click a radio button and hide it when you click another one.

Now the last challenge is to find out WHICH table row I have clicked the radio button for and take a piece of data from there (reps name) so when I have the form submit it updates the correct person.

while ($row = mysql_fetch_assoc($result)) {
$rep = $row['rep_name'];
$first_ghost_time = $row['1st_ghost_time'];
$first_completer = $row['1st_completer'];
$first_score = $row['1st_score'];
$first_result = $row['1st_result'];
$second_ghost_time = $row['2nd_ghost_time'];
$second_completer = $row['2nd_completer'];
$second_score = $row['2nd_score'];
$second_result = $row['2nd_result'];
$third_ghost_time = $row['3rd_ghost_time'];
$third_completer = $row['3rd_completer'];
$third_score = $row['3rd_score'];
$third_result = $row['3rd_result'];


echo '<tr>';
echo '<td id="rep">'. $rep . '</td>';
echo '<td id="date">'. $first_ghost_time . '</td>';
echo '<td id="coach">'. $first_completer. '</td>';
echo '<td id="score">'. $first_score . '</td>';
echo '<td id="result">'. $first_result . '</td>';
echo '<td id="date">'. $second_ghost_time . '</td>';
echo '<td id="coach">'. $second_completer . '</td>';
echo '<td id="score">'. $second_score . '</td>';
echo '<td id="result">'. $second_result . '</td>';
echo '<td id="date">'. $third_ghost_time . '</td>';
echo '<td id="coach">'. $third_completer . '</td>';
echo '<td id="score">'. $third_score . '</td>';
echo '<td id="result">'. $third_result . '</td>';
?>
<td><input onclick="javascript: $('#form').show('fast');" type="radio" name="yesghost" value="1" /> </td>
<td><input onclick="javascript: $('#form').hide('slow');" type="radio" name="noghost" value="0" /> </td>

<div id="form">

<label for="rep"> Rep Name </label>
<input type="text" id="rep" name="rep" /><br />
<label for="completer"> Completed By</label>
<input type="text" id="completer" name="completer" /><br />
<label for="score"> Score: </label>
<input type="text" id="score" name="score" size="10"/><br />
<input type="submit" name="submit" value="submit" />

</form>
<?php
echo '</tr>';
}
echo '</table>';

I know it's not formatted very well.
So when I click button 1 I need to be able to get data for the row it's in, specifically the rep field.

EDIT: I used jquery and css (tutorial)

admanb

Not a big jump. Just put the buttons and form inside "echo" statements. So instead of <div id="form"> you have echo 'div id=form-"'. $<some unique value from the DB> . '">'. Likewise, instead of $('#form')... you have $('#form-' . $<same unique value>... etc.

Aridhol

I don't think I'm understanding what you mean.

I got it to show the rep name in the form (pulled from $rep) but it only does this for the first rep name. I would guess because it only creates the form the first time through and not for each row of the table.

to clarify, if I had

joe
john
jacob
josh

I'd like a radio button at the end of each row to show or hide a form (check)
I'd like the Rep field in the form to be populated with the rep name on that line

Here is the complete code sans mysql db info

<html>
<head>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="ghost.css" />
<link rel="stylesheet" type="text/css" href="ajax.css" />
</head>
<title>
tracker        
</title>
<h2>  Tracker </h2>
<?php



mysql_select_db($dbname);

$query = "SELECT * FROM ghost_tracker_may ORDER BY rep_name";

$result = mysql_query($query) or die(mysql_error());

echo '<table>';
echo '<tr>';
echo '<td id="rep"> Rep Name </td>';
echo '<td id="date"> First Ghosting Date</td>';
echo '<td id="coach">Completed By</td>';
echo '<td id="score">Score</td>';
echo '<td id="result">Result</td>';
echo '<td id="date">Second Coaching Date</td>';
echo '<td id="coach">Completed By</td>';
echo '<td id="score">Score</td>';
echo '<td id="result">Result</td>';
echo '<td id="date">Third Coaching Date</td>';
echo '<td id="coach">Completed By</td>';
echo '<td id="score">Score</td>';
echo '<td id="result">Result</td>';
echo '</tr>';



while ($row = mysql_fetch_assoc($result)) {
$rep = $row['rep_name'];
$first_ghost_time = $row['1st_ghost_time'];
$first_completer = $row['1st_completer'];
$first_score = $row['1st_score'];
$first_result = $row['1st_result'];
$second_ghost_time = $row['2nd_ghost_time'];
$second_completer = $row['2nd_completer'];
$second_score = $row['2nd_score'];
$second_result = $row['2nd_result'];
$third_ghost_time = $row['3rd_ghost_time'];
$third_completer = $row['3rd_completer'];
$third_score = $row['3rd_score'];
$third_result = $row['3rd_result'];


echo '<tr>';
echo '<td id="rep">'. $rep . '</td>';
echo '<td id="date">'. $first_ghost_time . '</td>';
echo '<td id="coach">'. $first_completer. '</td>';
echo '<td id="score">'. $first_score . '</td>';
echo '<td id="result">'. $first_result . '</td>';
echo '<td id="date">'. $second_ghost_time . '</td>';
echo '<td id="coach">'. $second_completer . '</td>';
echo '<td id="score">'. $second_score . '</td>';
echo '<td id="result">'. $second_result . '</td>';
echo '<td id="date">'. $third_ghost_time . '</td>';
echo '<td id="coach">'. $third_completer . '</td>';
echo '<td id="score">'. $third_score . '</td>';
echo '<td id="result">'. $third_result . '</td>';
?>
<td><input onclick="javascript: $('#form').show('fast');" type="radio" name="yesghost" value="1" /></td>
<td><input onclick="javascript: $('#form').hide('slow');" type="radio" name="noghost" value="0" /></td>
<?php

echo '<div id="form">';
echo '<label for="rep"> Rep Name: </label>';
echo '<input type="text" id="rep" name="rep" value=' . $rep . '/>';
echo '<br />';
echo '<label for="completer"> Completed By</label>';
echo '<input type="text" id="completer" name="completer" /><br />';
echo '<label for="score"> Score: </label>';
echo '<input type="text" id="score" name="score" size="10"/><br />';
echo '<input type="submit" name="submit" value="submit" />';

echo '</form>';
echo '</div>';


echo '</tr>';
}
echo '</table>';
?>


</html>

admanb

<td><input onclick="javascript: $('#form').show('fast');" type="radio" name="yesghost" value="1" /></td>
<td><input onclick="javascript: $('#form').hide('slow');" type="radio" name="noghost" value="0" /></td>
<?php

echo '<div id="form">';

Becomes:

echo '<td><input onclick="javascript: $(\'#form-\' ' . $rep . ').show(\'fast\');" type="radio" name="yesghost" value="1" /></td>'
echo '<td><input onclick="javascript: $(\'#form-\' ' . $rep . ').hide(\'slow\');" type="radio" name="noghost" value="0" /></td>

echo '<div id="form-' . $rep . '">';

I could be wrong about the details of escaping quotes. I don't do a lot of PHP. But this is the basic idea: instead of creating just one form, you're creating one form for each row of the table. The form for rep "joe" would have the id "form-joe" and it's associated radio buttons will call $('form-joe').show()/hide().

This assumes that 'rep_name' is the key of your table. If it's not, you'll have some issues.