I'm trying to display the selected values of the Checkbox and Radio buttons in an alert window. I'm returning with undefined. If i change the value to just radios and checkboxes the alert box returns HTML Object Collection. I've tried checkboxes[i].value and that did not work either.
HTML
<form action="" name="contact" method="post" onsubmit="return validate()">
<fieldset>
<legend>Personal Information</legend>
<label>Name*:</label>
<input type="text" name="name" id="name" />
<div class="error" id="nameError"></div>
<label>Mobile*:</label>
<input type="mobile" name="mobile" id="mobile" />
<div class="error" id="mobileError"></div>
<label>Email*:</label>
<input type="email" name="email" id="email" />
<div class="error" id="emailError"></div>
<p>* = Required Fields</p>
<br>
<legend>Do you want to Buy or Sell or Rent?</legend>
<div>
<label>Buy: <input type="radio" name="radio" value="Buy" /></label>
<label>Sell: <input type="radio" name="radio" value="Sell" /></label>
<label> Rent: <input type="radio" name="radio" value="Rent" /></label>
</div>
<div class="error" id="radioError"></div>
<br>
<legend>What property type/s are you interested in?</legend>
<div>
<label> Unit: <input type="checkbox" name="checkbox" value="Unit" /></label>
<label> Townhouse: <input type="checkbox" name="checkbox" value="Townhouse" /></label>
<label> House: <input type="checkbox" name="checkbox" value="House" /></label>
</div>
<div class="error" id="checkboxError"></div>
<br>
<legend>How many bedrooms do you require?</legend>
<input type="text" id="bedroom" name="bedroom"/>
<div class="error" id="bedroomError"></div>
<legend>Comments</legend>
<textarea id="comment" select="vertical" col="15" rows="5"></textarea>
</fieldset>
<input type="submit" value="Submit Enquiry">
</form>
JAVASCRIPT
function err(ID, Message) {
document.getElementById(ID).innerHTML = Message;
}
function validate() {
var name = document.contact.name.value;
var email = document.contact.email.value;
var mobile = document.contact.mobile.value;
var bedroom = document.contact.bedroom.value;
var comments = document.contact.comment.value;
var radios = document.getElementsByTagName("radio");
var checkedRadio = [];
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked)
checkedRadio.push(radios[i].value);
break;
}
var checkboxes = document.getElementsByTagName("checkbox");
var checkedboxes = [];
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked)
checkedboxes.push(checkboxes[i].value);
break;
}
var error = nameError = emailError = mobileError = bedroomError = checkboxError = radioError = true;
if(!radios.checked) {
err("radioError", "This Field is Required")
} else {
err("radioError", "");
radioError = false;
}
if (!checkboxes.checked) {
err("checkboxError", "This field is required")
} else {
err("checkboxError", "");
checkboxError = false;
}
if(name == "") {
err("nameError", "This Field is Required");
} else {
err("nameError", "");
nameError = false;
}
if(email == "") {
err("emailError", "This Field is Required");
} else {
err("emailError", "");
emailError = false;
}
if(mobile == "") {
err("mobileError", "This Field is Required");
} else {
err("mobileError", "");
mobileError = false;
}
if(bedroom == "") {
err("bedroomError", "This Field is Required");
} else {
err("bedroomError", "");
bedroomError = false;
}
if((nameError || emailError || mobileError || bedroomError ) == true) {
return false;
} else {
var preview = "Name: " + name + "\n"
+ "Email: " + email + "\n"
+ "Mobile: " + mobile + "\n"
+ "Bedroom: " + bedroom + "\n"
+ "House Type: " + checkboxes.value + "\n"
+ "Buy/Sell/Rent: " + radios.value + "\n"
+ "Comments: " + comments + "\n";
confirm(preview);
}
};
Thank you!
Aucun commentaire:
Enregistrer un commentaire