asked on

javascript, form submit, onClick

Hi,

I have a form in html page. I want to
use javascript to check the fields in the
firm on whether they have been filled when
users click on the submit button. If the fields
are filled out correct, then submit the form;
otherwise don't submit the form.

After reading some javascript tutorial, I know
I should use onClick; but I don't know how.

Could anyone help me out of this?

Thanks a lot.

Jennifer

ASKER CERTIFIED SOLUTION

knightEknight

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

knightEknight

oops, left out a parentheses:

onSubmit='return(checkMyForm(this));'

jfz139

ASKER

knightEknight,

Thanks a lot. But it is not working quite well
on my html file. Here is my html page. I expect
to see a popup indication. But it does not do anything.

Do you see anything wrong?

Thanks again.

Jennifer

==============

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

function checkForm(theForm)
{

if(theForm.first_name.length == 0)
{
alert("Enter first name")
document.dataentry.fn.focus()
}

return false
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="dataentry" action=http://www.abcd.com/form.asp>
<h2>Form Field Validation</h2>

Enter First Name:<br>
<INPUT TYPE="text" NAME="fn" >

<INPUT TYPE="button" VALUE="Submit"
onSubmit='return(checkForm(this));'>

</BODY>
</HTML>

jfz139

ASKER

Also, after clicking on the submit button, it doesn't
lead me to the asp even if I let the checkForm return
a true.

???

Thanks.

Jennifer

CJ_S

points for KnightEKNight

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

function checkForm(theForm)
{

if(theForm.first_name.length == 0)
{
alert("Enter first name")
theForm.first_name.focus()
return false;
}

return true
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="dataentry" action="http://www.abcd.com/form.asp" onSubmit="return checkForm(this)">
<h2>Form Field Validation</h2>

Enter First Name:<br>
<INPUT TYPE="text" NAME="fn" >

<INPUT TYPE="submit" VALUE="Submit"
</BODY>
</HTML>

camasuvi

1) add </form> tag

anyhow i think this is what you are looking for :
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

function checkForm(theForm)
{

alert("111")
if(theForm.fn.value.length == 0)

{
alert("Enter first name")
theForm.fn.focus()
}

return false
}
</SCRIPT>
</HEAD>

<BODY>
<FORM NAME="dataentry" action="http://www.abcd.com/form.asp" onSubmit=" return checkForm(this)" >
<h2>Form Field Validation</h2>

Enter First Name:<br>
<INPUT TYPE="text" NAME="fn" >
<INPUT TYPE="submit" VALUE="Submit" >

</form>
</BODY>
</HTML>

CJ_S

That too yes :-)

jfz139

ASKER

C J S,

I tried your suggestion and created a page.
But, even if I don't enter anything in the
first name field and clicked the submit, there
is no alert popping up.

I also tried to add the </FORM>, it doesnot
help much neither.

Any more suggestion?

Thanks.

Jennifer

CJ_S

My mistake, change one line and add the /form

if(theForm.first_name.value.length == 0)

jfz139

ASKER

Hi,

All,

I know what was wrong. It was a typo in my
html page. Now it is like the following and it works.

I want to Thank all of you very much.

Jennifer

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

function checkForm(theForm)
{

if(theForm.fn.value.length == 0)
{
alert("Enter first name")
theForm.fn.focus()
return false;
}

return true
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="dataentry" action="http://www.abcd.com/form.asp" onSubmit="return checkForm(this)">
<h2>Form Field Validation</h2>

Enter First Name:<br>
<INPUT TYPE="text" NAME="fn" >

<INPUT TYPE="submit" VALUE="Submit"
</FORM>
</BODY>
</HTML>

jfz139

ASKER

Here is the completed html:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

function checkForm(theForm)
{

if(theForm.fn.value.length == 0)
{
alert("Enter first name")
theForm.fn.focus()
return false;
}

return true
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="dataentry" action="http://www.abcd.com/form.asp" onSubmit="return checkForm(this)">
<h2>Form Field Validation</h2>

Enter First Name:<br>
<INPUT TYPE="text" NAME="fn" >

<INPUT TYPE="submit" VALUE="Submit"
</FORM>
</BODY>
</HTML>

knightEknight

Sorry all, I was away from my desk and unable to contribute in a timely manner. Thanks for the points :)