CODEWITHSUNDEEP
javascripthtml
user2042156
user2042156

Reputation: 119

Getting an Udefined value for a function in JS

getting undefined as a return type for the method validateHallticket please check the code & modify accordingly so, that when i click the submit button i should able to get the appropriate return types.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>4Cubes Site</title>
    <script type="text/javascript">
      function validateForm(form) {
      document.writeln(validateNames(form["firstname"]));         
      document.writeln(validateHallticket(form["hallticket"])); // getting undefined value 
          if (validateNames(form["firstname"]) && validateHallticket(form["hallticket"])) {
              form.sub`enter code here`mit();
          }
          else {
              alert("Please Fill the required Fields");
          }
      }

      function validateNames(inputField) {
          Names_help = document.getElementById('lastname_help');
          if (inputField.value.length == 0) {
              if (Names_help!= null) {
                  Names_help.innerHTML = "Please Enter a validate Name";              
                  return false;
              }
          }
          else {
              Names_help.innerHTML = "";
              return true;
          }

      }

      function validateHallticket(inputField) {

          var regex = /^\d{2}K91A\d{4}$/;
          var rs = regex.test(inputField.value);
          hallticket_help = document.getElementById('hallticket_help');

          if (!regex.test(inputField.value)) {
              if (hallticket_help != null) {
                  hallticket_help.innerHTML = "Enter a valid hallticket";
                  return false;
              }
          }
          else {
              hallticket_help.innerHTML = "";
              return true;
          }

      }
    </script>
  </head>
  <body>
    <center>
      <font face="Arabic Transparent" size="6" color="Teal">4cUBeS College</font>
    </center>

    <br></br>

    <br></br>

    <form method="post" action="servlet.do" name="myform">
      HallTicket:
      <input type="text" name="hallticket" id="hallticket"
             onblur="validateHallticket(this)"></input>
      <span id="hallticket_help" style="color:Red; font-style:italic;"> </span>
      <br></br>
      FirstName:
      <input type="text" name="firstname" id="firstname"
             onblur="validateNames(this)"></input>
      <span id="firstname_help" style="color:Red; font-style:italic;"> </span>
      <br></br>
      LastName:
      <input type="text" name="lastname" id="lastname"
             onblur="validateNames(this)"></input>
      <span id="lastname_help" style="font-style:italic; color:Red;"> </span>

      <center>
        <input type="button" value="SUBMIT" onclick="validateForm(this.form);"></input>

      </center>
    </form>
  </body>
</html>

Upvotes: 0

Views: 76

Answers (2)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

This is because, the function loads before the DOM loads. Try moving the <script> tag just before </body> and it works.

Notes

  1. Add return false; when invalid.
  2. Add the handler to the onsubmit event of the <form> tag.

Full Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>4Cubes Site</title>
  </head>
  <body>
    <center>
      <font face="Arabic Transparent" size="6" color="Teal">4cUBeS College</font>
    </center>

    <br></br>

    <br></br>

    <form method="post" action="servlet.do" name="myform" onsubmit="return false;">
      HallTicket:
      <input type="text" name="hallticket" id="hallticket"
             onblur="validateHallticket(this)"></input>
      <span id="hallticket_help" style="color:Red; font-style:italic;"> </span>
      <br></br>
      FirstName:
      <input type="text" name="firstname" id="firstname"
             onblur="validateNames(this)"></input>
      <span id="firstname_help" style="color:Red; font-style:italic;"> </span>
      <br></br>
      LastName:
      <input type="text" name="lastname" id="lastname"
             onblur="validateNames(this)"></input>
      <span id="lastname_help" style="font-style:italic; color:Red;"> </span>

      <center>
        <input type="button" value="SUBMIT" onclick="return validateForm(this.form);"></input>

      </center>
    </form>
    <script type="text/javascript">
      function validateForm(form) {
      document.writeln(validateNames(form["firstname"]));         
      document.writeln(validateHallticket(form["hallticket"])); // getting undefined value 
          if (validateNames(form["firstname"]) && validateHallticket(form["hallticket"])) {
              form.submit();
          }
          else {
              alert("Please Fill the required Fields");
          }
        return false;
      }

      function validateNames(inputField) {
          Names_help = document.getElementById('lastname_help');
          if (inputField.value.length == 0) {
              if (Names_help!= null) {
                  Names_help.innerHTML = "Please Enter a validate Name";              
                  return false;
              }
          }
          else {
              Names_help.innerHTML = "";
              return true;
          }
        return false;
      }

      function validateHallticket(inputField) {

          var regex = /^\d{2}K91A\d{4}$/;
          var rs = regex.test(inputField.value);
          hallticket_help = document.getElementById('hallticket_help');

          if (!regex.test(inputField.value)) {
              if (hallticket_help != null) {
                  hallticket_help.innerHTML = "Enter a valid hallticket";
                  return false;
              }
          }
          else {
              hallticket_help.innerHTML = "";
              return true;
          }
          return false;
       }
    </script>
  </body>
</html>

Fiddle: http://jsbin.com/apuyaw/1

Upvotes: 1

Ajain Vivek
Ajain Vivek

Reputation: 1121

Put your script tag before ending body tag because you currently dont hav the reference of the element

<body>
<script>
your code in here
</script>
</body>

Upvotes: 0

Related Questions