Home/ Questions/Q 7073519
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T05:56:21+00:00

Here’s a sample form: <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd> <html> <head>

  • 0

Here’s a sample form:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sample form</title>
<script type="text/javascript">
function displayResult() {
alert(document.myForm.myInput.value);
}
function getFocus() {
  if (document.myForm.myInput.value == document.myForm.myInput.defaultValue) {
    document.myForm.myInput.value = "";
  }
}
function loseFocus() {
  if (document.myForm.myInput.value == "") {
    document.myForm.myInput.value = document.myForm.myInput.defaultValue;
  }
}
</script>
</head>
<body>
    <form name="myForm" method="get" onsubmit="return false;" action="">
        <input name="myInput" value="Hello world!" onfocus="getFocus();" onblur="loseFocus();"><br>
        <input type="button" onclick="displayResult();" value="Display input value">
    </form>
</body>
</html>

It works with no problem, but the following doesn’t although the variable x seems right:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sample form</title>
<script type="text/javascript">
var x = document.myForm.myInput;
function displayResult() {
alert(x.value);
}
function getFocus() {
  if (x.value == x.defaultValue) {
    x.value = "";
  }
}
function loseFocus() {
  if (x.value == "") {
    x.value = x.defaultValue;
  }
}
</script>
</head>
<body>
    <form name="myForm" method="get" onsubmit="return false;" action="">
        <input name="myInput" value="Hello world!" onfocus="getFocus();" onblur="loseFocus();"><br>
        <input type="button" onclick="displayResult();" value="Display input value">
    </form>
</body>
</html>

What’s wrong with it and how can I define a global variable to be used by all the functions?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your variable x is assigned the document.myForm.myInput value before the DOM is ready.
    You could place the script after your form and myInput elements have been declared, set the script to run in the onload event, or use jQuery’s on document ready support (other js libraries offering similar support are available).

    Option 1:

    <body>
  <form name="myForm">
    <input name="myInput"> ...
  </form>
  <script>
    ...
  </script>
</body>

    Option 2:

    window.onload = function(){
  var x = document.myForm.myInput;
  ...
};

    Option 3:

    (function($) {
   $(function() {
     var x = document.myForm.myInput;
     ...
   });
}(window.jQuery));
    • 0