使用jQuery向HTML表单添加额外的表单节
我希望能够为客户输入多个地址，但在初始客户表单上仅显示一个地址。其他地址将在按下“添加其他地址”按钮时添加。“添加其他地址”按钮只允许我添加一个额外地址，但我需要多个地址使用jQuery向HTML表单添加额外的表单节,jquery,html,forms,Jquery,Html,Forms,我希望能够为客户输入多个地址，但在初始客户表单上仅显示一个地址。其他地址将在按下“添加其他地址”按钮时添加。“添加其他地址”按钮只允许我添加一个额外地址，但我需要多个地址 <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$("#addressDiv").hide();
$("#formDiv").hide();
})
$("#addBtn").click(function(){
$("#formDiv").show();
})
$("#addAddr").click(function(){
var data = ""
data = "Address: " + $("#addr1").val();
data += $("#addr2").val();
data += "\n"
$("#innerdiv").append(data);
$("#formDiv").hide(1000);
alert(data + "added successfully");
if(encodeURIComponent) {
var req = new AjaxRequest();
var params = "msg=" + encodeURIComponent(msg) + '&url=' + encodeURIComponent(url) + "&line=" + line;
req.setMethod("POST");
return req.loadXMLDoc("/scripts/logerror.php", params);
}
return false;
})
});
</script>
</head>
<body>
<div id="addressDiv">
<div id="innerdiv">
</div>
</div>
<div id="details">
<form id="custData" name="custData" method="post" onsubmit="return validate_form(this)" action="includes/show.php">
<table border="0" cellpadding="4" cellspacing="4">
<tr>
<td width="194"><label for="Customer_ID">Customer Number</label>:</td>
<td width="600"><input name="Customer_ID" type="text" id="Customer_ID" size="11" maxlength="11" /></td>
</tr>
<tr>
<td><label for="Site">Site</label>:</td>
<td><input name="Site" type="text" id="Site" value="Poole" size="20" maxlength="20" /></td>
</tr>
<tr>
<td><label for="Title">Title</label>:</td>
<td><input name="Title" type="text" id="Title" size="6" maxlength="6" /></td>
</tr>
<tr>
<td><label for="First_Name">First Name</label>:</td>
<td><input name="First_Name" type="text" id="First_Name" size="25" maxlength="25" /></td>
</tr>
<tr>
<td><label for="Last_Name">Last Name</label>:</td>
<td><input name="Last_Name" type="text" id="Last_Name" size="25" maxlength="25" /></td>
</tr>
<tr>
<td><label for="Full_Name">Full Name</label>:</td>
<td><input name="Full_Name" type="text" id="Full_Name" size="60" maxlength="60" /></td>
</tr>
<tr>
<td><label for="Address1">Address</label>:</td>
<td><input name="Address1" type="text" id="Address1" size="100" maxlength="100" /></td>
</tr>
<tr>
<td><label for="Address2"></label></td>
<td><input name="Address2" type="text" id="Address2" size="100" maxlength="100" /></td>
</tr>
<tr>
<td><label for="Address3"></label></td>
<td><input name="Address3" type="text" id="Address3" size="100" maxlength="100" /></td>
</tr>
<tr>
<td><label for="Town">Town</label>:</td>
<td><input name="Town" type="text" id="Town" size="100" maxlength="100" /></td>
</tr>
<tr>
<td><label for="County">County</label>:</td>
<td><input name="County" type="text" id="County" size="100" maxlength="100" /></td>
</tr>
<tr>
<td><label for="Country">Country</label>:</td>
<td><input name="Country" type="text" id="Country" size="100" maxlength="100" /></td>
</tr>
<tr>
<td><label for="PostCode">Postcode</label>:</td>
<td><input name="PostCode" type="text" id="PostCode" size="11" maxlength="11" /></td>
</tr>
<tr>
<td><label for="Email_address">Email address</label>:</td>
<td><input name="Email_address" type="text" id="Email_address" size="100" maxlength="150" /></td>
</tr>
<tr>
<td><label for="WorkNumber">Work phone</label>:</td>
<td><input name="WorkNumber" type="text" id="WorkNumber" size="25" maxlength="25" /></td>
</tr>
<tr>
<td><label for="HomeNumber">Home phone</label>:</td>
<td><input name="HomeNumber" type="text" id="HomeNumber" size="25" maxlength="25" /></td>
</tr>
<tr>
<td><label for="MobileNumber">Mobile</label>:</td>
<td><input name="MobileNumber" type="text" id="MobileNumber" size="25" maxlength="25" /></td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" name="cbtn" id="cbtn" value="save customer details" />
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="button" value="add alternate address" id="addBtn">
</td>
</tr>
</table>
<div id="formDiv" >
<table>
<tr>
<td width="194"><label for="Address1">Address</label>:</td>
<td width="600"><input name="Address1" type="text" id="Address1" size="100" maxlength="100" /></td>
</tr>
<tr>
<td><label for="Address2"></label></td>
<td><input name="Address2" type="text" id="Address2" size="100" maxlength="100" /></td>
</tr>
<tr>
<td><label for="Address3"></label></td>
<td><input name="Address3" type="text" id="Address3" size="100" maxlength="100" /></td>
</tr>
<tr>
<td><label for="Town">Town</label>:</td>
<td><input name="Town" type="text" id="Town" size="100" maxlength="100" /></td>
</tr>
<tr>
<td><label for="County">County</label>:</td>
<td><input name="County" type="text" id="County" size="100" maxlength="100" /></td>
</tr>
<tr>
<td><label for="Country">Country</label>:</td>
<td><input name="Country" type="text" id="Country" size="100" maxlength="100" /></td>
</tr>
<tr>
<td><label for="PostCode">Postcode</label>:</td>
<td><input name="PostCode" type="text" id="PostCode" size="11" maxlength="11" /></td>
</tr>
</table>
<input type="button" value="Add" id="addAddr"name="xAddr" />
</div>
</form>
</div>
</body>
</html>
$（文档）.ready（函数（）{
$（函数（）{
$（“#addressDiv”）.hide（）；
$（“#formDiv”）.hide（）；
})
$（“#addBtn”）。单击（函数（）{
$（“#formDiv”）.show（）；
})
$（“#addr”）。单击（函数（）{
var data=“”
data=“Address:”+$（“#addr1”）.val（）；
数据+=$（“#addr2”）.val（）；
数据+=“\n”
$（“#innerdiv”）.append（数据）；
$（#formDiv”）.hide（1000）；
警报（数据+“添加成功”）；
if（编码组件）{
var req=新的AjaxRequest（）；
var params=“msg=“+encodeURIComponent（msg）+”和url=”+encodeURIComponent（url）+”和line=“+line；
请求设置方法（“POST”）；
返回req.loadXMLDoc（“/scripts/logerror.php”，params）；
}
返回false；
})
});
客户编号：
地点：
标题：
名字：
姓氏：
全名：
地址:
城镇：
县：
国家：
邮政编码：
电邮地址：
工作电话：
家庭电话：
流动电话：
地址:
城镇：
县：
国家：
邮政编码：