Solved

Simple Form Validation

Posted on 2004-08-23
4
149 Views
Last Modified: 2010-04-06
Hello

Could someone please tell me if the following is possible?

I have a form (see html below) and all i am trying to do is write a simple validation function to check the following:

1) If they check the check box and select the option "Completed" then a warning should be displayed.

The function should be good for a form that can contain only 1 row or many rows.

Thanks




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<form action="" method="get" name="tester">
  <table border="1">
    <tr>
      <td width="20%"><select name="select" size="1">
          <option>No Action</option>
          <option>In Progress</option>
          <option>Completed</option>
        </select>
      </td>
      <td width="80%"><input name="ckbox1" type="checkbox" value="">
        Option1 to select</td>
    </tr>
    <tr>
      <td><select name="select" size="1">
          <option>No Action</option>
          <option>In Progress</option>
          <option>Completed</option>
        </select>
      </td>
      <td><input name="ckbox2" type="checkbox" value="">
        Option2 to select</td>
    </tr>
  </table>
</form>
</body>
</html>
0
Comment
Question by:runcsmeduncs
4 Comments
 
LVL 5

Accepted Solution

by:
LindzK earned 25 total points
Comment Utility
Hi,

below is a rework of your code, with added javascript to do the validation.  It will work for as many rows as you wish to add, all you need to ensure is that each checkbox has an id of chkboxN   where N = the row number, for example id="chkbox1".  Also give each selection box an id of selectN again where N = the row number, for example id="select1" or id="select2"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="javascript">
  var warning = "This is the warning message";
 
  // function takes in the row number, so it knows what to validate
  function ValidateRow(RowNum)
  {
    // construct the id's of the object in the row
    var chkid = "chkbox" + RowNum;
      var selid = "select" + RowNum;
      
      // get the objects that you wish to validate
      var selobj = document.getElementById(selid);
      var chkobj = document.getElementById(chkid);
      
      // validate that the check box is checked, and the selection box says completed
      if (chkobj.checked && selobj.options[selobj.selectedIndex].text=="Completed")
      {
        window.alert(warning);
      }
  }
</script>

</head>
<body>
<form action="" method="get" name="tester">
  <table border="1">
    <tr>
      <td width="20%">
        <select id ="select1" name="select" size="1" onclick="ValidateRow(1)">
          <option>No Action</option>
          <option>In Progress</option>
          <option>Completed</option>
        </select>
      </td>
      <td width="80%">
        <input id="chkbox1" name="ckbox1" type="checkbox" value="" onclick="ValidateRow(1)">
        Option1 to select</td>
    </tr>
    <tr>
      <td>
        <select id="select2" name="select" size="1" onclick="ValidateRow(2)">
          <option>No Action</option>
          <option>In Progress</option>
          <option>Completed</option>
        </select>
      </td>
      <td><input id="chkbox2" name="ckbox2" type="checkbox" value="" onclick="ValidateRow(2)">
        Option2 to select</td>
    </tr>
  </table>
</form>
</body>
</html>
0
 
LVL 1

Expert Comment

by:cbelle13013
Comment Utility
Does it have to be a javascript validation? Or can it be a PHP or ASP validation?
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now