i set javascript validate required form fields. if form field missing pop-up come on users screen. have been able figure of out problem check-box. if user not click check-box error message. way have code written, if user checks "monday" form processed, if check other days except monday still error message, thoughts?
function checked() { var username = document.getelementbyid("text").value; var userphone = document.getelementbyid("phone").value; var checkboxcheck = document.getelementbyid("checkers").checked; var otherone = document.getelementbyid("dropdown").value; var addinfo = document.getelementbyid("textarea").value; if (username == "" || userphone == "" || checkboxcheck == "") { alert("please fill in: name, phone number, days of week."); if (otherone == "other") { if (addinfo == "") { alert("please fill in additional information."); } } return false; } else { return true; } }<body> <div class="container-fluid"> <div class="page-header"> <table border="1" width="100%" frame="below"> <thead> <h1 style="color:purple" align="center"><span>c</span>afe 80's</h1> </thead> </table> </div> <table border="0" width="20%" cellspacing="20"> <ul class="list-inline nav nav-tabs"> <li><a href="lab-9csshomepagev6.html"><span class="glyphicon glyphicon-home"></span></a> </li> <li><a href="lab-9cssmenupagev6.html">menu</a> </li> <li class="active"><a href="lab-9csscontactpagev6.html">contact us</a> </li> </ul> </table> </div> <div class="container" style="height: 700px; position: relative; top: 60px"> <form onsubmit="return checked()" action="lab-9csscontactpagev6.html" method="post"> <div class="form-group"> <label for="text">name:</label> <input type="text" class="form-control" id="text"> </div> <div class="form-group"> <label for="email">email address:</label> <input type="email" class="form-control" id="email"> </div> <div class="form-group"> <label for="phone">phone number:</label> <input type="phone" class="form-control" id="phone"> </div> <div class="form-group"> <label for="dropdown">reason inquiry:</label> <select class="form-control" id="dropdown"> <option>catering</option> <option>private party</option> <option>feedback</option> <option id="oother">other</option> </select> </div> <div class="form-group"> <label for="textarea">addition imformation:</label> <textarea class="form-control" rows="5" id="textarea"></textarea> </div> <div class="form-group" style="position:relative; right: 40px"> <div class="radio-inline"> <label class="radio-inline">have been restaurant?</label> <label class="radio-inline"> <input type="radio" name="rad" checked>no</label> <label class="radio-inline"> <input type="radio" name="rad">yes</label> </div> </div> <div class="form-group" style="position:relative; right: 40px"> <div class="checkbox-inline"> <label class="checkbox-inline">best days contact you:</label> <label class="checkbox-inline"> <input id="checkers" type="checkbox" value="">m</label> <label class="checkbox-inline"> <input id="checkers" type="checkbox" value="">t</label> <label class="checkbox-inline"> <input id="checkers" type="checkbox" value="">w</label> <label class="checkbox-inline"> <input id="checkers" type="checkbox" value="">th</label> <label class="checkbox-inline"> <input id="checkers" type="checkbox" value="">f</label> </div> </div> <div class="form-group" align="center"> <button type="submit" class="btn btn-default">send request</button> </div> </form> </div>
first, pointed out @riaz, have more 1 element same id, wrong. change name.
second, missing value on checkboxes. assign them proper values.
third, (username == "" || userphone == "" || checkboxcheck == "") condition return true either case. try splitting different if.
following demo of how can validate checkbox values:
function checked() { var username = document.getelementbyid("text").value; var userphone = document.getelementbyid("phone").value; var checkboxcheck = document.getelementsbyname("checkers"); var otherone = document.getelementbyid("dropdown").value; var addinfo = document.getelementbyid("textarea").value; var checkvalid = false; for(var =0; i<checkboxcheck.length; i++){ if(checkboxcheck[i].checked){ checkvalid = true; break; } } if(!checkvalid){ alert("please check checkbox") } if (username == "" || userphone == "") { alert("please fill in: name, phone number, days of week."); if (otherone == "other") { if (addinfo == "") { alert("please fill in additional information."); } } return false; } else { return true; } }<body> <div class="container-fluid"> <div class="page-header"> <table border="1" width="100%" frame="below"> <thead> <h1 style="color:purple" align="center"><span>c</span>afe 80's</h1> </thead> </table> </div> <table border="0" width="20%" cellspacing="20"> <ul class="list-inline nav nav-tabs"> <li><a href="lab-9csshomepagev6.html"><span class="glyphicon glyphicon-home"></span></a> </li> <li><a href="lab-9cssmenupagev6.html">menu</a> </li> <li class="active"><a href="lab-9csscontactpagev6.html">contact us</a> </li> </ul> </table> </div> <div class="container" style="height: 700px; position: relative; top: 60px"> <form onsubmit="return checked()" action="lab-9csscontactpagev6.html" method="post"> <div class="form-group"> <label for="text">name:</label> <input type="text" class="form-control" id="text"> </div> <div class="form-group"> <label for="email">email address:</label> <input type="email" class="form-control" id="email"> </div> <div class="form-group"> <label for="phone">phone number:</label> <input type="phone" class="form-control" id="phone"> </div> <div class="form-group"> <label for="dropdown">reason inquiry:</label> <select class="form-control" id="dropdown"> <option>catering</option> <option>private party</option> <option>feedback</option> <option id="oother">other</option> </select> </div> <div class="form-group"> <label for="textarea">addition imformation:</label> <textarea class="form-control" rows="5" id="textarea"></textarea> </div> <div class="form-group" style="position:relative; right: 40px"> <div class="radio-inline"> <label class="radio-inline">have been restaurant?</label> <label class="radio-inline"> <input type="radio" name="rad" checked>no</label> <label class="radio-inline"> <input type="radio" name="rad">yes</label> </div> </div> <div class="form-group" style="position:relative; right: 40px"> <div class="checkbox-inline"> <label class="checkbox-inline">best days contact you:</label> <label class="checkbox-inline"> <input name="checkers" type="checkbox" value="1">m</label> <label class="checkbox-inline"> <input name="checkers" type="checkbox" value="2">t</label> <label class="checkbox-inline"> <input name="checkers" type="checkbox" value=3"">w</label> <label class="checkbox-inline"> <input name="checkers" type="checkbox" value="4">th</label> <label class="checkbox-inline"> <input name="checkers" type="checkbox" value="5">f</label> </div> </div> <div class="form-group" align="center"> <button type="button" onclick="checked()" class="btn btn-default">send request</button> </div> </form> </div>
Comments
Post a Comment