Featured post
javascript - Validating an input field if a certain radio button is checked -
i have form multiple question each asking radio button selection of pass, fail or n/a. want achieve if user selects fail of questions , try submit turn on validation 3 text fields.
the user must complete 3 text input fields if select fail on question , can't submit unless so.
also have validation on questions ensure user selects radio button each field solution must able work now. example of form is
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>form</title> <script> function valbutton(thisform) { // question 1 myoption = -1; (i=thisform.questionone_one.length-1; > -1; i--) { if (thisform.questionone[i].checked) { myoption = i; = -1; } } if (myoption == -1) { alert("please select pass, fail or n/a question 1"); return false; } // question2 myoption = -1; (i=thisform.questiontwo.length-1; > -1; i--) { if (thisform.questiontwo[i].checked) { myoption = i; = -1; } } if (myoption == -1) { alert("please select pass, fail or n/a question 2"); return false; } //etc... thisform.submit(); } </script> </head> <body> <form method="post" action="send.php" enctype="multipart/form-data" class="form" name="claimform" id="claimform"> <div>1. question? <input type="radio" name="questionone" class="radio" value="p" /> pass <input name="questionone" type="radio" class="radio" value="f" /> fail <inputname="questionone" type="radio" class="radio" value="n/a" /> n/a</div> <div>1. question? <input type="radio" name="questiontwo" class="radio" value="p" /> pass <input name="questiontwo" type="radio" class="radio" value="f" /> fail <inputname="questiontwo" type="radio" class="radio" value="n/a" /> n/a</div> <button type="submit" title="submit claim" class="button" onclick="valbutton(claimform);return false;"><span><span>submit claim</span></span></button> <button type="button" title="reset" class="button" onclick="this.form.reset()"><span><span>clear form</span></span></button> </form> </body> </html>
any ideas?
also forgot mention i'm using mootools in page solution should work mootools 1.2.
first of all, should declare variables using var
keyword. otherwise, pollute global namespace, , javascript has move through stack find variable.
now, question... use jquery. if prefer use plain old javascript can translate it.
function submitmyform() { var failanswers = $('input[type=radio]').filter(function() { return $(this).val() == "f"; }); if (failanswers.length > 0) { var blanktextfields = $('input[type=text]').filter(function() { return $(this).val() == ""; }); if (blanktextfields.length > 0) { alert('please answer questions'); return false; } } myform.submit(); }
here's did. first found of radio buttons "f" answers. if there @ least one, find text boxes no input. if there @ least 1 of these, pop alert message , return false. otherwise, , submit form.
- Get link
- X
- Other Apps
Comments
Post a Comment