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>