PDA

View Full Version : Help in validating both drop down list and textbox together



jmarian1
Jan 13th, 2010, 10:42 PM
Hi. Please help in validating both a drop down list and textbox if the other is not empty alert message will pop-up and vice versa. The validation will be such as follows:
1. If each drop down list is selected and the textbox next to it is not equal to 0 or not empty, DO NOTHING.
2. If drop down list is not selected and textbox is empty DO NOTHING.
Below condition will check if both drop down list and textbox if one of the other is empty then message will appear:
3. If drop down list is selected or index is not equal to 0 AND textbox is empty or equal to 0, alert will pop-up.
4. If drop down list is not selected or index is equal to 0 AND textbox is not empty or not equal to 0, alert will pop-up.

I guess with the condition above will validate each drop down list and textboxes show to each other. Below is my code that I use and it doesn't work. Please help making it work. Of course I didn't include the <script tag> but it is oncluded in the original page. Thanks.



function validation_OK(iRows,iCols)
{
var iRows;
var iCols;
var desigamt = new Array(iRows);

desigamt[0] = Number(document.getElementById('i').value);
desigamt[1] = Number(document.getElementById('j').value);
desigamt[2] = Number(document.getElementById('k').value);
desigamt[3] = Number(document.getElementById('l').value);
desigamt[4] = Number(document.getElementById('m').value);
desigamt[5] = Number(document.getElementById('n').value);
desigamt[6] = Number(document.getElementById('o').value);
desigamt[7] = Number(document.getElementById('p').value);
desigamt[8] = Number(document.getElementById('q').value);
desigamt[9] = Number(document.getElementById('r').value);

var i;
var j;

for (i=0; i < iRows; i++)
{
desigamt[i] = new Array(iCols);
iCols[0] = document.getElementById('I').value;
iCols[1] = document.getElementById('J').value;
iCols[2] = document.getElementById('K').value;
iCols[3] = document.getElementById('L').value;
iCols[4] = document.getElementById('M').value;
iCols[5] = document.getElementById('N').value;
iCols[6] = document.getElementById('O').value;
iCols[7] = document.getElementById('P').value;
iCols[8] = document.getElementById('Q').value;
iCols[9] = document.getElementById('R').value;;
for (j=0; j < iCols; j++)
{
if(a[i][j] = "" || a[i][j] != "")
{
return true;
}
else
{
if (a[i].selectedIndex!=0 && a[j].value == "")
{
var answer = confirm("Please enter the amount to designate on the selected partner agency. Clicking the CANCEL button will delete the partner agency selected. Do you want to continue?")
if (answer)
{
a[j].focus();
}
else
{
a[i].selectedIndex=0;
}
}
else
{
var answer = confirm('Please select a partner agency to designate the amount you entered. Clicking the CANCEL button will delete the amount you entered. Do you want to continue?')
if (answer)
{
a[i].focus();
}
else
{
a[j].value=0;
}
}
}

}
}
return (desigamt);
}

Below is my html code. FYI: I have lots of function included and this function I am trying to make it work is one of them. Please help!!!!!


<table>
<tr>
<td>
<select id="I" name="I" size="1" style="overflow-x:scroll; width:380px; " onchange="return validation_OK();">
<option>Click to select...</option>
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option <?php echo helper_selected($descode == $form['I']); ?> value="<?php echo $prompt; ?>"><?php safeEcho($descode); ?> </option>
<?php endforeach; ?>
</select>

</td>
<td>
$<input id="i" name="i" class="text" type="text" value="<?php safeEcho($form['i'])?>" style="width:90px;" onChange="CalculateTotal();return validation_OK();" />
<?php helper_error('i');?>
</td>
</tr>
<tr>
<td>
<select id="J" name="J" size="1" style="overflow-x:scroll; width:380px; " onchange="return validation_J();">
<option>Click to select...</option>
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option <?php echo helper_selected($descode == $form['J']); ?> value="<?php echo $prompt; ?>" ><?php safeEcho($descode); ?> </option>
<?php endforeach; ?>
</select>

</td>
<td>
$<input id="j" name="j" class="text" type="text" value="<?php safeEcho($form['j'])?>" style="width:90px;" onChange="CalculateTotal();return validation_J();" />
<?php helper_error('j');?>
</td>
</tr>
<tr>
<td>
<select id="K" name="K" size="1" style="overflow-x:scroll; width:380px; " >
<option>Click to select...</option>
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option <?php echo helper_selected($descode == $form['K']); ?> value="<?php echo $prompt; ?>" ><?php safeEcho($descode); ?> </option>
<?php endforeach; ?>
</select>
</td>
<td>
$<input id="k" name="k" class="text" type="text" value="<?php safeEcho($form['k'])?>" style="width:90px;" onChange="CalculateTotal()" />
<?php helper_error('k');?> </td>

</tr>
<tr>
<td>
<select id="L" name="L" size="1" style="overflow-x:scroll; width:380px; " >
<option>Click to select...</option>
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option <?php echo helper_selected($descode == $form['L']); ?> value="<?php echo $prompt; ?>" ><?php safeEcho($descode); ?> </option>
<?php endforeach; ?>
</select>
</td>
<td>
$<input id="l" name="l" class="text" type="text" value="<?php safeEcho ($form['l'])?>" style="width:90px;" onChange="CalculateTotal()" />
<?php helper_error('l');?> </td>

</tr>
<tr>
<td>
<select id="M" name="M" size="1" style="overflow-x:scroll; width:380px; " >
<option>Click to select...</option>
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option <?php echo helper_selected($descode == $form['M']); ?> value="<?php echo $prompt; ?>" ><?php safeEcho($descode); ?> </option>
<?php endforeach; ?>
</select>
</td>
<td>
$<input id="m" name="m" class="text" type="text" value="<?php safeEcho($form['m'])?>" style="width:90px;" onChange="CalculateTotal();" />
<?php helper_error('m');?> </td>

</tr>
<tr>
<td>
<select id="N" name="N" size="1" style="overflow-x:scroll; width:380px; " >
<option>Click to select...</option>
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option <?php echo helper_selected($descode == $form['N']); ?> value="<?php echo $prompt; ?>" ><?php safeEcho($descode); ?> </option>
<?php endforeach; ?>
</select>
</td>
<td>
$<input id="n" name="n" class="text" type="text" value="<?php safeEcho($form['n'])?>" style="width:90px;" onChange="CalculateTotal();" />
<?php helper_error('n');?> </td>

</tr>
<tr>
<td>
<select id="O" name="P" size="1" style="overflow-x:scroll; width:380px; " >
<option>Click to select...</option>
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option <?php echo helper_selected($descode == $form['O']); ?> value="<?php echo $prompt; ?>" ><?php safeEcho($descode); ?> </option>
<?php endforeach; ?>
</select>
</td>
<td>
$<input id="o" name="o" class="text" type="text" value="<?php safeEcho($form['o'])?>" style="width:90px;" onChange="CalculateTotal();" />
<?php helper_error('o');?> </td>
</tr>
<tr>
<td>
<select id="P" name="P" size="1" style="overflow-x:scroll; width:380px; " >
<option>Click to select...</option>

<?php foreach ($designation_list as $descode => $prompt) : ?>
<option <?php echo helper_selected($descode == $form['P']); ?> value="<?php echo $prompt; ?>" ><?php safeEcho($descode); ?> </option>
<?php endforeach; ?>
</select>
</td>
<td>
$<input id="p" name="p" class="text" type="text" value="<?php safeEcho($form['p'])?>" style="width:90px;" onChange="CalculateTotal();"/>
<?php helper_error('p');?> </td>
</tr>
<tr>
<td>
<select id="Q" name="Q" size="1" style="overflow-x:scroll; width:380px; " >
<option>Click to select...</option>
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option <?php echo helper_selected($descode == $form['Q']); ?> value="<?php echo $prompt; ?>" ><?php safeEcho($descode); ?> </option>
<?php endforeach; ?>
</select>
</td>
<td>
$<input id="q" name="q" class="text" type="text" value="<?php safeEcho($form['q'])?>" style="width:90px;" onChange="CalculateTotal();" />
<?php helper_error('q');?> </td>
</tr>
<tr>
<td>
<select id="R" name="R" size="1" style="overflow-x:scroll; width:380px; ">
<option>Click to select...</option>
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option <?php echo helper_selected($descode == $form['R']); ?> value="<?php echo $prompt; ?>" ><?php safeEcho($descode); ?> </option>
<?php endforeach; ?>
</select>
</td>
<td>
$<input id="r" name="r" class="text" type="text" value="<?php safeEcho($form['r'])?>" style="width:90px;" onChange="CalculateTotal();" />
<?php helper_error('r');?> </td>
</tr>
</table>

I hope you can help me. Thanks a lot.

Old Pedant
Jan 13th, 2010, 11:49 PM
So many things wrong there that it's just a lot easier to completely rewrite it.


function validation_OK( )
{
var form = document.NameOfYourForm; // or could be document.forms[0] if only one form on page
var sels = "ijklmnopqr";
for ( var s = 0; s < sels.length; ++s )
{
var selname = sels.charAt(s);
var txtname = selname.toUpperCase();
var sel = form.elements[selname];
var txt = form.elements[txtname];
var txtval = parseFloat( txt.replace(/[^\d\.]/g, "") );
if ( sel.selectedIndex!=0 && ( isNaN(txtval) || txtval <= 0 ) )
{
if ( confirm("Please enter the amount to designate on the selected partner agency.\n"
+ "Clicking the CANCEL button will delete the partner agency selected.\n"
+ "Do you want to continue?")
)

{
txt.focus();
return false;
} else {
sel.selectedIndex=0;
}
}
if ( sel.selectedIndex == 0 && ( ! isNaN(txtval) && txtval > 0 ) )
{
if ( confirm('Please select a partner agency to designate the amount you entered.\n"
+ "Clicking the CANCEL button will delete the amount you entered.\n"
+ "Do you want to continue?')
}
{
sel.focus.focus();
return false;
} else {
txt.value = "";
}
}
}
return true;
}

Not sure that does what you want, but should be a lot closer that what is there now.

jmarian1
Jan 14th, 2010, 12:29 AM
HI Code Master Old Pedant. Thanks for your reply. I tried the code and it didn't work but thanks because I get the idea. I will try to do it myself and post it here if I have more problems or I find the solution for everybody to see. More power to you.

Old Pedant
Jan 14th, 2010, 12:54 AM
Just 3 or 4 relatively minor typos. Was easy to fix.

Here's a working HTML demo. Only 3 sets of fields, so only "ijk".

Added some niceties while I was at it.



<html>
<head>
<script type="text/javascript">
function validation_OK( )
{
var form = document.TheForm; // or could be document.forms[0] if only one form on page
var sels = "ijk"; // "ijklmnopqr";

var total = 0;
for ( var s = 0; s < sels.length; ++s )
{
var selname = sels.charAt(s);
var txtname = selname.toUpperCase();
var sel = form.elements[selname];
var selval = sel.options[sel.selectedIndex].text;
var txt = form.elements[txtname];
var txtval = parseFloat( txt.value.replace(/[^\d\.]/g, "") );
if ( ! isNaN(txtval) ) txt.value = "$" + txtval.toFixed(2);

if ( sel.selectedIndex!=0 && ( isNaN(txtval) || txtval <= 0 ) )
{
if ( confirm("Please enter the amount to designate to " + selval + ".\n"
+ "Clicking the CANCEL button will remove the " + selval + " designee.\n"
+ "Do you want to continue?")
)

{
txt.focus();
return false;
} else {
sel.selectedIndex=0;
alert("Please hit submit again if you are satisfied with this change.");
return false;
}
}
else if ( sel.selectedIndex == 0 && ( ! isNaN(txtval) && txtval > 0 ) )
{
if ( confirm("Please select a partner agency to designate the $"
+ txtval.toFixed(2) + " amount you entered.\n"
+ "Clicking the CANCEL button will delete the amount you entered.\n"
+ "Do you want to continue?")
)
{
sel.focus();
return false;
} else {
txt.value = "";
alert("Please hit submit again if you are satisfied with this change.");
return false;
}
}
else
{
if ( ! isNaN(txtval) ) total += txtval;
}
}
return confirm("Your total donation is $" + total.toFixed(2)
+ "\n\nClick OK if this is your intent."
+ "\nClick CANCEL to change amounts.");

}
</script>
</head>
<body>
<form name="TheForm" onsubmit="validation_OK(); return false;">
organization: <select name="i">
<option>--choose--</option>
<option>Red Cross</option>
<option>Doctors without Borders</option>
<option>Mercy Corps</option>
</select>
&nbsp;&nbsp;&nbsp;
amount: <input name="I">
<br/><br/>
organization: <select name="j">
<option>--choose--</option>
<option>Red Cross</option>
<option>Doctors without Borders</option>
<option>Mercy Corps</option>
</select>
&nbsp;&nbsp;&nbsp;
amount: <input name="J">
<br/><br/>
organization: <select name="k">
<option>--choose--</option>
<option>Red Cross</option>
<option>Doctors without Borders</option>
<option>Mercy Corps</option>
</select>
&nbsp;&nbsp;&nbsp;
amount: <input name="K">
<br/><br/>
<input type=submit>
</form>
</body>
</html>