Validate entry for each submit button

[florida]

My form takes data and needs user to fill out answer. The page will show many questions that need to be answered and each answer has a submit button for each question. It works but would like to validate if an answer is not submitted after they hit the submit button for a specific question. I put in a Javascript that checks if answer field is blank. The problem is the validation checks all the records after submit button is hit. I need a validation on the form answer field for each specific submit button. Any way I can do this??


<CFQUERY NAME="myquery" DATASOURCE="dataName" DBTYPE="ODBC">
select *
from tableOne
where answer is null
order by id desc
</CFQUERY>

<script>
function val()
{
if(document.theForm.answer.value == “”)
{
alert("No data entered.");
return false;
}
}
</script>

<cfoutput query="myquery">

<FORM name="theForm" action="theFormAdd.cfm" onsubmit="return val();" method="POST" enablecab="Yes">
<table border="1" cellpadding="1" cellspacing="1" width="60%">

//THIS PART GENERATES MULTIPLE RECORDS WITH EACH RECORD HAVING ITS OWN SUBMIT BUTTON.

<tr>
<td valign="top" width="12%"><strong>Question:</strong></td><td colspan="4">#myquery.question#</td>
</tr>
<tr>
<td valign="top" width="12%" bgcolor="Aqua"><strong>Answer:</strong></td>
<td colspan="4"><TEXTAREA COLS="70" ROWS="6" NAME="answer" wrap="hard"> TEXTAREA>
</td>
</tr>
<tr>
<td align="center" colspan="5" bgcolor="aqua">
<input type="submit" name="submit" value="Submit">
</td>
</tr>
</TABLE>
</form>
</cfoutput>

[olerag]

If your generating a new <TR> with every record and, lets
say, you have 5 rows, you currently have 5 submit buttons
(only one per form is really desired) and 5 <textareas> with
the same name (in this case, "anser").

A better solution may be to have only one button and validate
against however many textfields the user has interacted
with. As each new <tr> is prepared, I would give each a
unique name but it really isn't necessary.

To iterate thru your textfields of the form...

myFunction(form) {
var obj;
for (var i=0; i < form.elements.length; i++) {
obj = form.elements[i];
if (obj.type == "textarea" {
if (obj.value.length > 0) {
alert("Work with this field " + obj.name);
}
}
}
}


Once your done doing whatever you need done with the
answers that have been filled, issue your submit via the
document.forms[0].submit() function.

Hope this helps...

[florida]

thanks, please advise how I would use this using the submit function as you presented. Here is my attempt with your script:



<CFQUERY NAME="myquery" DATASOURCE="dataName" DBTYPE="ODBC">
select *
from tableOne
where answer is null
order by id desc
</CFQUERY>

<script>
myFunction(form) {
var obj;
for (var i=0; i < form.elements.length; i++) {
obj = form.elements[i];
if (obj.type == "textarea" {
if (obj.value.length > 0) {
alert("Work with this field " + obj.name);
}
}
}
}

document.forms[0].submit()
</script>

<cfoutput query="myquery">

<FORM name="theForm" action="theFormAdd.cfm" onsubmit="return myFunction();" method="POST" enablecab="Yes">
<table border="1" cellpadding="1" cellspacing="1" width="60%">

<tr>
<td valign="top" width="12%"><strong>Question:</strong></td><td colspan="4">#myquery.question#</td>
</tr>
<tr>
<td valign="top" width="12%" bgcolor="Aqua"><strong>Answer:</strong></td>
<td colspan="4"><TEXTAREA COLS="70" ROWS="6" NAME="answer" wrap="hard"> TEXTAREA>
</td>
</tr>
<tr>
<td align="center" colspan="5" bgcolor="aqua">
<input type="submit" name="submit" value="Submit">
</td>
</tr>
</TABLE>
</form>
</cfoutput>

[olerag]

Not familiar with <cfoutput> tag but I'll presume that for each
fetched row you are currently writing a new <tr>. OK...

1. Remove the "submit" button from your last <td>.
2. Make a new <input type="button"> below the <table>
and include access to the Javascript function.
<input type="button" value="Submit" onClick="myFunction(this.form)">
3. The JS function will iterate thru the textareas and work
with ones that only have values.

If you only want to work with a specific textarea you can
include a radio object and assign per each <td>. Then you
can work with the textarea whose accompany radio button
is selected.

To answer your thread though, what is is you want done
when a question is not completed and what constitutes a
reasonable answer to a question?

[florida]

Thanks I have as you suggested and it now doenst submit or do anything. Please advise if I am doing something wrong.

Yes you are right with the <cfoutput> and what it does. And I just want to check if answer field has a value so I am checking for blank value entry only and dont care what kind of values are entered.



<CFQUERY NAME="myquery" DATASOURCE="dataName" DBTYPE="ODBC">
select *
from tableOne
where answer is null
order by id desc
</CFQUERY>

<script>
myFunction(form) {
var obj;
for (var i=0; i < form.elements.length; i++) {
obj = form.elements[i];
if (obj.type == "textarea" {
if (obj.value.length > 0) {
alert("Work with this field " + obj.name); }
}
}
}

</script>

<cfoutput query="myquery">

<FORM name="theForm" action="theFormAdd.cfm" method="POST" enablecab="Yes">
<table border="1" cellpadding="1" cellspacing="1" width="60%">

<tr>
<td valign="top" width="12%"><strong>Question:</strong></td><td colspan="4">#myquery.question#</td>
</tr>
<tr>
<td valign="top" width="12%" bgcolor="Aqua"><strong>Answer:</strong></td>
<td colspan="4"><TEXTAREA COLS="70" ROWS="6" NAME="answer" wrap="hard"> TEXTAREA>
</td>
</tr>



</TABLE>
<input type="button" value="Submit" onClick="myFunction(this.form)">
</form>
</cfoutput>

[olerag]

FLA, Sorry gone for a while....

Try something like this: I've pre-populated 3 rows but it
doesn't matter how many are generated. Note that I've
given a unique name for each textarea, fixed a few syntax
problems with your HTML, and placed all NULL textareas
into the array for processing. If you want only the ones that
are NOT NULL, remove the "!" operator in the second "if"
statement.

You should be able to do this from your database fill when
each new <td> is generated. Typically in a servlet I'd be
populating the info from a multi-dimen array.

What is stored in the JS array is the names of the objects
(such as textarea1 thru however many are made. These
names are unique. If you don't want to give them names,
then you can place the form element "id" assignments in them.


<html>
<head>
<script type="text/javascript">
function myFunction(form) {
var obj;
var errors = new Array();
var x = 0;
var str = "";;

for (var i=0; i<form.elements.length; i++) {
obj = form.elements[i];
if (obj.type == "textarea") {
if (! obj.value.length > 0) {
errors[x] = obj.name;
x++;
}
}
}
if (errors.length > 0) {
for (var i=0; i<errors.length; i++) {
str = str + errors[i] + "\n";
}
alert(str);
}
else {
alert("Submit the form");
}
}

</script>
</head>
<body>
<center>
<b>Florida Sample</b>
<form>
<table border="1" width="60%">
<tr>
<td valign="top" width="12%" bgcolor="Aqua"><strong>Answer:</strong></td>
<td colspan="4"><textarea name="Area1" cols="70" rows="6" wrap="hard"></textarea></td>
</tr>

<tr>
<td valign="top" width="12%" bgcolor="Aqua"><strong>Answer:</strong></td>
<td colspan="4"><textarea name="Area2" cols="70" rows="6" wrap="hard"></textarea></td>
</tr>

<tr>
<td valign="top" width="12%" bgcolor="Aqua"><strong>Answer:</strong></td>
<td colspan="4"><textarea name="Area3" cols="70" rows="6" wrap="hard"></textarea></td>
</tr>
</table>

<br>
<input type="button" value="Submit" onClick="myFunction(this.form)">
</form>
</center>
</body>
</html>

[florida]

thanks for all your help on this.

It seems to now work where it gives me message if I leave an answer blank and hit submit button.
But after it gives me the message it still processes the form even though I have a "return false". Please advise how I can make the form stop processing after a blank value is entered. I thought the 'return false' would stop it?

Here is what I have now:


<script type="text/javascript">
function myFunction(form)
{
var obj;

for (var i=0; i<form.elements.length; i++)
{
obj = form.elements[i];
if (obj.type == "textarea")
{
if (obj.value.length > 0)
{
//Answer given and form processes and adds data just as it should
return true;
}
else
{
//Answer not given and form gives alert message just as it should But it also still processes the form even though I have a 'return false' here
alert("Enter an Answer.");
return false;
}
}
}
}
</script>

......

<TABLE>
<tr>
<td align="center" height="4">
<input type="submit" value="Submit" name="submit" onClick="myFunction(this.form);">
</td>
</tr>
</TABLE>
</form>