Preview

06 - Working with Forms (getElementbyID, features

1. The following produces a simple HTML form that asks for user input and has a submit button. What does the JavaScript do?

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}
</script>
</head>
<body>

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
  Name: <input type="text" name="fname">
  <input type="submit" value="Submit">
</form>

</body>
</html>

In this example, the JavaScript function is validating the input. A name must be present before pressing 'Submit'

In this example, the JavaScript is responsible for the creation of the input box and button

In this example, the JavaScript function is giving the variable 'x' the nane -f.name

None of the given answers are valid

2. In the following example, there is an error. Can you spot what it is?

<!DOCTYPE html>
<html>
<body>

<p>Enter names in the fields, then click "Submit" to submit the form:</p>

<form id="frm1" action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br><br>
  <input type="button" onclick="myFunction()" value="Submit">
</form>

<script>
function myForm() {
  document.getElementById("frm1").submit();
}
</script>

</body>
</html>

The name of the function is 'myForm', but the 'onclick' event is calling a function with a different name

The function 'myForm' should be moved outside the script tags and into the HTML

There are no errors - the form and submission would work perfectly

The whole line that creates the button, starting with "

3. Analyse the following code and decide which statement is accurate. Assume the input into the two text boxes is: "Test" and "Track"

<!DOCTYPE html>
<html>
<body>

<form id="frm1" action="/action_page.php">
  First name: <input type="text" name="fname" value="Donald"><br>
  Last name: <input type="text" name="lname" value="Duck"><br><br>
  <input type="submit" value="Submit">
</form> 


<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("frm1");
  var text = "";
  var i;
  for (i = 0; i < x.length ;i++) {
    text += x.elements[i].value + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

Only one button will be displayed on this form as only one is linked to JavaScript

Clicking the 'Submit' button will display the words 'Test, Track, Submit' underneath the button

There will be an error on clicking the 'Try it' button, as there is no valid JavaScript

Clicking the 'Try it' button will display the words 'Test, Track, Submit' underneath the button

4. What does the following JavaScript function do?

function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}

If a form field (fname) is empty, this function alerts a message, and returns false, to prevent the form from being submitted

It creates a variable called x and alerts a message if the value of x is set to false

If a form field (fname) has been filled in, this function alerts a message, and returns true, to prevent the form being submitted

If a form field (fname) is left blank, then this function returns true so that the form is still submitted

5. In the following example, can you fill in a comment that would be appropriate for //1. _________________

<!DOCTYPE html>
<html>
<body>
<p>Please input __________________________________:</p>

<input id="numb">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x, text;

  // 1. __________________________________________________
  x = document.getElementById("numb").value;

  // 2.___________________________________________________
  if (isNaN(x) || x < 1 || x > 10) {
    text = "Input not valid";
  } else {
    text = "Input OK";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

Get the value of 'id' only if 'numb' is entered in the textbox

Get the value of the output field with numb="id"

Get the value of the input field with id="numb"

Get the value of the input field with the text input that matches 'numb'

6. In the following example, can you fill in a comment that would be appropriate for //2. _________________

<!DOCTYPE html>
<html>
<body>
<p>Please input __________________________________:</p>

<input id="numb">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x, text;

  // 1. __________________________________________________
  x = document.getElementById("numb").value;

  // 2.___________________________________________________
  if (isNaN(x) || x < 1 || x > 10) {
    text = "Input not valid";
  } else {
    text = "Input OK";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

If x is not a number or less than 10 only

If x is not a number or less than one or greater than 10

If x is a number and is greater than 10

If x is not a text input or an integer between 1 to 10

7. What would the most appropriate instruction be in line 4 of this code?

<!DOCTYPE html>
<html>
<body>
<p>Please input __________________________________:</p>

<input id="numb">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x, text;

  // 1. __________________________________________________
  x = document.getElementById("numb").value;

  // 2.___________________________________________________
  if (isNaN(x) || x < 1 || x > 10) {
    text = "Input not valid";
  } else {
    text = "Input OK";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

a number that is less than 10

a number between 1 and 10

a number that is greater than 10 only

text only (no numbers)

8. Most often, the purpose of data validation is to ensure correct user input. Client side validation is performed by a web server, after input has been sent to the server.

FALSE

TRUE

9. Client side validation is performed by a web browser, before input is sent to a web server

FALSE

TRUE

10. On line 10, can you fill in the blanks with the text that would describe what the program does?

<!DOCTYPE html>
<html>
<body>

<p>Enter a number and click OK:</p>

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>

<p>If the number is ______________________________________________________.</p>

<p id="demo"></p>

<script>
function myFunction() {
  var inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  } else {
    document.getElementById("demo").innerHTML = "Input OK";
  } 
} 
</script>

</body>
</html>

less than 100 or greater than 300, an error message will be displayed

greater than 1 or less than 300, an error message will be displayed

either 100 or 300, an error message will be displayed

between 100 or 300, an error message will be displayed

11. The validity property of an input element contains a number of properties related to the validity of data. The use of it is shown here

 <input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>

<p id="demo"></p>

<script>
function myFunction() {
  var txt = "";
  if (document.getElementById("id1").validity.rangeOverflow) {
    txt = "Value too large";
  }
  document.getElementById("demo").innerHTML = txt;
}
</script>

FALSE

TRUE

12. If you enter '6' as the input in this example, what will the output message be?

<!DOCTYPE html>
<html>
<body>

<p>Enter a number and click OK:</p>

<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>

<p>If the number is less than 100 (the input's min attribute), an error message will be displayed.</p>

<p id="demo"></p>

<script>
function myFunction() {
  var txt = "";
  if (document.getElementById("id1").validity.rangeUnderflow) {
    txt = "Value too small";
  } else {
    txt = "Input OK";
  } 
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

Value too small

Input OK

Value too large

13. Which statement is true of the following code?

<script type = "text/javascript">
   <!--
      // Form validation code will come here.
      function validate() {
      
         if( document.myForm.Name.value == "" ) {
            alert( "Please provide your name!" );
            document.myForm.Name.focus() ;
            return false;
         }
         if( document.myForm.EMail.value == "" ) {
            alert( "Please provide your Email!" );
            document.myForm.EMail.focus() ;
            return false;
         }
         if( document.myForm.Zip.value == "" || isNaN( document.myForm.Zip.value ) ||
            document.myForm.Zip.value.length != 5 ) {
            
            alert( "Please provide a zip in the format #####." );
            document.myForm.Zip.focus() ;
            return false;
         }
         if( document.myForm.Country.value == "-1" ) {
            alert( "Please provide your country!" );
            return false;
         }
         return( true );
      }
   //-->
</script>

This code is validating the entry of a zip code to prevent numbers of any sort from being input

This code is calling the onsubmit function and shows the implementation of the onsubmit function to convert all input into uppercase (for postcode)

This code calls the validate() function but as there is no onsubmit event, it will not run

We are calling validate() to validate data when onsubmit event is occurring. The following code shows the implementation of this validate() function

14. Server-side validation is not as user-friendly as client-side validation, as it does not provide errors until the entire form has been submitted.

TRUE

FALSE

15. What statement is true of the following code that seeks to validate an input email address?

<script type = "text/javascript">
   <!--
      function validateEmail() {
         var emailID = document.myForm.EMail.value;
         atpos = emailID.indexOf("@");
         dotpos = emailID.lastIndexOf(".");
         
         if (atpos < 1 || ( dotpos - atpos < 2 )) {
            alert("Please enter correct email ID")
            document.myForm.EMail.focus() ;
            return false;
         }
         return( true );
      }
   //-->
</script>

All of the listed statements here are true of this code.

An email address must contain at least a ‘@’ sign and a dot (.)

The last dot must at least be one character after the ‘@’ sign

The ‘@’ must not be the first character of the email address

Report an error