JavaScript submitting form despite empty fields 2

[cdck]

I'm a JavaScript Newbie in the worst way - to the point where so far all I can do is use scripts from a library and figure out what I need to change to make them fit my needs. I got a script from the JavaScript Source (

http://javascript.internet.com)

to make sure that all required fields on my form are completed before the form can be submitted. So far, it works great to a point - it does look at the fields needed, and identify any that are not completed. It pops up a message listing the incomplete fields, but instead of cancelling the form submission, when you hit OK on the message box, the form submits to the next page.

What have I missed?

Here's the code:


function verifyPRStartStep1() {
var themessage = "You are required to complete the following fields: ";
if (document.form.PRdate.value=="") {
themessage = themessage + " - Date";
}
if (document.form.ReqBy.value=="") {
themessage = themessage + " - Requisitioner";
}
if (document.form.AccOrJob.value=="") {
themessage = themessage + " - Account/Job Number";
}
if (document.form.Description.value=="") {
themessage = themessage + " - Item Description";
}
if (document.form.PartNum.value=="") {
themessage = themessage + " - Item Part Number";
}
if (document.form.QtyReq.value=="") {
themessage = themessage + " - Item Quantity Required";
}
if (document.form.DateReq.value=="") {
themessage = themessage + " - Item Date Required (no ASAP)";
}
//alert if fields are empty and cancel form submit
if (themessage == "You are required to complete the following fields: ") {
document.form.submit();
}
else {
alert(themessage);
return false;
}
}
// End -->
</script>



Cheryl dc Kern

 

[monksnake]

Can you post the code where you are calling this function? I'm no master but it seems to look like it would work to me

 

[trollacious]

Use something like this:

<script type="text/javascript">
function verifyPRStartStep1() {
//blank field checks here...

if (themessage == "You are required to complete the following fields: ") {
return true;
}
else {
alert(themessage);
return false;
   }
}
</script>

<form name="form" onsubmit="return verifyPRStartStep1() ">

Lee

 

[theniteowl]

cdck, if you get a javascript error in any of the lines prior to the return statement the function will quit, return false will not be sent and the form will submit.

If you are testing in IE you should see a yellow error icon in the lower left corner of the browser window though this may disappear quickly as the page is submitting. You can sometimes use the back button to get back to the form page and see the error icon. Clicking the icon will bring up the error message.

If you are using Firefox you can use the Javascript Console to watch for error messages.

BTW, you can use += to save yourself some typing.
The line
themessage = themessage + " - Requisitioner";
can be replaced with
themessage += " - Requisitioner";

value += othervalue will add the two together just the same as the long way of value = value + othervalue.


At my age I still learn something new every day, but I forget two others.

 

[trollacious]

I would guess that she's calling the function in the onclick of a submit button rather than using it in the form's onsubmit event handler.

Lee

 

[cdck]

Sorry it took so long to respond - I was called away from my desk. While I read through the suggestions above, here's the line that calls the code:

<INPUT type="image" src="graphics/bButtonPRContinue.gif" onclick="verifyPRStartStep1()" tabindex="11">

trollacious, you were correct about the onsubmit. In case it matters, I have also tried making the button a regular submit button to see if it had any difference earlier when nothing at all was happening on click. In the end, I determined that I had failed to name the form, and that was the issue. That was corrected, which brought me to this point.

Cheryl dc Kern

 

[cdck]

Lee:

If I use your code for the form opening tag, how will it know where to post the data? Or are the "name" and "onsubmit" attributes additions to the normal attributes already in place?

Cheryl dc Kern

 

[trollacious]

Add the action and method to the <form> tag as you usually would. The example I provided used the information you had specified in your original post. Don't call the function anywhere else in your form.

<form name="formname" action="PageToBeSubmittedTo.asp" method="post" onsubmit="return verifyPRStartStep1()">

Lee

 

[cdck]

It's working! Thank you all for helping me muddle through, and thank you especially trollacious for giving the the final solution!

Cheryl dc Kern

 

[akaballa]

Hello,

I am creating a form. In this form I have this section with several options (radio buttons). Now I made it mandatory to select an option using the if statement. However, when I click 'ok' on the alert box, the message is still being sent. Here is the code:

if (!form.taskIssue[0].checked && !form.taskIssue [1].checked && !form.taskIssue[2].checked &&
!form.taskIssue[3].checked && !form.taskIssue[4].checked && !form.taskIssue[5].checked &&
!form.taskIssue[6].checked && !form.taskIssue[7].checked) {

alert("Please select an option for the 'Task/Issue' field. Thank you.");
return true;
}

 

[theniteowl]

akaballa, you should always post new questions in a new thread even if the topic is similar.

You have one obvious problem with your code from what I can see. You return true after the alert message. You would want to return false if there was a problem.



At my age I still learn something new every day, but I forget two others.