Javascript not processed. Why?

N

Newbie

Hi everybody,

I made a website which includes some Javascript to check if the "Input
Fields" are empty when clicking on the "Submit" button.
If any of the fields are empty, an error should be displayed and no data
shall be send by email.
But the Javascript is not working and empty fields are still accepted.
What is wrong with the code in the Javascript?

TIA

**************************************

The code in the file (contact.html) looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

...........

<script language=JavaScript>
<!--
function checkForm1()
{
if (document.forms.Form1.elements['name'].value.length == 0) {
alert('Please enter a value for the "name" field');
return false;
}
if (document.forms.Form1.elements['email'].value.length == 0) {
alert('Please enter a value for the "Your email address" field');
return false;
}
if (document.forms.Form1.elements['comments'].value.length == 0) {
alert('Please enter a value for the "comments" field');
return false;
}
return true;
}
//-->
</script>
</head>

<body>

<form action="http://www.domain.com/domainmail"
enctype="multipart/form-data" method="POST">
<table border="0" cellspacing="0" cellpadding="0" width="500" height="300">
<td height="30" width="390" valign="top" align="right"><input name="name"
type="text" id="name" size="60"></td>
<td height="30" width="390" valign="top" align="right"><input
name="mailfrom" type="text" id="email" size="60"></td>
<td height="30" width="390" valign="top" align="right"><textarea
style="margin-top:0;margin-bottom:0;width:380px;height:100px;"
name="comment" type="text" id="comment"></textarea></td>
</table>

<div id="but1" style="position:absolute; left:120px; top:350px;"><input
name="Reset" type="reset" id="rst"></div>
<div id="but2" style="position:absolute; left:400px; top:350px;"><input
type="submit" value="Send Email" onClick="chkForm1"><input type="hidden"
name="sendtoemail" value="(e-mail address removed)">
</div>
</form></div>
</body>
</html>
 
R

RobG

Hi everybody,

I made a website which includes some Javascript to check if the "Input
Fields" are empty when clicking on the "Submit" button.
If any of the fields are empty, an error should be displayed and no data
shall be send by email.
But the Javascript is not working and empty fields are still accepted.
What is wrong with the code in the Javascript?
[...]
<script language=JavaScript>

The language attribute for script element is deprecated, type is
required, use:


Don't use HTML comment delimiters inside script elements. If you are
going to use XHTML, put all script in external files.

function checkForm1()
{
if (document.forms.Form1.elements['name'].value.length == 0) {

It would make sense to pass a reference to the form from the handler
to reduce the work for repetitive access:

function checkForm1(form) {
if (form.elements[...]...

and also to move your validation function from the submit button to
the form's onsubmit attribute (see below).
    alert('Please enter a value for the "name" field');
    return false;}

if (document.forms.Form1.elements['email'].value.length == 0) {
    alert('Please enter a value for the "Your email address" field');
    return false;}

if (document.forms.Form1.elements['comments'].value.length == 0) {
    alert('Please enter a value for the "comments" field');
    return false;}

Same for the above. It is nicer to put all the errors in one message.
  return true;

There is no need to return true, just don't return false.
}

//-->
</script>
</head>

<body>

<form action="http://www.domain.com/domainmail"
enctype="multipart/form-data" method="POST">

Put the submit listener here:

<form action="..." onsubmit="return checkForm1(this);" ...>

Make sure you have the return in there and actually call the
checkForm1() fuction, otherwise you are just passing a reference to
the handler and it won't get called.

[...]
<div id="but1" style="position:absolute; left:120px; top:350px;"><input
name="Reset" type="reset" id="rst"></div>

Don't give form controls names like "submit" and "reset", they mask
the submit and reset methods of the form.
<div id="but2" style="position:absolute; left:400px; top:350px;"><input
type="submit" value="Send Email" onClick="chkForm1">

Some tips:

1. chkForm1 isn't the name of the function, it's checkForm1.

2. You have to actually call the function, not just pass a referece so
you'd need to use checkForm1()

3. You don't return the value of the listener to the form, so it
won't affect submitting of the form.

4. Even if you did, you need to return false to the form's submit
handler (i.e. put the validation listener on the forms submit handler
as shown above).

There's a lot more that can be said, but that's it for now. :)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top