• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 653
  • 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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
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

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

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