Hi
I paid someone to create a form for me and it was a total mess and they are refusing to sort it. I have aligned it the best I can but it isn't perfect, when you click on number in party and select 10-12 the last the 3 imput boxes are misaligned.
Also the Party leader field is as misaligned.
Please can someone help me, I need to get this sorted asap.
Here is the form link
http://www.lm-lakeland-design.co.uk/Villa/Form.html
This is the code in the header
- HTML: Select all
<script type="text/javascript">
var listNames = ["arrival_day","departure_day","birth_day[]","arrival_month","departure_month","birth_month[]","number_in_party"];
var listOpts = ["31","31","31","12","12","12","12"]; // the last integer is the maximum number of guests;
var prevGuests = 1;
var lastGuest =1;
function updateGuests(nGuests){
if (nGuests == 0)
{
return;
}
var desiredGuests = nGuests-prevGuests;
if (desiredGuests > 0)
{
for (i=0; i<desiredGuests; i++)
{
var nFields = document.forms[0].getElementsByTagName('fieldset')[0];
var nClone = document.forms[0].getElementsByTagName('div')[1].cloneNode(true);
var nFloor = document.getElementById('submit');
nFields.insertBefore(nClone,nFloor);
if (lastGuest < 9)
{
nClone.firstChild.nodeValue = nClone.firstChild.nodeValue.replace(/\d{1,}/,Number(lastGuest + 1));
var nGuest = document.getElementsByName('guest_name[]');
nGuest[nGuest.length-1].value = "";
}
else {
nClone.firstChild.data = nClone.firstChild.data.substring(0,10).replace(/\d{1,}/,Number(lastGuest + 1));
var nGuest = document.getElementsByName('guest_name[]');
nGuest[nGuest.length-1].value = "";
}
lastGuest = Number(nClone.firstChild.data.match(/\d{1,}/)[0]);
}
}
else {
desiredGuests = Math.abs(desiredGuests);
for (i=0; i<desiredGuests; i++)
{
var nFields = document.forms[0].getElementsByTagName('fieldset')[0];
nFields.removeChild(nFields.lastChild.previousSibling.previousSibling);
lastGuest--;
}
}
prevGuests = nGuests;
document.body.focus();
}
function fillSelect(nList){
for (n=0; n<listOpts[i]; n++)
{
var nOption = document.createElement('option');
if (n < 9 && nList != "number_in_party")
{
var nData = document.createTextNode("0"+(n+1));
nOption.setAttribute("value","0"+(n+1));
}
else {
var nData = document.createTextNode(n+1);
nOption.setAttribute("value",n+1);
}
nOption.appendChild(nData);
document.forms[0][nList].appendChild(nOption);
}
}
function init(){
for (i=0; i<listNames.length; i++)
{
fillSelect(listNames[i])
}
for (i=2007; i>1906; i--)
{
var nOption = document.createElement('option');
var nData = document.createTextNode(i);
nOption.setAttribute('value',i);
nOption.appendChild(nData);
document.forms[0]['birth_year[]'].appendChild(nOption);
}
}
onload=init;
</script>
<style type="text/css">
form {width: 420px; font-family: Arial; font-size: 12pt;}
fieldset {width: 420px; background-color: #F6EABC; border: 1px solid #E6B280; padding-left: 8px; padding-bottom: 8px;}
legend {font-family: Arial; font-size: 14pt; color: #000000; background-color: transparent; padding-left: 8px; padding-right: 8px; padding-top: 3px; margin-bottom: 5px;}
select {font-family: Arial; font-size: 10pt; margin-top: 3px; margin-bottom: 3px; margin-right: 3px; width: 53px; vertical-align:middle}
.input_field {font-family: Arial; font-size: 10pt; padding-left: 2px; padding-top: 1px; padding-bottom: 1px; margin-top: 3px; margin-bottom: 3px;}
.input_textarea {font-family: Arial; font-size: 10pt; width: 218px; height: 65px; padding: 2px; margin-top: 3px; margin-bottom: 3px; overflow: hidden;}
.submitBtn {font-family: Arial; font-size: 10pt; font-weight: bold; cursor: pointer; padding-top: 2px; padding-bottom: 2px; margin: 15px 0 5px; background-color: #ffffff; border: solid 1px #000000;}
.label_1 {position: relative; top: -0px;margin-right: 23px; }
.label_2 {position: relative; top: -40px; margin-right: 109px;}
.label_3 {position: relative; top: +3px;margin-right:93px;}
.label_4 {position: relative; top: +3px;margin-right: 49px;}
.label_5 {position: relative; top: +3px;margin-right: 121px;}
.label_6 {position: relative; top: +3px;margin-right: 128px;}
.label_7 {position: relative; top: +5px;margin-right: 86px;}
.label_8 {position: relative; top: +5px;margin-right: 60px;}
.label_9 {position: relative; top: +6px;margin-right: 56px;}
.label_10 {position: relative; top: +3px;margin-left: 25px; margin-top: 9px;}
.label_11 {margin-right: 5px; margin-top: 5px;}
label {vertical-align: 25%}
#submit {margin-left:180px;}
</style>
Anh the form HTML
<form method="post" action="mailto:">
<fieldset>
<legend>Reservation/Enquiry Form</legend>
<label class="label_1">Party / Group Leader:</label>
<input type="text" name="group_leader" size="30" class="input_field">
<br>
<label class="label_2">Address:</label>
<textarea name="postal_address" class="input_textarea"></textarea>
<br>
<label class="label_3">Post Code:</label>
<input type="text" name="postal_code" size="30" class="input_field">
<br>
<label class="label_4">Home Telephone:</label>
<input type="text" name="home_phone" size="30" class="input_field">
<br>
<label class="label_5">Mobile:</label>
<input type="text" name="mobile_phone" size="30" class="input_field">
<br>
<label class="label_6">Email:</label>
<input type="text" name="email_address" size="30" class="input_field">
<br>
<label class="label_7">Arrival Date:</label>
<select name="arrival_day">
<option value="">dd</option>
</select>
<select name="arrival_month">
<option value="">mm</option>
</select>
<select name="arrival_year">
<option value="">yyyy</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
</select>
<br>
<label class="label_8">Departure Date:</label>
<select name="departure_day">
<option value="">dd</option>
</select>
<select name="departure_month">
<option value="">mm</option>
</select>
<select name="departure_year">
<option value="">yyyy</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
</select>
<br>
<label class="label_9">Number in Party:</label>
<select name="number_in_party" onchange="updateGuests(this.value)">
<option value="0">?</option>
</select>
<div class="label_10">Guest Details - Name & Date of Birth:</div>
<div class="label_11" id="guest_info">Guest1:
<input type="text" name="guest_name[]" size="19" class="input_field" style="vertical-align:middle">
<select name="birth_day[]">
<option value="">dd</option>
</select>
<select name="birth_month[]">
<option value="">mm</option>
</select>
<select name="birth_year[]">
<option value="">yyyy</option>
</select>
</div>
<input type="submit" name="submit" id="submit" value="Submit" class="submitBtn">
</fieldset>
</form>
</DIV>
</div>
</td>
</tr>
</table>
</BODY>
</HTML>
Thanks Loads to anyone who can help me
Marie