HTML and JavaScript problem. Cannot get the required element using JavaScript

Asked By 140 points N/A Posted on -
qa-featured

Hello experts,

I have a small problem in using JavaScript. I am attempting to access a text box using the code as attached.

Internet Explorer the code works fine but does not work in Firefox. I get a "object required" error right where the IF condition starts. I am pretty sure the syntax is correct!

SHARE
Best Answer by iRandom
Go To Solution
Answered By 0 points N/A #89715

HTML and JavaScript problem. Cannot get the required element using JavaScript

qa-featured

Your code looks fine. Can you post the HTML portion of the code as well ?

The reason is that the HTML of the input element plays a major role in how each browser processes the HTML document tree. The property values of each element must be enclosed in single or double quotes and each HTML element need to be properly closed.

I believe it might be a problem with the syntax of the "firstname" input. Please post the HTML code for us to see.

About TechnoHat
Questions
0
Answers
26
Best Answers
5
  • Posted on -
  • Question Category:
Answered By 0 points N/A #89717

HTML and JavaScript problem. Cannot get the required element using JavaScript

qa-featured

Please post the HTML code of the form element as well. It may give us a clue on what is wrong.

It may be your JavaScript or your HTML code. Both will play a major when you are discussing about cross browser compatibility with JavaScript and HTML.

About iRandom
Questions
1
Answers
22
Best Answers
5
  • Posted on -
  • Question Category:
Answered By 140 points N/A #89718

HTML and JavaScript problem. Cannot get the required element using JavaScript

qa-featured

Ok. here is my code. I wrote a short page just to test it out. I have highlighted the JavaScript that is giving the error. I also have highlighted the HTML portions as requested by you all.

<html>
<head>
 <script language='JavaScript'>
function validate() {
  if (document.frmDetail.firstName != '') { alert('First Name required'); }
}
</script>
<body>
<form name='frmDetail'>
First Name <input type='text' name='firstname' value=''/>
</form>
</body>
</html>

About Raymond
Questions
1
Answers
4
Best Answers
0
  • Posted on -
  • Question Category:
Answered By 0 points N/A #89719

HTML and JavaScript problem. Cannot get the required element using JavaScript

qa-featured

Raymond, thank you for posting the code.

Looking at the code I noticed that you have not specified the "id" attribute in the form HTML tag. The "id" attribute is also missing in the input HTML tag. It is very important to specify the "id" attribute of each HTML element.

The reason is that the "name" tag is directly recognized by Internet Explorer. When the JavaScript runtime requests Internet Explorer for an element by name, Internet Explorer attempts to return the element that matches the "name" attribute.

Whereas in Firefox, Firefox attempts to query the HTML elements' id attribute and not the name attribute.

Therefore your code will run perfectly in Internet Explorer and not in Firefox.

Please alter your HTML and add the "id" attribute for both elements. Set the value of the "id" attribute to the same value you have given to the name attribute.

Example: <input type='text' name='firstname'id='firstname' />

About TechnoHat
Questions
0
Answers
26
Best Answers
5
  • Posted on -
  • Question Category:
Answered By 140 points N/A #89720

HTML and JavaScript problem. Cannot get the required element using JavaScript

qa-featured

I changed the code as follows. Still no dice. Does not work :(.

<html>
<head>
 <script language='JavaScript'>
function validate() {
  if (document.frmDetail.firstName != '') { alert('First Name required'); }
}
</script>
<body>
<form name='frmDetail' id='frmDetail'>
First Name <input type='text' name='firstname'  id='firstname'  value=''/>
</form>
</body>
</html>

About Raymond
Questions
1
Answers
4
Best Answers
0
  • Posted on -
  • Question Category:
Best Answer
Best Answer
Answered By 0 points N/A #89721

HTML and JavaScript problem. Cannot get the required element using JavaScript

qa-featured

I think you have missed to name the input element correctly. The JavaScript refers to "firstName" (title case) whereas the code has "firstname" (all simples). I have highlighted the error in red for you. Maybe you should change the JavaScript code?

Please note that as per TechnoHat you NEED to have the "id" attribute set for the code to work in Firefox.

<html>
<head>
 <script language='JavaScript'>
function validate() {
  if (document.frmDetail.firstName != '') { alert('First Name required'); }
}
</script>
<body>
<form name='frmDetail' id='frmDetail'>
First Name <input type='text' name='firstname'  id='firstname'  value=''/>
</form>
</body>
</html>

About iRandom
Questions
1
Answers
22
Best Answers
5
  • Posted on -
  • Question Category:
Answered By 140 points N/A #89722

HTML and JavaScript problem. Cannot get the required element using JavaScript

qa-featured

Aha ! That did the trick! How could I miss such a simple thing!

I put the id attribute in all the elements plus fixed the case in the JavaScript. Now it works beautifully in both browsers. Thank you for pointing out the error in my code!

I guess the following holds true  "developer can't check his own code…you need another one to check it!"

About Raymond
Questions
1
Answers
4
Best Answers
0
  • Posted on -
  • Question Category:
Answered By 0 points N/A #89723

HTML and JavaScript problem. Cannot get the required element using JavaScript

qa-featured

Raymond, I totally agree with you ! Developers need help too!

About TechnoHat
Questions
0
Answers
26
Best Answers
5
  • Posted on -
  • Question Category:
Answered By 0 points N/A #89724

HTML and JavaScript problem. Cannot get the required element using JavaScript

qa-featured

Count me in it. I agree as well!

About iRandom
Questions
1
Answers
22
Best Answers
5
  • Posted on -
  • Question Category:
Answered By 140 points N/A #89725

HTML and JavaScript problem. Cannot get the required element using JavaScript

qa-featured

Thank you TechnoHat.

Thank you iRandom.

You guys were awesome!

About Raymond
Questions
1
Answers
4
Best Answers
0
  • Posted on -
  • Question Category:

What is advantage of OSI protocol over TCP

Previous

What is best to use for website images ? JPG or PNG

Next

Related Questions