Google Answers: Javascript validation for dynamic form with textboxes and checkboxes

View Question

Q: Javascript validation for dynamic form with textboxes and checkboxes ( No Answer, 2 Comments )

Question

Subject: Javascript validation for dynamic form with textboxes and checkboxes
Category: Computers > Programming
Asked by: catullus13-ga
List Price: $20.00

Posted: 04 Jun 2005 10:16 PDT
Expires: 04 Jul 2005 10:16 PDT
Question ID: 529312

I have a form that displays all the story headlines from a database
table in a list, whose purpose is to allow the user to check those
stories that they want displayed on the newsletter page. Each headline
currently has a checkbox in a column alongside it, called "Use Story,"
that allows the user to select as many headlines as they want to be
displayed on the newsletter page.

I want to add another column -- a textbox for each headline -- called
"Position" that will allow the user to enter a one or two digit number
that will determine the order in which the stories will be displayed
on the newsletter page.

I need to create some Javascript validation that will do the following:

1. If the "Use Story" checkbox for the headline is checked, but there
is no Position number entered in the textbox for the story, the user
should get an alert telling them to enter a Position number for the
headline.

2. If the user entered a Position number for the story but failed to
select the checkbox for the story, then they should get an alert that
they failed to select the checkbox for that story.

3. If they happened to enter the same number twice or more in the
Position textbox (for example, "1, 2, 2"), then they should get an
alert telling them that they are using the same Position number twice.

Here is the code on the form for the checkbox that currently is there:

echo "<INPUT TYPE=\"checkbox\" NAME=\"setcurrent[]\" VALUE=\"$id\">";

I haven't added the column for the textbox for Position yet, so call
it "eposition" if you'd like.

Thank you for your help.

Answer

There is no answer at this time.

Comments

Subject: Re: Javascript validation for dynamic form with textboxes and checkboxes
From: koutroullos-ga on 17 Jun 2005 02:07 PDT

</script language="javascript">
function validate_input()
{
  dml=document.forms['formname'];
  len = dml.elements.length;
  var i=0;
  var outputstr='';
  var ret = true;
  
  for( i=0 ; i<len ; i++)
  {
  
    if ((dml.elements[i].name=='regid') && (dml.elements[i].checked==true))
    {
      if  (dml.elements[i+3].value=='') // if the textbox is the third
element after the checkbox in every row
      {
       alert(' Error at element : 'dml.elements[i].value');
       return false;
      }
    }
  }
  return true;
}

</script>

...... inside  the form
<INPUT TYPE="checkbox" NAME="<%=regid%>">
<INPUT TYPE="text" NAME="<%=regid%>">
<INPUT TYPE="submit"  onclick="return validate_input();">




Hope this helps

Subject: Re: Javascript validation for dynamic form with textboxes and checkboxes
From: jeffemminger-ga on 29 Jun 2005 06:46 PDT

try this:

<!DOCTYPE HTML PUBLIC
	"-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>test</title>
		<script type="text/javascript">

			function validate(form) {
				var ok = true;
				var errors = new Array();
				var usedPositions = new Array();
				var positions = document.getElementsByName("eposition[]");
				var boxes = document.getElementsByName("setcurrent[]");
				
				for (var x = 0; x < boxes.length; x++) {
					/*
					1. If the "Use Story" checkbox for the headline is checked, but there
					is no Position number entered in the textbox for the story, the user
					should get an alert telling them to enter a Position number for the
					headline.
					*/
					if (boxes[x].checked && (!positions[x].value || isNaN(positions[x].value))) {
						errors.push("Please enter a valid position for headline " + (x+1));
						ok = false;
					}
					/*
					2. If the user entered a Position number for the story but failed to
					select the checkbox for the story, then they should get an alert that
					they failed to select the checkbox for that story.
					*/
					if (positions[x].value && !boxes[x].checked) {
						errors.push("Please check the box for headline " + (x+1));
						ok = false;
					}
					/*
					3. If they happened to enter the same number twice or more in the
					Position textbox (for example, "1, 2, 2"), then they should get an
					alert telling them that they are using the same Position number twice.
					*/
					if (inArray(positions[x].value, usedPositions)) {
						errors.push("Position " + positions[x].value + " is used more than once.");
						ok = false;
					}
					//  we have a valid position, so record it
					if (positions[x].value) {
						usedPositions.push(positions[x].value);
					}
				}
				//  display any errors
				if (errors.length > 0) {
					alert("Please correct the following errors:\n"
						+ errors.join("\n"));
				}
				
				return ok;
			}
			
			function inArray(needle, haystack) {
				var found = false;
				for (var x = 0; x < haystack.length; x++) {
					if (needle == haystack[x]) {
						found = true;
					}
				}
				return found;
			}
		</script>

	</head>

	<body>
		<form onsubmit="return validate(this);">
			<table>
				<tr>
					<th>use story?</th>
					<th>headline</th>
					<th>position</th>
				</tr>
				<tr>
					<td><input type="checkbox" name="setcurrent[]" value="$id"></td>
					<td>blah1</td>
					<td><input type="text" name="eposition[]" size="3" maxlength="3" /></td>
				</tr>
				<tr>
					<td><input type="checkbox" name="setcurrent[]" value="$id"></td>
					<td>blah2</td>
					<td><input type="text" name="eposition[]" size="3" maxlength="3" /></td>
				</tr>
				<tr>
					<td><input type="checkbox" name="setcurrent[]" value="$id"></td>
					<td>blah3</td>
					<td><input type="text" name="eposition[]" size="3" maxlength="3" /></td>
				</tr>
				<tr>
					<td><input type="checkbox" name="setcurrent[]" value="$id"></td>
					<td>blah4</td>
					<td><input type="text" name="eposition[]" size="3" maxlength="3" /></td>
				</tr>
				<tr>
					<td colspan="3"><input type="submit" value="submit" /></td>
				</tr>
			</table>
			
		</form>
	</body>
</html>

Important Disclaimer: Answers and comments provided on Google Answers are general information, and are not intended to substitute for informed professional medical, psychiatric, psychological, tax, legal, investment, accounting, or other professional advice. Google does not endorse, and expressly disclaims liability for any product, manufacturer, distributor, service or service provider mentioned or any opinion expressed in answers or comments. Please read carefully the Google Answers Terms of Service.

If you feel that you have found inappropriate content, please let us know by emailing us at answers-support@google.com with the question ID listed above. Thank you.

Search Google Answers for

Google Home - Answers FAQ - Terms of Service - Privacy Policy