Need Help With Javascript and the HTML Form

Franco Mocke · 11-02-2009, 01:42 AM

Hello warriors,

I'm new to javascript programming, don't have a clue how to implement it with html. Here is my problem:

I have a form that people needs to fill in, with fields like the following:

Name
Email
Cell nr.
etc
etc

Now, I already have javascript to validate all those fields. They all have the same structure like the following:

Code:

function CheckNameString(objName, objStr, isReq)
{
  var name = objName.value;
  name = name.toUpperCase();
  var msg = "";
  
  name = name.replace(/^\s+|\s+$/,'');
  
  if (name == "")
  {
    if (isReq == true)
      msg += "- Please enter " + objStr + ".\n";
  }
  else
  {
    if (name.length < 2 )
      msg += "- Please enter two or more characters for " + objStr + ".\n";
    
    if (name.match(word))
      msg += "- No vulgarity allowed, please re-enter " + objStr + ".\n";
  }
    
  return msg;
}

Now, all these javascript functions are in a seperate .js file, and I included it in my HTML page.

Now, I have a submit button on my form. How do I implement this code with my form? I know I should use some sort of "return" function on my button or something like that but I really don't know what to do!

If it helps, I use a POST form

Help would be appreciated!

Thanks

mywebwork · 11-02-2009, 02:07 AM

Hi Franco

What you need to do is to tie these functions to an "event". As the name would imply an event is an occurrence of an action, such as clicking your submit button or entering data in a text box.

For your Submit button you need to capture the "click" event (in JavaScript this is "onClick") and tie it to a function that uses "submit". I know it may sound confusing but once you get the hang of it you'll see that it's pretty easy.

A couple of good resources to help you:

How To Submit a Form Using JavaScript

This has a lot of code that probably is exactly what you need.

JavaScript Tutorial

The W3 Schools is one of the best educational resources on the Internet when it comes to learning HTML, JavaScript, PHP and CSS.

If you get stuck feel free to drop me a PM, I can probably work the code out for you if I could see your entire HTML and JavaScript files.

Bill

Franco Mocke · 11-02-2009, 02:16 AM

Hey Bill,

Thanks for the info, I will let you know if I need help!

Franco Mocke · 11-02-2009, 02:28 AM

This is exactly what I need:

Code:

<form action="" name="myform" >
			<table cellspacing="2" cellpadding="2" border="0">
			<tr>
			  <td align="right">First Name</td>
			  <td><input type="text" name="FirstName"></td>
			</tr>
			<tr>
			  <td align="right">Last Name</td>
			  <td><input type="text" name="LastName"></td>
			</tr>
			<tr>
			  <td align="right">EMail</td>
			  <td><input type="text" name="Email"></td>
			</tr>
			<tr>
			  <td align="right">Phone</td>
			  <td><input type="text" name="Phone"></td>
			</tr>
			<tr>
			  <td align="right">Address</td>
			  <td><textarea cols="20" rows="5" name="Address"></textarea></td>
			</tr>
			<tr>
			  <td align="right">Country</td>
			  <td>
				  <SELECT name="Country">
					<option value="" selected>[choose yours]
					<option value="008">Albania
					<option value="012">Algeria
					<option value="016">American Samoa
					<option value="020">Andorra
					<option value="024">Angola
					<option value="660">Anguilla
					<option value="010">Antarctica
					<option value="028">Antigua And Barbuda
					<option value="032">Argentina
					<option value="051">Armenia
					<option value="533">Aruba	
				 </SELECT>
				</td>
			</tr>
			<tr>
			  <td align="right"></td>
			  <td><input type="submit" value="Submit"></td>
			</tr>
			</table>
			</form>
			 			<script language="JavaScript" type="text/javascript">
			 var frmvalidator = new Validator("myform");
			 frmvalidator.addValidation("FirstName","req","Please enter your First Name");
			 frmvalidator.addValidation("FirstName","maxlen=20",
				"Max length for FirstName is 20");
			 frmvalidator.addValidation("FirstName","alpha");
			 
			 frmvalidator.addValidation("LastName","req");
			 frmvalidator.addValidation("LastName","maxlen=20");
			 
			 frmvalidator.addValidation("Email","maxlen=50");
			 frmvalidator.addValidation("Email","req");
			 frmvalidator.addValidation("Email","email");
			 
			 frmvalidator.addValidation("Phone","maxlen=50");
			 frmvalidator.addValidation("Phone","numeric");
			 
			 frmvalidator.addValidation("Address","maxlen=50");
			 frmvalidator.addValidation("Country","dontselect=0");
			</script>

Can I also add the "method=post" in the form with this code? Will my action file open if someone clicks on the button and all the fields are correct with this code? Where does the error message display?

Thanks

ermac2014 · 11-02-2009, 10:00 AM

you need to add form.submit()

11-02-2009, 01:42 AM	#1
Franco Mocke HyperActive Warrior Join Date: Jul 2009 Posts: 160 Thanks: 6 Thanked 8 Times in 6 Posts	Need Help With Javascript and the HTML Form Hello warriors, I'm new to javascript programming, don't have a clue how to implement it with html. Here is my problem: I have a form that people needs to fill in, with fields like the following: Name Email Cell nr. etc etc Now, I already have javascript to validate all those fields. They all have the same structure like the following: Code: function CheckNameString(objName, objStr, isReq) { var name = objName.value; name = name.toUpperCase(); var msg = ""; name = name.replace(/^\s+\|\s+$/,''); if (name == "") { if (isReq == true) msg += "- Please enter " + objStr + ".\n"; } else { if (name.length < 2 ) msg += "- Please enter two or more characters for " + objStr + ".\n"; if (name.match(word)) msg += "- No vulgarity allowed, please re-enter " + objStr + ".\n"; } return msg; } Now, all these javascript functions are in a seperate .js file, and I included it in my HTML page. Now, I have a submit button on my form. How do I implement this code with my form? I know I should use some sort of "return" function on my button or something like that but I really don't know what to do! If it helps, I use a POST form Help would be appreciated! Thanks

11-02-2009, 02:07 AM	#2
mywebwork Advanced Warrior War Room Member Join Date: Sep 2008 Location: Honolulu, Hawaii, USA (Currently in Montreal Canada) Posts: 813 Blog Entries: 1 Thanks: 138 Thanked 217 Times in 146 Posts Social Networking Contact Info	Re: Need Help With Javascript and the HTML Form Hi Franco What you need to do is to tie these functions to an "event". As the name would imply an event is an occurrence of an action, such as clicking your submit button or entering data in a text box. For your Submit button you need to capture the "click" event (in JavaScript this is "onClick") and tie it to a function that uses "submit". I know it may sound confusing but once you get the hang of it you'll see that it's pretty easy. A couple of good resources to help you: How To Submit a Form Using JavaScript This has a lot of code that probably is exactly what you need. JavaScript Tutorial The W3 Schools is one of the best educational resources on the Internet when it comes to learning HTML, JavaScript, PHP and CSS. If you get stuck feel free to drop me a PM, I can probably work the code out for you if I could see your entire HTML and JavaScript files. Bill

11-02-2009, 02:16 AM	#3
Franco Mocke HyperActive Warrior Join Date: Jul 2009 Posts: 160 Thanks: 6 Thanked 8 Times in 6 Posts	Re: Need Help With Javascript and the HTML Form Hey Bill, Thanks for the info, I will let you know if I need help!

11-02-2009, 02:28 AM	#4
Franco Mocke HyperActive Warrior Join Date: Jul 2009 Posts: 160 Thanks: 6 Thanked 8 Times in 6 Posts	Re: Need Help With Javascript and the HTML Form This is exactly what I need: Code: <form action="" name="myform" > <table cellspacing="2" cellpadding="2" border="0"> <tr> <td align="right">First Name</td> <td><input type="text" name="FirstName"></td> </tr> <tr> <td align="right">Last Name</td> <td><input type="text" name="LastName"></td> </tr> <tr> <td align="right">EMail</td> <td><input type="text" name="Email"></td> </tr> <tr> <td align="right">Phone</td> <td><input type="text" name="Phone"></td> </tr> <tr> <td align="right">Address</td> <td><textarea cols="20" rows="5" name="Address"></textarea></td> </tr> <tr> <td align="right">Country</td> <td> <SELECT name="Country"> <option value="" selected>[choose yours] <option value="008">Albania <option value="012">Algeria <option value="016">American Samoa <option value="020">Andorra <option value="024">Angola <option value="660">Anguilla <option value="010">Antarctica <option value="028">Antigua And Barbuda <option value="032">Argentina <option value="051">Armenia <option value="533">Aruba </SELECT> </td> </tr> <tr> <td align="right"></td> <td><input type="submit" value="Submit"></td> </tr> </table> </form> <script language="JavaScript" type="text/javascript"> var frmvalidator = new Validator("myform"); frmvalidator.addValidation("FirstName","req","Please enter your First Name"); frmvalidator.addValidation("FirstName","maxlen=20", "Max length for FirstName is 20"); frmvalidator.addValidation("FirstName","alpha"); frmvalidator.addValidation("LastName","req"); frmvalidator.addValidation("LastName","maxlen=20"); frmvalidator.addValidation("Email","maxlen=50"); frmvalidator.addValidation("Email","req"); frmvalidator.addValidation("Email","email"); frmvalidator.addValidation("Phone","maxlen=50"); frmvalidator.addValidation("Phone","numeric"); frmvalidator.addValidation("Address","maxlen=50"); frmvalidator.addValidation("Country","dontselect=0"); </script> Can I also add the "method=post" in the form with this code? Will my action file open if someone clicks on the button and all the fields are correct with this code? Where does the error message display? Thanks

11-02-2009, 10:00 AM	#5
ermac2014 Warrior Member Join Date: Oct 2009 Posts: 8 Thanks: 0 Thanked 1 Time in 1 Post	Re: Need Help With Javascript and the HTML Form you need to add form.submit()