setting focus problem

[casa3311]

I have a php script that has a form for entering requests for materials for the classroom. The user has a choice of entering a single grade, or multiple grades. If the user requests materials for multiple grades, she is asked how many grades, from there, the input fields are set like this:

How Many Grades: 3
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<th>How Many Grades? </th>
<td><input type="text" name="req_grades" size="5" maxlength="8" value="3" onChange="submit()" /></td>
</tr>
<tr>
<th>Grade 1:&nbsp;</th>
<td>
<select name="req_grade_1">
<option value="">Select</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</td>
<th>Number: </th>
<td><input type="text" name="req_grade_num_1" value="" size="5" maxlength="10" /></td>
</tr>
<tr>
<th>Grade 2:&nbsp;</th>
<td>
<select name="req_grade_2">
<option value="">Select</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</td>
<th>Number: </th>
<td><input type="text" name="req_grade_num_2" value="" size="5" maxlength="10" /></td>
</tr>
<tr>
<th>Grade 3:&nbsp;</th>
<td>
<select name="req_grade_3">
<option value="">Select</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</td>
<th>Number: </th>
<td><input type="text" name="req_grade_num_3" value="" size="5" maxlength="10" /></td>
</tr>
</table>

Where x in the req_grade_num_x and req_grade_x is set by php in a for loop.

What I need to know is how, in JavaScript to set focus on any of these fields left blank or unselected since this number will vary from 2-3 (actually 2-13 in real life)

 

[BillyRayPreachersSon]

I've not tested this, but it looks about right ;o)...

function checkForBlanks() {
	var frm = document.forms['yourFormNameHere'].elements;
	for (var loop=0; loop<frm.length; loop++) {
		var currentEl = frm[loop];

		// check for empty text fields
		if (currentEl.tagName.toLowerCase() == 'input' && currentEl.name.indexOf('req_grade_num_') == 0 && currentEl.value.length == 0) {
			currentEl.focus();
			break;
		}

		// check for unselected select boxes
		if (currentEl.tagName.toLowerCase() == 'select' && currentEl.name.indexOf('req_grade_') == 0 && currentEl.selectedIndex == -1) {
			currentEl.focus();
			break;
		}
	}	
}

Basically, call "checkForBlanks()" when you want to validate the input. The code scans all form elements and will stop and focus the first "offending" element should it find one.

Hope this helps,
Dan

 

[casa3311]

I am guessing that it will just check the fields that are rendered on the page by the php, so when the user clicks the submit button, it will check for blanks only in those fields. My one problem is that I have a comment field that is not required.

I have several "onChange" commands in the script so that when the user changes a field, either adding to a text box or selecting from a dropdown, the page is re-submitted and the PHP checks for those fields with an if (isset($_POST['fieldname']) and then adds the required fields for that select. I ONLY want to run the validation when the user clicks the submit button.

 

[BillyRayPreachersSon]

?

 

[DreXor]

only when the submit button is pressed? not when the form is actually submitted?

*shrugs* doesn't amke sense to have validation then, but nonetheless...

<input type="submit" onclick="validate(form);">

unfortunately in this instance you'll also need to capture ENTER/RETURN presses too , because if they rpess enter instead of clicking the button, it'll bypass the validation

DreX
aKa - Robert