mardi 23 juin 2015

Print selected checkbox values in window.alert

I have a form that I am trying to print all the values to an alert box. I have figured it all out except how to print the value of multiple checkboxes if checked here is the code. I am just trying to print in the window.alert if one of more of the checkboxes are checked.

html

<form action = "">

        <p>
            <label> Name:         
                <input type = "text" id="name" name= "name"
                        size "30" /> </label>
        <br/>

            <label> Street Address
                <input type = "text" id="street" name= "street"
                        size "30" /> </label>
        <br/>

            <label> City, State, Zip
                <input type = "text" id="city" name= "city"
                        size "30" /> </label>
        </p>

        <p>

        <h2> Main Dish </h2>
            <select id= "mainDish" >
                <option id="steak"> steak </option>
                <option id="chicken"> chicken </option>
                <option id="shrimp"> shrimp </option>
                <option id="fish"> fish </option>
            </select>

        </p>
        <p>
            Side Dishes:
        </p>
        <p>
            <label>
            <input type = "checkbox" id="fries" " value = "Fries" checked = "checked"/>Fries</label>
            <label>
            <input type = "checkbox" id="salad" value = "salad" />Salad</label>
            <label>
            <input type = "checkbox" id="coleslaw" value = "coleslaw" />Coleslaw</label>            
        </p>
        <p>
            Drink:
        </p>
        <p>
            <label>
            <input type = "radio" name = "drink" id="r1" value = "yes" checked = "checked"/>Yes</label>
            <label>
            <label>
            <input type = "radio" name = "drink" id="r2" value = "no" />no</label>
            <label>
            <label>
            <input type = "radio" name = "drink" id="r3" value = "water" />Water</label>
            <label>
        </p>

        <p>
            Comments:
        </p>
        <p>
            <textarea Name = "comments" id="comments" rows = "4" cols = "40">
            (enter Comments here)
            </textarea>
        </p>

            Username: <input type="text" name="user"/>
        <br>
            Password: <input type="password" name="password" size= "10" maxlength = "10" />

        <p>
            <input type = "Submit" value = "Submit Form" />
            <input type = "reset" value = "Reset Form" />
        </p>

        <button onclick="LerL_display()">Try it</button>


    </form>
    <script type="text/javascript" src="LerL_FormID.js" ></script>
    </body>

javascript

function LerL_display() {

var name = document.getElementById("name").value; 
var street = document.getElementById("street").value; 
var city = document.getElementById("city").value;

var mainDish = document.getElementById("mainDish");
var selectedText = mainDish.options[mainDish.selectedIndex].text;

if (document.getElementById('r1').checked) 
{
    var drink_value = document.getElementById('r1').value;
}
else if (document.getElementById('r2').checked)
{
    var drink_value = document.getElementById('r2').value;
}
else if (document.getElementById('r3').checked)
{
    var drink_value = document.getElementById('r3').value;
}

    window.alert(name + "\n" + street + "\n" + city + "\n" + selectedText + "\n" + drink_value);
}
    }




Aucun commentaire:

Enregistrer un commentaire