Проверка флажков в JavaScript

0

Привет, я новичок в Javascript и не знаю, как проверить мои флажки. Я просмотрел множество примеров, но до сих пор не понимаю, что кто-то может сказать мне, как проверить его, а также мое выпадающее меню inst проверяет вообще любые помощь заранее будет оценена.

My Java Script and HTML

function validateForm(){

    var fname, lname, sex, address, email, length, songs, a, i, check, error;

    a=0;
    check=false;
    error=false;

    fname=document.getElementById("firstname").value;
    lname=document.getElementById("lastname").value;

    sex=document.getElementsByName("sex");

    address=document.getElementById("address").value;
    email=document.getElementById("email").value;
    length=document.getElementById("len").value;

//  songs=document.getElementByName("f_song");

    if(fname=="" || fname==null){

        alert("please input a first name");
        error=true;
        return false;
    }

    if(lname=="" || lname==null){

        alert("please input your last name");
        error=true;
        return false;
    }

    for(i=0; i<sex.length; i++){

        if(sex.item(i).checked==false){

                a++;
        }
    }

    if(a==sex.length){

            alert("Please select Male or Female");
            error=true;
            return false;

    }

    if(address=="" || address==null){

        alert("Please input your address thanks");
        error=true;
        return false;


    }

    if(email=="" || email==null){

        alert("Please enter a email address");
        error=true;
        return false;
    }

    if(length=="" || length==null){

        alert("Be select how long have you been a fan");
        error=true;
        return false;
    }






    alert("Am working ");

}


MY HTML


<head>
<title>] </title>
<link rel="stylesheet" type="Text/css" href="wit_frm.css"/>

<script type="text/javascript" src="java.js">

    </script>
</head>

<body>

    <div id="container">

        <div id="header">

        </div>

        <div id="topnav">

            <div id="link">
                <a href="wit.html">Home</a>
                <a href="http://www.whitneyhouston.com">Fan Site</a>
                <a href="wit_form.html">Register</a>
            </div>

        </div>



        <div id="contentarea">

            <form method="post" action="" onsubmit= "return validateForm();">

            <fieldset>
            <legend>Personal Information</legend>

            First Name:<input type="text" name="fname" id="firstname"/>
            <br/>
            <br/> Last Name:<input type="text" name="lname" id="lastname"/>
            <br/>
            <br/> Sex:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <input type="radio" name="sex" id="m"/>Male  <input type="radio" name="sex" id="f"/>Female
            <br/>
            <br/>Address:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<textarea id="address" name="add" rows="4" cols="30"></textarea>

            </fieldset>

            <fieldset>
            <legend> User Information</legend>
            <br/>Email: &nbsp;  &nbsp; &nbsp;  &nbsp;  &nbsp; <input type="text" name="e_address" id="email"/>
            <br/>
            <br/>No of years listening  to her music: <select name="n_years" id="len">
                                                <option value="less than a yr"> less than 1yr</option>
                                                <option value="2-5 years">2-5 years</option>
                                                <option value="5+ years">5+ years</option>
                                                </select>
            <br/>                                   
            <br/>Favorite Songs:I will always love you<input type="checkbox" name="f_song" value="I will always love you"/> I look to you<input type="checkbox" name="f_song" value="I look to you"/></p>  
                            <br/> &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp; &nbsp;  &nbsp;  &nbsp;  &nbsp;  I have nothing<input type="checkbox" name="f_song" value="I have nothing"/> One moment in time<input type="checkbox" name="f_song" value="one moment in time"/></p>
                            <br/>&nbsp;  &nbsp;  &nbsp;  &nbsp; &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp; I wanna dance with somebody<input type="checkbox" name="f_song" value="I wanna dance with somebody"/> Greatest Love of All<input type="checkbox" name="f_song" value="Greatest love of all"/></p>

            </fieldset>
            <br/><input type="submit" name="sub_button" value="SUBMIT"/> &nbsp;  &nbsp;  &nbsp; <input type="reset" name="res_button" value="CLEAR"/>

            </form>



        </div>

        <div id="footerfix">

        </div>

        <div id="footer">
             <div id="link_1">
                <a href="wit.html">Home</a>
                <a href="">Fan Site</a>
                <a href="">About Her</a>
            </div>
        </div>

    </div>




</body>
</html>
  • 0
    Ух ты, посмотри на все эти повторения по всему коду. А также вы можете удалить это объявление XML.
Теги:
validation

3 ответа

1
Лучший ответ

Я бы сделал это так:

Пример бина

var f_song = document.getElementsByName("f_song");
var oneSongSelected = 0;
//Loop through the checkbox elements, and tally the selected
for(var ss = 0; ss < f_song.length; ss++){
  if(f_song[ss].checked){
    oneSongSelected++;
  }
}
//If none are selected, then alert your error, and return false
if(oneSongSelected === 0){
  alert("Please select at least one song");
  return false;
}
Поделиться
0

Вы можете использовать jquery, но вы можете сделать что-то вроде этого:

В вашем html-коде вы можете использовать первый раскрывающийся список "Выбрать" и значение "-1":

<select id="dropDown">
    <option value="-1">Select</option>
</select>

CheckBox:

<input type="checkbox" name="checkbox" id="checkbox"  />

Вызов JavaScript:

var aValue;
aValue = document.getElementById("dropDown").value;

if(aValue == "-1"){
    return false;
}

CheckBox JavaScript:

var checkbox = document.getElementById('checkbox');

if(!checkbox.checked){
    return false;
}
Поделиться
0

поскольку вы новичок в JavaScript, я рекомендую вам изучить jQuery, это проще и проще JavaScript. Если у вас есть флажки, и вы хотите их проверить, вы можете попробовать следующее:

$('#checkbox').click(function(){
    if (this.checked) {

    }
});

Объяснение кода

$('#checkbox').click(function() => эта строка говорит "когда элемент с id #checkbox, сделайте материал внутри этой функции". Вам нужно будет заменить #checkbox идентификатором вашего checkbox (пример: #yourCheck) или его класс (пример: .yourClass).

if (this.checked) => this if statement проверяет, проверен ли элемент или нет. Вы должны указать свой код, если флажок установлен внутри скобок.

EDIT: Вот пример JSFiddle, который я сделал.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню