CODEWITHSUNDEEP
javascriptfirefoxdom-events
Justin
Justin

Reputation: 11

JavaScript doesn't work in Mozilla Firefox

I wrote the following code:

<form name=f>
<input type=button value="Button1" onclick=b1click()>
<input type=button value="Buttone2" onclick=b2click()>
<script language=javascript>
function b1click()
{
  f.action="Login.jsp";
  f.submit();
}
function b2click()
{
  f.action="Logout.jsp";
  f.submit();
}
</script>
</form>

This works code properly in Internet Explorer but the action does not work in Mozilla Firefox 3.6.2. How to solve this problem? Please any one help me.

Upvotes: 1

Views: 4123

Answers (5)

yuxhuang
yuxhuang

Reputation: 5379

There are a couple ways to reference your form.

If you define your form as <form name="Login" id="LoginFrom"></form>,

Method 1

If your form is the only one in the page, you can use:

document.forms[0].action = 'Login.jsp';

Method 2

If your form is not the only one form in the page, you can use the form name to reference the form, such as

document.Login.action = 'Login.asp';

Method 3

The form can also be referenced with DOM function getElementByID.

document.getElementByID('LoginForm').action = 'Login.asp'

Upvotes: 0

zzzzBov
zzzzBov

Reputation: 179046

I know this will sound snide, but the truth of the matter is: it's not 1995 anymore.

That code would have worked great a decade ago, but standards and specifications have changed significantly since then.

Lets start from the top:

<form name=f>

All html attribute values should be enclosed in quotes. For consistency sake, use double quotes: <form name="f"> is much better.

<input type="button" value="Button1" onclick="b1click()">

Avoid inline-script events. If the functionality ever changes, or you want to remove a function, you'll have to go through every page and adjust the function. A better way is to give the button an ID, and add the onclick event via scripts:

HTML:
<input type="button" value="Button1" id="button1">
JS:
document.getElementById('button1').onclick = b1click;

Now the script's turn:

<script language=javascript>

You should use the type attribute with a valid MIME type. Additionally, whenever possible, move your scripts to an external script file. When that's not possible, make sure to either XML encode your script, or encase it in CDATA tags:

<script type="text/javascript" src="path/to/script.js"></script>

OR

<script type="text/javascript">
/* <![CDATA[ */
... some code ...
/* ]]> */
</script>

Finally the real issue with your script.

The f property you're referencing is a member of the document, and not the window. I believe IE will put the reference on both, but it's just not safe to rely on either behavior.

Give the form an ID: <form id="f">, and get the element from the b[12]click functions

function b1click()
{
  var f = document.getElementById('f');
  f.action = 'Login.jsp';
  f.submit();
}

Upvotes: 4

RichardTheKiwi
RichardTheKiwi

Reputation: 107696

You should quote the input attributes, or any attributes for that matter. And your script does not belong AFTER the form, e.g. in body, but rather in the HEAD element.

This works in IE, Firefox and Chrome.

<html>
<head>
<script language="javascript">
function b1click()
{
  f.action="Login.jsp";  // better is document.f., but f. appears to work as well
  f.submit();
}
function b2click()
{
  f.action="Logout.jsp";
  f.submit();
}
</script>
</head>
<body>
<form name="f">
<input type="button" value="Button1" onclick="b1click()">
<input type="button" value="Buttone2" onclick="b2click()">
</form>
</body>
</html>

Upvotes: 0

Blender
Blender

Reputation: 298106

First off, change that name="foo" to id="foo". Names are mostly used within the form itself.

Now, try to reference your form using document.formID, not just formID. formID is a variable, which is undefined, but document.formID is the actual form element:

function b1click()
{
  document.f.action="Login.jsp";
  document.f.submit();
}
function b2click()
{
  document.f.action="Logout.jsp";
  document.f.submit();
}

Upvotes: 2

Radek
Radek

Reputation: 8376

Give form an id and refer to it using:

var form = document.getElementById('formId');

Upvotes: 1

Related Questions