mardi 3 novembre 2020

Alert Radio & Checkbox values selected

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