Question

Firstly apologies if this is really simple but I have spent hours trying and quite a lot of Google searches for the information I believe I need to no avail.

Ok. So what I have is a form with 14 inputs that is dynamically filled using a get query. The user can then change the contents of the retrieved information and when complete press submit to update our database. The code I was using was working fine using separate pages and a lightbox setup to update the information however I wanted to integrate the update screen into the main page and use ajax to do the update post so to the user the rest of the page is still visible.

At present I have the following for my form:

<table border='1'>
<form id="Update" onsubmit="return false;">
<tr>
<th>Query</th>
<th>Result</th>
<tr/>
<tr>
<?php
while($row = mysql_fetch_array($result))
{
?>
<td>Estimating No:</td><td><input name="ID" id="ID" type="text" value="<?php echo $_GET['q']; ?>" /></br></td>
</tr>
<tr>
<td>Date Received:</td><td><input type="text" name="Date_Received" id="Date_Received" value="<?php echo( htmlspecialchars( $row['Date_Received'] ) ); ?>" /><br/></td>
</tr>    
<tr>     
<td>X Ref:</td><td><input name="Xref" id="Xref" type="text" value="<?php echo( htmlspecialchars( $row['Xref'] ) ); ?>" /><br/></td>
</tr>
<tr>   
<td>Project Name:</td><td><input name="Project_Name" id="Project_Name" type="text" value="<?php echo( htmlspecialchars( $row['Project_Name'] ) ); ?>" /><br/></td>
</tr>
<tr>
<td>Location:</td><td><input name="Location" id="Location" type="text" value="<?php echo( htmlspecialchars( $row['Location'] ) ); ?>" /><br/></td>
</tr>
<tr>   
<td>Project Type:</td><td><input name="Project_Type" id="Project_Type" type="text" value="<?php echo( htmlspecialchars( $row['Project_Type'] ) ); ?>" /><br/></td>
</tr>
<tr>   
<td>Main Contractor:</td><td><input name="Main_Contractor" id="Main_Contractor" type="text" value="<?php echo( htmlspecialchars( $row['Main_Contractor'] ) ); ?>" /><br/>     </td>
</tr>
<tr>   
<td>Tender Sum:</td><td><input name="Tender_Sum" id="Tender_Sum" type="text" value="<?php echo( htmlspecialchars( $row['Tender_Sum'] ) ); ?>" /><br/></td>
</tr>
<tr>   
<td>Tender Return Date:</td><td><input name="Tender_Return_Date" id="Tender_Return_Date" type="text" value="<?php echo( htmlspecialchars( $row['Tender_Return_Date'] ) ); ?>" /><br/></td>
</tr>
<tr>   
<td>Jbsr Return Date:</td><td><input name="Jbsr_Return_Date" id="Jbsr_Return_Date" type="text" value="<?php echo( htmlspecialchars( $row['Jbsr_Return_Date'] ) ); ?>" /><br/></td>
</tr>
<tr>   
<td>Contact Name:</td><td><input name="Contact_Name" id="Contact_Name" type="text" value="<?php echo( htmlspecialchars( $row['Contact_Name'] ) ); ?>" /><br/></td>
</tr>
<tr>   
<td>Contact Number:</td><td><input name="Contact_Tel" id="Contact_Tel" type="text" value="<?php echo( htmlspecialchars( $row['Contact_Tel'] ) ); ?>" /><br/></td>
</tr>
<tr>   
<td>Contact Email:</td><td><input name="Contact_Email" id="Contact_Email" type="text" value="<?php echo( htmlspecialchars( $row['Contact_Email'] ) ); ?>" /><br/></td>
</tr>
<tr>   
<td>Project Status:</td><td><input name="Status" id="Status" type="text" value="<?php echo( htmlspecialchars( $row['Status'] ) ); ?>" /><br/></td>
</tr>
<tr>
<td></td><td><input type="submit" onClick="sendUpdate()" /></td>
</tr> 
</form>

Now my problem. After a lot of searching I have found a piece of code that seems to work however it will only work with one parameter. As you can see I need to post 14 in one go so it is no good as is. I have tried many combinations to try and get it working but to no avail.
The code is:

<script>
    function sendUpdate() {
        new Ajax.Request("MenuUpdate1.php", 
            { 
            method: 'post', 
            postBody: 'ID='+$F('ID'),
            onComplete: showResponse 
            });
    }

    function showResponse(req){
        $('MenuUpdate').innerHTML= req.responseText;
    }
</script>

What I really need to know is how I can adapt the code above to allow me to post the additional 13 input boxes. Any help would be much appreciated and if you need me to clarify anything please ask.

Thanks in advance

Alan

Answer 1

Prototype excels at these sorts of operations. For reference see Ajax.Updater and Form.serialize.

function sendUpdate() {
    new Ajax.Updater({success: 'MenuUpdate'}, 'MenuUpdate1.php', {
        parameters: Form.serialize('Update', true)
    });
}