johnniegee 0 Newbie Poster

I want to be able to enter multiple addresses for customers but only show one on the initial customer form, with the others being added when they press a 'add another address' button. I can get this to work by putting the 'add another address' button at the bottom of the page but I want to put it just after the address fields, i.e. in the middle of the form. And this only lets me add one extra address and I need more.

In a nutshell, I want the <div id=formdiv> integrated into the <div id=details> and I'm not sure how to do it.

Sorry about the length of the code but I thought I have better include everything as I'm only learning!!

<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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.