Ajax从表单发布多个变量

时间:2011-09-22 12:45:24

标签: ajax post prototypejs

首先道歉,如果这很简单,但我花了好几个小时尝试,而且很多谷歌搜索我认为无需的信息。

确定。所以我所拥有的是一个包含14个输入的表单,使用get查询动态填充。然后,用户可以更改检索到的信息的内容,完成后按提交更新我们的数据库。我使用的代码工作正常,使用单独的页面和灯箱设置来更新信息,但我想将更新屏幕集成到主页面并使用ajax进行更新发布,因此对用户来说,页面的其余部分仍然是可见。

目前我的表格有以下内容:

<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>

现在我的问题。经过大量的搜索后,我发现了一段似乎有用的代码,但它只能用于一个参数。正如你所看到的,我需要一次性发布14个,所以这并不好。我尝试了许多组合试图让它工作,但无济于事。 代码是:

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

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

我真正需要知道的是我如何调整上面的代码以允许我发布额外的13个输入框。任何帮助将不胜感激,如果您需要我澄清任何问题,请询问。

提前致谢

艾伦

1 个答案:

答案 0 :(得分:0)

Prototype擅长这些类型的操作。有关参考,请参阅Ajax.UpdaterForm.serialize

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