[skadouche]

I'm trying to output the value of the checkbox...if it's checked output the value, if it's not checked don't output the value. if two are selected output both values seperated by commas but removing the last comma. if all three checkboxes are selected output the 3 values and remove the trailing comma. if none are selected don't output anything


html
[

<div class="fieldContainer">
 <label>Previous Courses:</label>
<div id="courses">
 <input type="checkbox" id="asp" value="ASP,">ASP.NET</input><br />
<input type="checkbox" id="java" value="AdvancedJava,">Advanced Java</input><br />
 <input type="checkbox" id="php" value="PHP,">PHP</input>
 </div>
</div>

javascript

]

This post has been edited by Dormilich: 10 February 2013 - 11:17 PM
Reason for edit:: please use [code] [/code] tags when posting code

[maniacalsounds]

Are you having a problem? Is it a problem with your Javascript? Please post the code so we can help you.

[andrewsw]

Wrap your code in code tags - it tells you how to do this directly in the area where you are typing your post.

INPUTs are void elements and don't require closing tags.

Labels should be associated with form elements.

But, these points aside, where is your code? What do you mean by "output the value"..?

[skadouche]

function validateAll() {
    validateName();
    validateEmail();
    validatePhone();
    validateAddress();
    validateCity();
    validateZip();
    outputUserInfo();
    
}
function validateName() {
      if(document.getElementById("txtName").value.length == 0) {
        if(!document.getElementById("nameErrorMessage")) {
        var errorMessage = document.createElement("span");
        errorMessage.id ="nameErrorMessage";
        errorMessage.appendChild(document.createTextNode("Name is required!"))
        document.getElementById("nameSection").appendChild(errorMessage);
        }
    } else {
        var nameError = document.getElementById("nameErrorMessage");
        if(nameError) {
            nameError.parentNode.removeChild(nameError);
        }
    } 
}

function validateEmail() {

    if(document.getElementById("txtEmail").value.length == 0) {
        if(!document.getElementById("emailErrorMessage")) {
        var errorMessage = document.createElement("span");
        errorMessage.id ="emailErrorMessage";
        errorMessage.appendChild(document.createTextNode("Email is required!"))
        document.getElementById("emailSection").appendChild(errorMessage);
        }
    } else {
        var nameError = document.getElementById("emailErrorMessage");
        if(nameError) {
            nameError.parentNode.removeChild(nameError);
        }
    }
}
function validatePhone() {

    if(document.getElementById("txtPhone").value.length == 0) {
        if(!document.getElementById("phoneErrorMessage")) {
        var errorMessage = document.createElement("span");
        errorMessage.id ="phoneErrorMessage";
        errorMessage.appendChild(document.createTextNode("Phone is required!"))
        document.getElementById("phoneSection").appendChild(errorMessage);
        }
    } else {
        var nameError = document.getElementById("phoneErrorMessage");
        if(nameError) {
            nameError.parentNode.removeChild(nameError);
        }
    }
}
function validateAddress() {

    if(document.getElementById("txtAddress").value.length == 0) {
        if(!document.getElementById("addressErrorMessage")) {
        var errorMessage = document.createElement("span");
        errorMessage.id ="addressErrorMessage";
        errorMessage.appendChild(document.createTextNode("Address is required!"))
        document.getElementById("addressSection").appendChild(errorMessage);
        }
    } else {
        var nameError = document.getElementById("addressErrorMessage");
        if(nameError) {
            nameError.parentNode.removeChild(nameError);
        }
    }
}
function validateCity() {

    if(document.getElementById("txtCity").value.length == 0) {
        if(!document.getElementById("cityErrorMessage")) {
        var errorMessage = document.createElement("span");
        errorMessage.id ="cityErrorMessage";
        errorMessage.appendChild(document.createTextNode("City is required!"))
        document.getElementById("citySection").appendChild(errorMessage);
        }
    } else {
        var nameError = document.getElementById("cityErrorMessage");
        if(nameError) {
            nameError.parentNode.removeChild(nameError);
        }
    }
}
function validateZip() {

    if(document.getElementById("txtZip").value.length == 0) {
        if(!document.getElementById("zipErrorMessage")) {
        var errorMessage = document.createElement("span");
        errorMessage.id ="zipErrorMessage";
        errorMessage.appendChild(document.createTextNode("Zip is required!"))
        document.getElementById("zipSection").appendChild(errorMessage);
        }
    } else {
        var nameError = document.getElementById("zipErrorMessage");
        if(nameError) {
            nameError.parentNode.removeChild(nameError);
        }
    }
}
function outputUserInfo() {
    var display = document.getElementById("output");
     if(display) {
        //remove the existing output
        display.parentNode.removeChild(display);
    }
   
    var outputHolder = document.createElement("div");
    outputHolder.id = "output";
    
    var nameText = document.getElementById("txtName").value;
    outputHolder.appendChild(document.createTextNode("Name: " + nameText));
    
    outputHolder.appendChild(document.createElement("br"));
   
    var emailText = document.getElementById("txtEmail").value;
    outputHolder.appendChild(document.createTextNode("Email: " + emailText));
    
    outputHolder.appendChild(document.createElement("br"));
    
    var phoneText = document.getElementById("txtPhone").value;
    outputHolder.appendChild(document.createTextNode("Phone: " + phoneText));
    
    outputHolder.appendChild(document.createElement("br"));
    
    var addressText = document.getElementById("txtAddress").value;
    outputHolder.appendChild(document.createTextNode("Address: " + addressText));
    
    outputHolder.appendChild(document.createElement("br"));
    
    var cityText = document.getElementById("txtCity").value;
    outputHolder.appendChild(document.createTextNode("City: " + cityText));
    
    outputHolder.appendChild(document.createElement("br"));
    
    var stateList = document.getElementById("state");
    var stateText = stateList.options[stateList.selectedIndex].text;
    outputHolder.appendChild(document.createTextNode("State: " + stateText));
    
    outputHolder.appendChild(document.createElement("br"));
    
    var zipText = document.getElementById("txtZip").value;
    outputHolder.appendChild(document.createTextNode("Zip: " + zipText));
    
    outputHolder.appendChild(document.createElement("br"));
    
    var genderText = document.getElementById("male").checked;
    
    if(genderText){
        var genderText = document.getElementById("male").value;
        outputHolder.appendChild(document.createTextNode("Gender: " + genderText));
        outputHolder.appendChild(document.createElement("br"));
    } else {
        var genderText = document.getElementById("female").value;
        outputHolder.appendChild(document.createTextNode("Gender: " + genderText));
        outputHolder.appendChild(document.createElement("br"));
    }
    
    var ckBoxes = document.getElementById("asp").checked;
    
    if(ckBoxes) {
        var ckBoxes = document.getElementById("asp").value;
        outputHolder.appendChild(document.createTextNode("Previous Courses: " + ckBoxes));
    } else {
        var ckBoxes = document.getElementById("java").value;
        outputHolder.appendChild(document.createTextNode("Previous Courses: " + ckBoxes));
    } 

   
    document.body.appendChild(outputHolder);
    
}

what i posted first was the html that is involved, then the javascript I haven't really written cause i don't know how to get the output...please help

If one checkbox is selected output the value and remove the comma at the end
if two checkboxes are selected output the values and remove the comma at the end
if all three are selected output the values and remove the comma at the end

all of this happening when the validate button is clicked

<html>
    <head>
        <script type="text/javascript" src="validate.js"></script>
        <link type="text/css" rel="stylesheet" href="Project1CSS.css" />
    </head>
    <body>
        <form id="labelDesign">
            <div id="nameSection">
                <label for="name">Name:</label>
                <input type="text" id="txtName" />
            </div>
            <div id="emailSection">
                <label for="email">Email:</label>
                <input type="text" id="txtEmail" />
            </div>
            <div id="phoneSection">
                <label for="phone">Phone:</label>
                <input type="text" id="txtPhone" />
            </div>
            <div id="addressSection">
                <label for="address">Address:</label>
                <input type="text" id="txtAddress" />
            </div>
            <div id="citySection">
                <label for="city">City:</label>
                <input type="text" id="txtCity" />
            </div>
            <div>
                <label for="state">State:</label>
                    <select id="state">
                        <option value="Wisconsin">Wisconsin</option>
                        <option value="Minnesota">Minnesota</option>
                        <option value="Ohio">Ohio</option>
                        <option value="Nevada">Nevada</option>
                        <option value="Florida">Florida</option>
                    </select>
            </div>
            
            <div id="zipSection">
                <label for="zip">Zip:</label>
                <input type="text" id="txtZip" />
            </div>
            
            <div>
                <label for="radio">Gender:</label>
                <input type="radio" name="genders" id="male" value="Male" checked="checked">Male</input>
                <input type="radio" name="genders" id="female" value="Female">Female</input>
            </div>
            
            <div class="fieldContainer">
                <label>Previous Courses:</label>
                <div id="courses">
                    <input type="checkbox" id="asp" value="ASP,">ASP.NET</input><br />
                    <input type="checkbox" id="java" value="AdvancedJava,">Advanced Java</input><br />
                    <input type="checkbox" id="php" value="PHP,">PHP</input>
                </div>
            </div>
            <br />
            <input type="button" id="btnValidate" onclick="validateAll();" value="validate" />
        </form>
    </body>
</html>

here is all the html