Question

我希望能够为客户输入多个地址，但只在初始客户表单中显示一个地址。当他们按下“添加另一个地址”按钮时，将添加其他人。 “添加另一个地址”按钮只允许我添加一个额外的地址，但我需要多个地址。

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

使用jQuery将额外的表单部分添加到HTML表单

0 个答案: