I'm building a website and I have it done but there is a pretty big bug in the code. I created a table in which I have a button that is a function to calculate some expression and have the calculations display in the table. The calculations happen but do not display in the table. Here is what I have:
<!DOCTYPE html>
<html>
<!--DB 11/2/2015-->
<!-- W3 Schools was referenced in building this code-->
<head>
<meta charset="utf-8">
<title>Assignment 8</title>
<link href="images/avatar.png" rel="shortcut icon" type="image/png">
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
<script src="js/javascript.js" type="text/javascript"></script>
<style type="text/css">
</style>
</head>
<body onload="fillitin()">
<header>
</header>
<aside>
</aside>
<div id="main">
<h1> Assignment 8: Operators and Expression</h1>
<br>
<p id="demo"></p>
<script>
var d = new Date();
months = ['Janurary','Feburary','March','April','May','June','July','August','September','October','November','December']
var date = months[d.getMonth()]+" "+d.getDate()+" "+d.getFullYear();
document.getElementById("demo").innerHTML = date;
</script>
<h2 style="text-align:center"> S'mores!</h2>
<h4> CLick on the button serves to learn the amount of ingredients needed to make S'mores!</h4>
<table style="width:50%" border="1">
<form name="myform" method="">
<tr>
<td> <br>
<input type="text" id="num1" value="1">
</td>
<td>
<button onclick="myFunction()">Serves</button>
</td>
</tr>
</form>
<tr>
<td id="M"></td>
<td>Large Marshmallows</td>
</tr>
<tr>
<td id="G"></td>
<td>Graham Cracker</td>
</tr>
<tr>
<td id="C"></td>
<td>Ounches Chocolate</td>
</tr>
</table>
<script>
function fillitin() {
document.getElementById("M").InnerHTML="1";
document.getElementById("G").InnerHTML="1";
document.getElementById("C").InnerHTML="1.5";
}
function myFunction() {
var x=document.getElementById("num1").value;
document.getElementById("M").InnerHTML=x;
document.getElementById("G").InnerHTML=x;
document.getElementById("C").InnerHTML=x*1.5;
}
</script>
<ul>
<li>
Heat the marshmallow over an open flame until it begins to brown and melt.
</li>
<li>Break the graham cracker in half. Put the chocolate on one half of the cracker, and put the warm marshmallow on the other. </li>
<li>Enjoy! Don’t burn your mouth!</li>
</ul>
<img alt="picture of smores" height="129" src="images/picture1.jpg" width="194">
<cite> picture taking from <a href="http://www.instructables.com/id/no-campfire-smores/"> http://www.instructables.com/id/no-campfire-smores/
</a></cite>
</div>
<footer>
</footer>
</body>
</html>
You're using InnerHTML (capital I) which is wrong.
The right function is .innerHTML
Also, if you don't want the button to post the form, you should add it type="button"
More details : Can I make a button not submit a form
You have a slight typo in your code. You're using InnerHTML, but the correct spelling is innerHTML with a lowercase 'i'. Here's a description of innerHTML: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML?redirectlocale=en-US&redirectslug=DOM%2Felement.innerHTML. And here's your fixed demo:
<!DOCTYPE html>
<html>
<!--DB 11/2/2015-->
<!-- W3 Schools was referenced in building this code-->
<head>
<meta charset="utf-8">
<title>Assignment 8</title>
<link href="images/avatar.png" rel="shortcut icon" type="image/png">
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
<script src="js/javascript.js" type="text/javascript"></script>
<style type="text/css">
</style>
</head>
<body onload="fillitin()">
<header>
</header>
<aside>
</aside>
<div id="main">
<h1> Assignment 8: Operators and Expression</h1>
<br>
<p id="demo"></p>
<script>
var d = new Date();
months = ['Janurary','Feburary','March','April','May','June','July','August','September','October','November','December']
var date = months[d.getMonth()]+" "+d.getDate()+" "+d.getFullYear();
document.getElementById("demo").innerHTML = date;
</script>
<h2 style="text-align:center"> S'mores!</h2>
<h4> CLick on the button serves to learn the amount of ingredients needed to make S'mores!</h4>
<table style="width:50%" border="1">
<form name="myform" method="">
<tr>
<td> <br>
<input type="text" id="num1" value="1">
</td>
<td>
<button onclick="myFunction()">Serves</button>
</td>
</tr>
</form>
<tr>
<td id="M"></td>
<td>Large Marshmallows</td>
</tr>
<tr>
<td id="G"></td>
<td>Graham Cracker</td>
</tr>
<tr>
<td id="C"></td>
<td>Ounches Chocolate</td>
</tr>
</table>
<script>
function fillitin() {
document.getElementById("M").innerHTML="1";
document.getElementById("G").innerHTML="1";
document.getElementById("C").innerHTML="1.5";
}
function myFunction() {
var x=document.getElementById("num1").value;
document.getElementById("M").innerHTML=x;
document.getElementById("G").innerHTML=x;
document.getElementById("C").innerHTML=x*1.5;
}
</script>
<ul>
<li>
Heat the marshmallow over an open flame until it begins to brown and melt.
</li>
<li>Break the graham cracker in half. Put the chocolate on one half of the cracker, and put the warm marshmallow on the other. </li>
<li>Enjoy! Don’t burn your mouth!</li>
</ul>
<img alt="picture of smores" height="129" src="images/picture1.jpg" width="194">
<cite> picture taking from <a href="http://www.instructables.com/id/no-campfire-smores/"> http://www.instructables.com/id/no-campfire-smores/
</a></cite>
</div>
<footer>
</footer>
</body>
</html>
The page refreshes once the document is changed so it does change your values but then it changes them back to the original. you need to find a different place to run the fillitin() then when the document finishes loading. something similar to the jquery $(document).ready()
Related
I'm trying to toggle CSS stylesheets by clicking one of two buttons. However, my code isn't working. Not sure what I'm missing. I'm working with a separate index.html that I cannot modify and a separate js file.
Here is my code below. I'm getting a TypeError: cannot read properties of null (reading addEventListener'.
Index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Assignment 4</title> <link id="styleSheet" href="styleA.css" rel="stylesheet" type="text/css">
<script src="styler.js"></script>
</head>
<body>
<form>
<button id="styleA" type="submit">Use styleA</button>
<button id="styleB" type="submit">Use styleB</button>
</form>
<article>
<h1>OSU Beaver Store - CS 290 Version</h1>
<p>Catering to All Your Beaver-Gear Needs</p>
<div>
<table>
<caption>Our Most Popular Items</caption>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Orange Beaver Polo</td>
<td>49.00</td>
</tr>
<tr>
<td>3 Pack Beaver Socks</td>
<td>28.00</td>
</tr>
<tr>
<td>Orange Beavers Hat</td>
<td>32.50</td>
</tr>
<tr>
<td>Waterproof Jacket</td>
<td>65.55</td>
</tr>
</tbody>
</table>
</div>
<div id="beaver-store">
Visit The Official Beaver Store
</div>
</article>
<div>
<span id="o">O</span><span id="s">S</span><span id ="u">U</span>
</div>
</body>
</html>
JS File:
"use strict";
let aLink= document.querySelector("link");
const aButton = document.getElementById("styleA");
const bButton = document.getElementById("styleB");
function changeToA(){
preventDefault();
aLink.setAttribute('href', 'styleB.css');
}
function changeToB(){
aLink.setAttribute('href', 'styleB.css');
}
aButton.addEventListener("click",changeToA);
bButton.addEventListener("click",changeToB);
***Update:
I figured it out. Needed to have another event listener for DOMloadedcontent.
I have implemented Datatables into my Spring MVC, Java, Bootstrap 5, Thymeleaf project and the results are great. The only issue is a cosmetic one - the text is wrapping in the length menu and search sections. This can be seen at the top of the attached image where "Show 10 entries" is split across 3 lines and the Search table and box are split over 2 lines.
I am using the latest versions of jquery.dataTables.min.css, jquery.dataTables.min.js and dataTables.bootstrap5.min.js with no custom configuration: -
$(document).ready(function () {
$('table.display').DataTable();
});
Here is an HTML snippet with one row of data:
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Java Documentum Services</title>
<link rel="stylesheet" href="/assets/jquery/jquery.dataTables.min.css"/>
<link rel="stylesheet" href="/assets/bootstrap/bootstrap.min.css"/>
<link rel="stylesheet" href="/assets/dropzonejs/dropzone.css"/>
</head>
<body>
<div class="container pt-3 pb-3">
<table id="search-results"
class="display"
style="width:100%">
<thead>
<tr>
<th>Filename</th>
<th>Test</th>
<th>Case Id</th>
<th>Upload Time</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span>download.pdf</span>
</td>
<td>
<span>JH-06062022-01</span>
</td>
<td>
<span>test-case-12344444</span>
</td>
<td>
<span>2022-07-22 11:03 GMT</span>
</td>
<td>
<!--Actions button-->
<!--Download button-->
<!--Delete button-->
</td>
</tr>
</tbody>
</table>
<script src="/assets/jquery/jquery-3.5.1.js"></script>
<script src="/assets/jquery/jquery.dataTables.min.js"></script>
<script src="/assets/datatables/dataTables.bootstrap5.min.js"></script>
<script src="/assets/jds/dataTables.js"></script>
<script src="/assets/bootstrap/bootstrap.min.js"></script>
<script src="/assets/dropzonejs/dropzone.min.js"></script>
<script src="/assets/jds/dropzone.js"></script>
</body>
</html>
I can see that these two sections are defined in sLengthMenu and sSearch in the JavaScript code, so perhaps a code change could be an option, but it would be preferable if it could be fixed with a configuration change instead. I also wondered if perhaps there is a clash with one of the other CSS stylesheets or JavaScript libraries that I am using - these are visible in the sample HTML.
so I have this code which displays data from elastic search, the purpose is to get some data, compute a average and display a red or green button.
I'm just starting.
<!doctype html>
<html ng-app="EsConnector">
<link rel="stylesheet" href="styles/main.css">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script><!-- // a recuperer -->
<script src="scripts/controllers/elasticsearch.angular.js"></script>
<script src="scripts/controllers/es_connect.js"></script>
</head>
<script type="text/javascript">
function addTpsGeocodage(p1) {
alert(p1);
}
</script>
<body>
<title>Dashboard</title>
<h1 align="center">Dashboard </h1>
<hr>
<h3>Services Externes</h3>
<div ng-controller="QueryController">
<div >
<table>
<tr ng-repeat="item in hits">
<td>
{{item['_source']['tpsGecodage']}}
<script>
addTpsGeocodage(item['_source']['tpsGecodage']);
</script>
<span class="green_circle" ng-if="item['_source']['tpsGecodage'] < 1">
Lien
</span>
</td>
</tr>
</table>
</div>
</div>
<br>
Above this line ^^^ should be the results of a test search on the ElasticSearch server.
</body>
</html>
Basically this addTpsGeocodage(item['_source']['tpsGecodage']); (line 29) is doing nothing.
How can I pass a variable from the angular JS scope to the javascript scope.
Thanks
Assign the function to a variable so that it can be accessed globally.
<script type="text/javascript">
var addTpsGeocodage = function(p1) {
alert(p1);
}
</script>
Now, you can access addTpsGeocodage anywhere.
I have a page with a form that is being used to ask a question. When the submit button is clicked, it does the follow, determines if the user checked the right box, displays the answer and explanation, and disables the checkboxes and submit button to prevent re-answering the question.
My issue is that when the user clicks the submit button the answers, and the disabling appear for only a split second before the page reloads. How do I stop this, I want the user to see if they are correct and not be able to change their answers. When I run it in Dreamweaver where I am building the pages, it runs fine in live view.
Code is below:
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"
rel="stylesheet" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="../styles/casestyles.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
<!-- show all on submit and show checked answer -->
<script type="text/javascript" src="../js/submit_answers.js"> </script>
<!-- Add jQuery library -->
<script type="text/javascript" src="fancybox/lib/jquery-1.10.1.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" />
<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="../js/fancybox.js"></script>
<script type="text/javascript">
/***********************************************
* Limit number of checked checkboxes script- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
function checkboxlimit(checkgroup, limit){
var checkgroup=checkgroup
var limit=limit
for (var i=0; i<checkgroup.length; i++){
checkgroup[i].onclick=function(){
var checkedcount=0
for (var i=0; i<checkgroup.length; i++)
checkedcount+=(checkgroup[i].checked)? 1 : 0
if (checkedcount>limit){
alert("You can only select a maximum of "+limit+" diagnosis")
this.checked=false
}
}
}
}
</script>
<!-- disable checkboxes -->
<script type="text/javascript">
function disablefields(){
{
document.getElementById('check1').disabled='disabled';
document.getElementById('check2').disabled='disabled';
document.getElementById('check3').disabled='disabled';
document.getElementById('check4').disabled='disabled';
document.getElementById('ex3').disabled='disabled';
document.getElementById('ex3').value='Answers Submitted'; }
}
</script>
</head>
<script type="text/javascript">
function myfunction(){
//call disable checkbox
disabled(document);
//call disable submit
checkForm(form) ;
}
</script>
.explanation {
display: none;
}
.correct {
display:none;
}
.incorrect {
display:none;
}.explanation {
display: none;
}
.correct {
display:none;
}
.incorrect {
display:none;
}
<div class="row-offcanvas row-offcanvas-left">
<div id="sidebar" class="sidebar-offcanvas">
<div class="col-md-12">
<ul class="nav nav-pills nav-stacked">
<li>History of Present Illness </li>
<li>Review of Systems </li>
<li>Past Medical History </li>
<li>Physical Examination </li>
<li>Essential Differential Diagnosis</li>
<li>Relevant Testing</li>
<li>Diagnosis</li>
<li>Treatment</li>
<li>Questions</li>
<li>About the Case</li>
</ul>
</div>
</div>
<form name="limit" onreset="disablefields();" onSubmit="disablefields();" >
<div id="main" class="container-fluid">
<div class="col-md-12">
<p class="visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas"> <i class="glyphicon glyphicon-chevron-left"></i> </button>
</p>
<!-- Footer Code -->
<div id="footer" style="overflow-y:hidden; overflow-x:hidden;">
<div class="container" style="overflow-y:hidden; overflow-x:hidden;">
<p class="muted credit"><img src="img/prev.png" width="24" height="21" / > <a href="relevant_testing.html" > Relevant Testing </a> | <a href="treatment.html" > Treatment </a><img src="img/next.png" width="24" height="21" />
</div>
</div>
<!-- Change the Heading -->
<h3>Diagnosis</h3>
<h5>At this time, the most likely diagnosis is</h5>
<p>Please choose only one.</p>
<!-- First Column-->
<div class="col-md-3">
<div class="bootstrap-demo">
<!-- content goes here -->
<p style="margin-bottom:0px">
<input id="check1" name="field" type="checkbox" value="incorrect" />
Acute bronchitis</p>
<div class="correct" style="margin-left:20px;"><font color="#008000">Correct</font></div>
<div class="incorrect" style="margin-left:20px;"><font color="#FF0000">Incorrect</font></div>
<div class="explanation" style="margin-left:20px;">Although the patient has a productive cough, he also has an infiltrate on chest x-ray.</div>
<p style="margin-bottom:0px">
<input id="check2" name="field" type="checkbox" value="correct" />
Community-acquired pneumonia</p>
<div class="correct" style="margin-left:20px;"><font color="#008000">Correct</font></div>
<div class="incorrect" style="margin-left:20px;"><font color="#FF0000">Incorrect</font></div>
<div class="explanation" style="margin-left:20px;">The chest x-ray shows a definite infiltrate.</div>
<p style="margin-bottom:0px">
<input id="check3" name="field" type="checkbox" value="incorrect" />
Health-care associated pneumonia</p>
<div class="correct" style="margin-left:20px;"><font color="#008000">Correct</font></div>
<div class="incorrect" style="margin-left:20px;"><font color="#FF0000">Incorrect</font></div>
<div class="explanation" style="margin-left:20px;">The patient was not a resident in a nursing home or other long-term care facility.</div>
<p style="margin-bottom:0px">
<input id="check4" name="field" type="checkbox" value="incorrect" />
Lung cancer</p>
<div class="correct" style="margin-left:20px;"><font color="#008000">Correct</font></div>
<div class="incorrect" style="margin-left:20px;"><font color="#FF0000">Incorrect</font></div>
<div class="explanation" style="margin-left:20px;">Although an obstructing cancer may cause an infiltrate, it is not the most likely cause of this patient’s acute symptoms.</div>
<p> <br />
<input type="submit" value="Submit" id="ex3" onclick="show_all();" >
</p>
</div>
</div>
<!-- Second Column -->
<div class="col-md-3">
<div class="bootstrap-demo">
<!-- content goes here -->
<p>Click <a class="fancybox fancybox.iframe" href="relevant_testing_all.html">here</a> to see the tests and explanations for this diagnosis</p>
</div>
</div>
<div class="col-md-3"> <img src="../img/patient-001.png" width="231" height="184" alt="Patient 001" /></div>
</div>
</div>
</form>
</div>
<!-- Bootstrap script -->
<script type="text/javascript" language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../lightbox/js/lightbox.min.js"></script>
<link href="../lightbox/css/lightbox.css" rel="stylesheet" type="text/css" />
<script type='text/javascript'>
$(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
});
});
</script>
<script type="text/javascript">
var one="";
var two="";
function check(browser)
{
//document.getElementById("answer").value = browser
one = browser
updateIt()
}
function check1(browser)
{
//document.getElementById("answer").value += " " + browser
two = browser
updateIt()
}
function updateIt()
{
document.getElementById("answer").value = one +" "+ two
}
</script>
<!--Script to call limit checkbox code-->
<script type="text/javascript">
//Syntax: checkboxlimit(checkbox_reference, limit)
checkboxlimit(document.forms.limit.field, 1)
</script>
As of right now your code is not "determining if the user checked the right box, displaying the answer and explanation" as you explained but that is OK and easy to implement after. Here is the answer to your question.
You should replace your id="ex3" button with the anchor tag code provided below (anchor tag is for simplicity but you can use another element to call the function with a click event). Either way, you do not need to submit a form as you are not posting information according to your requested behavior.
<a id="ex3" href="javascript:disablefields()">submit</a>
Update your function with this:
function disablefields() {
{
document.getElementById('check1').disabled = 'disabled';
document.getElementById('check2').disabled = 'disabled';
document.getElementById('check3').disabled = 'disabled';
document.getElementById('check4').disabled = 'disabled';
document.getElementById('ex3').disabled = 'disabled';
document.getElementById('ex3').innerHTML = 'Answers Submitted';
}
}
You will then get the exact behavior requested in your question minus the validation process that you described. It is easy to add that to this solution with a conditional statement or calling a validation function and then if valid calling the disablefields function.
function formVal() {
{
//put all of your validation requirements here and see if
var isValid = [check form function here]
if(isValid){
disablefields();
}else {
//send a message to user to correct fields and do not disable
}
<a id="ex3" href="javascript:formVal()">submit</a>
If you do choose to submit the information to the server at some later date simply make an AJAX call sending the form information after your disablefields call.
Fixed it by calling both function from the onClick and changing the type to button.
<input type="button" value="Submit" id="ex3" onclick="show_all(); disablefields();" >
Problem in Firefox, but ok with Internet Explorer.
I tried a lot but not solve yet. Please help me.
Actually the problem over here is that, it is not in formatte order in firefox. but is displaying on in internet explorer.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HOME</title>
<link rel="stylesheet" href="dropdown.css" type="text/css" />
<script type="text/javascript" src="dropdown.js"></script>
<!-- /* below javascript function is to handle the "Enter" key form submission */ -->
<script language="javascript">
</script>
<script type="text/javascript">
function change1(){
document.getElementById('id1').style.display='block'
document.getElementById('id2').style.display='none'
document.getElementById('id3').style.display='block'
document.getElementById('id4').style.display='none'
document.getElementById('body1').style.display='block'
document.getElementById('body2').style.display='none'
document.home_page.reg_id.focus();
}
function change2(){
document.getElementById('id1').style.display='none'
document.getElementById('id2').style.display='block'
document.getElementById('id3').style.display='none'
document.getElementById('id4').style.display='block'
document.getElementById('body1').style.display='none'
document.getElementById('body2').style.display='block'
document.home_page.uname.focus();
}
</script>
<!-- end of "enter" key handling functions. -->
</head>
<form method="POST" action="home_page.php" name="home_page">
<table width="320" height="200" border="1">
<tr style="width:315px;" align="center">
<td align="center" style="background-repeat:no-repeat;" bgcolor="#000099" width="155" height="28" id="id1" onClick="change1()"></td>
<td align="center" bgcolor="#009900" style="display:none; background-repeat:no-repeat;" width="155" height="28" id="id2" onClick="change1()"></td>
<td align="center" style="background-repeat:no-repeat;" bgcolor="#009900" width="155" height="28" id="id3" onClick="change2()"></td>
<td align="center" bgcolor="#000099" style="display:none; background-repeat:no-repeat;" width="155" height="28" id="id4" onClick="change2()"></td>
</tr>
<tr>
<td colspan="2" id="body1">
<table width="318" height="44" border="0">
<tr>
<td width="318" height="40" align="center">
<span class="loginstyle3">Registration Status</span>
</td>
</tr>
</table></td>
<td colspan="2" id="body2" style="display:none;">
<table width="318" height="45" border="0">
<tr>
<td width="107" height="41" align="center" background="images/glossy1grey.gif">
<span class="loginstyle3">Login Entry </span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- below block of code is to set login page after login attempt and failed -->
<script type="text/javascript">change2()</script>
</form>
</body>
</html>
I don't think that setting table cells (<td> elements) to be "display: block" is going to work out well in Firefox. Table cells have their own "display" type, and if you make them "display: block" the browser is going to do what you ask. Note that "display: block" is not simply the opposite of "display: none".
Try using "display: table-cell" instead of "block".
edit — I've tried this and it's definitely what the problem is.
Your problem in FF
document.home_page.uname is undefined
Line 27
The problems you have are
your TD is inheriting the height=200 from the TABLE
your TD has display: block which forces it onto a new line
Why are you using tables for this? They add a lot of extra, unnecessary tags. Have a read up on CSS, it's the future (and the present..)!
The most obvious thing to me is that you use self closing <LINK> and <META> tags in what is probably not a XHTML file. Those are meant to be left open. Try
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HOME</title>
<link rel="stylesheet" href="dropdown.css" type="text/css" >
instead.
IIRC Firefox does not read the link to your css file if the tag is self closing, because it is presumed empty.