Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 656
  • Last Modified:

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
0
jfz139
Asked:
jfz139
  • 5
  • 3
  • 3
  • +1
1 Solution
 
knightEknightCommented:
I would instead use onSubmit in the FORM tag:

<FORM name='myform' action='whatever.asp' onSubmit='return(checkMyForm(this);'>

and in the function checkMyForm, return true or false depending on whether the fields are filled out correctly (true) or not (false)

function checkMyForm(theForm)
{
  // check each field, if it is not filled out correctly, return false


  // all fields are filled out, so ...
  return true;
}
0
 
knightEknightCommented:
oops, left out a parentheses:

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

0
 
jfz139Author Commented:
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>
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
jfz139Author Commented:


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
0
 
CJ_SCommented:
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>
0
 
camasuviCommented:
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>
0
 
CJ_SCommented:
That too yes :-)
0
 
jfz139Author Commented:
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

0
 
CJ_SCommented:
My mistake, change one line and add the /form

if(theForm.first_name.value.length == 0)
0
 
jfz139Author Commented:
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>


0
 
jfz139Author Commented:
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>
0
 
knightEknightCommented:
Sorry all, I was away from my desk and unable to contribute in a timely manner.  Thanks for the points :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 5
  • 3
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now