JavaScript multiple forms in html

Page 1 of 1

10 Replies - 2914 Views - Last Post: 20 April 2010 - 05:08 AM

#1 duerz  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 23-February 10

JavaScript multiple forms in html

Posted 17 April 2010 - 01:31 PM

Hello,

I'm having some trouble naming variables in javascript.
Actually, my html has multiple form names (form, form1, form2, etc..., and im just having trouble understanding how to access elements within.

For example:
I get error:
Message: 'document.forms.form.bname' is null or not an object

When I use the following code:

var bname = document.forms["form"].bname.value;


And when I try this:
var bname = document.form.bname.value;


I get the same results.

Please help

Is This A Good Question/Topic? 0
  • +

Replies To: JavaScript multiple forms in html

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 3873
  • View blog
  • Posts: 11,407
  • Joined: 18-April 07

Re: JavaScript multiple forms in html

Posted 17 April 2010 - 01:41 PM

First thing, you shouldn't really name your form "form" just out of clean and good programming practice.

Second thing, you should use the first format if you wanted to access your forms as a member of a form array. In that case you should use the index value...

// Access bname field from first form
var bname = document.forms[0].bname.value;


You should use the name of the form if you are only wanting to access that form directly without caring about the other forms...

var bname = document.form1.bname.value;


Now these examples assume that you have assigned a name attribute to each form tag (and again don't use the word "form" because it could be confusing or cause a possible problem).

If these two examples don't work, then you should probably show us your forms and so we can see what you might be doing wrong. Keep in mind that Javascript is also case sensitive and that you should always double check spelling.

:)
Was This Post Helpful? 0
  • +
  • -

#3 duerz  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 23-February 10

Re: JavaScript multiple forms in html

Posted 17 April 2010 - 02:13 PM

Hello again,

Thanks for your quick post.

But I have tried what you have suggested.
Here is my example:
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Billing Information&nbsp; Name&nbsp;&nbsp; Addr</title>
<script type="text/javascript" src="test.js"></script>

</head>

<body>
<div class="billing">
	
	<form action="" method="get" onsubmit="" name="form1">
		Billing Information<br />
		<br />
		Name<br />
		<input id ="bname" name="bname" size="40" type="text" tabindex="1" /><br />
		<br />
		Address<br />
		<input id ="baddress" name="baddress" size="40" type="text" tabindex="2" /><br />
		<br />
		City, State, Zip<br />
		<input name="city" size="30" type="text" tabindex="3" /><input name="state" size="10" type="text" tabindex="4" /><input name="zip" size="15" type="text" tabindex="5" /><br />
		<br />
		<input name="check" tabindex="6" type="checkbox" value="sameShip" onclick=""/>&nbsp; Same 
		shipping information
	</form>
</div>	

<div class ="shipping" >		
    <form action="" method="get" onsubmit="" name="form2">


		Shipping Information<br />
		<br />
		Name<br />
		<input name="sname" size="40" type="text" tabindex="7" /><br />
		<br />
		Address<br />
		<input name="saddress" size="40" type="text" tabindex="8" /><br />
		<br />
		City, State, Zip<br />
		<input name="scity" size="30" type="text" tabindex="9" /><input name="sstate" size="10" type="text" tabindex="10" /><input name="szip" size="15" type="text" tabindex="11" /><br />
		<br />

		&nbsp; 
	</form>	
</div>

</body>

</html>



And here is what I am trying to start in Javascript:

var bname = document.form1.bname.value;
var baddress = document.form1.baddress.value;
var city = document.form1.city.value;
var zip = document.form1.zip.value;

Was This Post Helpful? 0
  • +
  • -

#4 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 3873
  • View blog
  • Posts: 11,407
  • Joined: 18-April 07

Re: JavaScript multiple forms in html

Posted 17 April 2010 - 04:07 PM

I don't know what is with the thumbs down on my post, the information I gave is accurate. From what I see here the only other problem you possibly have is that you can only pull the value of the form like this AFTER THE FORM LOADS. That is, you can't just put var bname = document.form1.bname.value; at the top of the page because when the Javascript is called, the form is not yet finished loading. You do have to put those statements inside a function that you can then call later. Either by clicking a button or using something like the onload event in the body tag.
Was This Post Helpful? 0
  • +
  • -

#5 duerz  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 23-February 10

Re: JavaScript multiple forms in html

Posted 17 April 2010 - 08:32 PM

Ok here is more on what I am doing.

Here is the html(test.html):
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Billing Information&nbsp; Name&nbsp;&nbsp; Addr</title>
<script type="text/javascript" src="test.js"></script>

</head>

<body>
<div class="billing">
	
	<form action="" method="get" onsubmit="" name="form1">
		Billing Information<br />
		<br />
		Name<br />
		<input id ="bname" name="bname" size="40" type="text" tabindex="1" /><br />
		<br />
		Address<br />
		<input id ="baddress" name="baddress" size="40" type="text" tabindex="2" /><br />
		<br />
		City, State, Zip<br />
		<input name="city" size="30" type="text" tabindex="3" /><input name="state" size="10" type="text" tabindex="4" /><input name="zip" size="15" type="text" tabindex="5" /><br />
		<br />
		<input name="check" tabindex="6" type="checkbox" value="sameShip" onclick="confirmSubmit()"/>&nbsp; Do Javascript
	</form>
</div>	
<br />
<div class ="shipping" >		
    <form action="" method="get" onsubmit="" name="form2">


		Shipping Information<br />
		<br />
		Name<br />
		<input name="sname" size="40" type="text" tabindex="7" /><br />
		<br />
		Address<br />
		<input name="saddress" size="40" type="text" tabindex="8" /><br />
		<br />
		City, State, Zip<br />
		<input name="scity" size="30" type="text" tabindex="9" /><input name="sstate" size="10" type="text" tabindex="10" /><input name="szip" size="15" type="text" tabindex="11" /><br />
		<br />

		&nbsp; 
	</form>	
</div>
<div class="telephone" >
	<form action="" method="get" onsubmit="" name="form3">
		<p>Telephone:</p>
   		<input name="te1e1" size="6" type="text" />
   		<input name="tele2" size="4" type="text" />
   		<input name="tele3" size="7" type="text" />
</form>
</div>
<div class="password"  >
<form action="" method="get" onsubmit="" name="form4">
<p>Enter a password that you can use to manage your subscription online:</p>
	<input name="Password1" type="password" />
<p>Type the password again to confirm:</p>
	<input name="Password2" type="password" /></form>

</div>

</body>

</html>



And here is my javascript (test.js):

function confirmSubmit() {
var bname = document.form1.bname.value;
var baddress = document.form1.baddress.value;
var city = document.form1.city.value;
var zip = document.form1.zip.value;
var state = document.form1.state.value;
var tele1 = document.form3.tele1.value;
var tele2 = document.form3.tele2.value;
var tele3 = document.form3.tele3.value;
var Password1 = document.form4.Password1.value;
var Password2 = document.form4.Password2.value;

if (bname.length === 0) {
  alert("You Must Enter your Billing Information Name");
  return false;
 }
if (baddress.length === 0) {
  alert("You Must Enter your Address");
  return false;
 }
if (city.length === 0) {
  alert("You Must Enter your City");
  return false;
 }
if (zip.length === 0) {
  alert("You Must Enter your Zip Code");
  return false;
 }
if (state.length === 0) {
  alert("You Must Enter your State");
  return false;
 }
if (tele.length === 0) {
  alert("You Must Enter your Telephone");
  return false;
 }
if (tele2.length === 0) {
  alert("You Must Enter your Telephone");
  return false;
 }
if (tele3.length === 0) {
  alert("You Must Enter your Telephone");
  return false;
 }
else {
return true;
}
 }


It is not a loading issue anymore.  Because now I have it inside a function.
It reads the variables no problem upto .form3.
The funny thing is it works on the .form1 variables - I tested it.
But when it comes to the .form3 - it bombs????????

Can someone please help me out here?


Opps i wrote down the most important part:
It is not a loading issue anymore. Because now I have it inside a function.
It reads the variables no problem upto .form3.
The funny thing is it works on the .form1 variables - I tested it.
But when it comes to the .form3 - it bombs????????

Can someone please help me out here?
Was This Post Helpful? 0
  • +
  • -

#6 duerz  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 23-February 10

Re: JavaScript multiple forms in html

Posted 17 April 2010 - 08:59 PM

And I did fing a problem with the code. It is not the .tele vs. .tele1.

It still dosnt work here is the code again:
function confirmSubmit() {
var bname = document.form1.bname.value;
var baddress = document.form1.baddress.value;
var city = document.form1.city.value;
var zip = document.form1.zip.value;
var state = document.form1.state.value;
var tele1 = document.form3.tele1.value;
var tele2 = document.form3.tele2.value;
var tele3 = document.form3.tele3.value;
var Password1 = document.form4.Password1.value;
var Password2 = document.form4.Password2.value;

if (bname.length === 0) {
  alert("You Must Enter your Billing Information Name");
  return false;
 }
if (baddress.length === 0) {
  alert("You Must Enter your Address");
  return false;
 }
if (city.length === 0) {
  alert("You Must Enter your City");
  return false;
 }
if (zip.length === 0) {
  alert("You Must Enter your Zip Code");
  return false;
 }
if (state.length === 0) {
  alert("You Must Enter your State");
  return false;
 }
if (tele1.length === 0) {
  alert("You Must Enter your Telephone");
  return false;
 }
if (tele2.length === 0) {
  alert("You Must Enter your Telephone");
  return false;
 }
if (tele3.length === 0) {
  alert("You Must Enter your Telephone");
  return false;
 }
else {
return true;
}
 }

Was This Post Helpful? 0
  • +
  • -

#7 duerz  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 23-February 10

Re: JavaScript multiple forms in html

Posted 17 April 2010 - 10:05 PM

Man, I guess the freakin name was wrong?

I tested this to death!!!

And, God do I really hate javascript!!!

Wow, javascript dosnt like the name tele?
WTF!


FYI - just in case you guys are wondering too?????

This post has been edited by PsychoCoder: 17 April 2010 - 10:14 PM
Reason for edit:: Removed about 100 question marks. Breaking HScroll of site. Please dont do that again

Was This Post Helpful? 0
  • +
  • -

#8 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 3873
  • View blog
  • Posts: 11,407
  • Joined: 18-April 07

Re: JavaScript multiple forms in html

Posted 17 April 2010 - 10:39 PM

You do realize you have a spelling error in your form right?

 <input name="te1e1" size="6" type="text" />


Notice you have the number 1 in there instead of the letter "l". ;)
Was This Post Helpful? 0
  • +
  • -

#9 duerz  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 23-February 10

Re: JavaScript multiple forms in html

Posted 17 April 2010 - 10:47 PM

Yes,

I said that in the previous post.

Did you read my last post?
Was This Post Helpful? 0
  • +
  • -

#10 duerz  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 23-February 10

Re: JavaScript multiple forms in html

Posted 17 April 2010 - 10:57 PM

oops again,


yes you are right.

I fought this for hours, wow. Im really going to remember this :/

It was wrong?

wow, now I feel like a dumb...


Thanks for your help!!!!
Was This Post Helpful? 0
  • +
  • -

#11 RobStoorm  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 20-April 10

Re: JavaScript multiple forms in html

Posted 20 April 2010 - 05:08 AM

I am also attempting to create a similar form. But with one change. I altered one aspect of the above example and poof, nothing works. Instead of using a click to check for blank fields, I added a submit button, which seemed to have brought the whole thing down. Below you will see that is all I changed. It worked above (after fixing the typo)

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Billing Information&nbsp; Name&nbsp;&nbsp; Addr</title>
<script type="text/javascript" src="test.js"></script>

</head>

<body>
<div class="billing">
        
        <form action="" method="get" onsubmit="" name="form1">
                Billing Information<br />
                <br />
                Name<br />
                <input id ="bname" name="bname" size="40" type="text" tabindex="1" /><br />
                <br />
                Address<br />
                <input id ="baddress" name="baddress" size="40" type="text" tabindex="3" /><br />
                <br />
                City, State, Zip<br />
                <input name="city" size="30" type="text" tabindex="4" /><input name="state" size="10" type="text" tabindex="5" /><input name="zip" size="15" type="text" tabindex="6" /><br />
                </form>
</div>  
<br />
<div class ="shipping" >                
    <form action="" method="get" onsubmit="" name="form2">


                Shipping Information<br />
                <br />
                Name<br />
                <input name="sname" size="40" type="text" tabindex="7" /><br />
                <br />
                Address<br />
                <input name="saddress" size="40" type="text" tabindex="8" /><br />
                <br />
                City, State, Zip<br />
                <input name="scity" size="30" type="text" tabindex="9" /><input name="sstate" size="10" type="text" tabindex="10" /><input name="szip" size="15" type="text" tabindex="11" /><br />
                <br />

                &nbsp; 
        </form> 
</div>
<div class="telephone" >
        <form action="" method="get" onsubmit="" name="form3">
                <p>Telephone:</p>
                <input name="tele1" size="6" type="text" />
                <input name="tele2" size="4" type="text" />
                <input name="tele3" size="7" type="text" />
</form>
<div class="submit">
<form action="" method="get" onsubmit="return confirmSubmit();" name="form1">
<p>Submit</p> 
<input type="submit" value="submit" />
</form>
<div>

</body>

</html>


Just to confirm the javascript is the same

function confirmSubmit() {
var bname = document.form1.bname.value;
var baddress = document.form1.baddress.value;
var city = document.form1.city.value;
var zip = document.form1.zip.value;
var state = document.form1.state.value;
var tele1 = document.form3.tele1.value;
var tele2 = document.form3.tele2.value;
var tele3 = document.form3.tele3.value;
var submit = document.form1.submit.value;


if (bname.length === 0) {
  alert("You Must Enter your Billing Information Name");
  return false;
 }

if (baddress.length === 0) {
  alert("You Must Enter your Address");
  return false;
 }
if (city.length === 0) {
  alert("You Must Enter your City");
  return false;
 }
if (zip.length === 0) {
  alert("You Must Enter your Zip Code");
  return false;
 }
if (state.length === 0) {
  alert("You Must Enter your State");
  return false;
 }
if (tele1.length === 0) {
  alert("You Must Enter your Telephone");
  return false;
 }
if (tele2.length === 0) {
  alert("You Must Enter your Telephone");
  return false;
 }
if (tele3.length === 0) {
  alert("You Must Enter your Telephone");
  return false;
 }
else {
return true;
}
 }

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1