This document discusses using JavaScript to input and output data in web forms. It explains how to create basic form controls like text boxes and submit buttons using HTML tags. It also demonstrates how to use JavaScript functions to retrieve input data and display output by modifying the HTML document. The code example shows getting input values, concatenating them into a string, and writing the output to a specific HTML element using JavaScript.

1. OCR H046/H466
SLR12 Web technologies | JavaScript
Inputting data
• Form controls can be inserted into a web page using a <form> tag.
• The action attribute tells the browser it needs to send any submitted form data to a page on the server called action_page.php.
• This PHP file handles the server’s processing of the form data. However, PHP is beyond the scope of the specification.
• You will not be expected to memorise this – exam questions will focus on what is done with the input once it is received.
My first form
<form id="form1" action="/action_page.php">

2. OCR H046/H466
SLR12 Web technologies | JavaScript
Inputting data
• Simple text boxes and buttons are defined with the <input> tag. The type attribute determines the type of input – for example:
o Text box: type="text"
o Submit button: type="submit"
• Notice how the inputs are given an id (e.g., id=“forename“) – this is essentially a variable, so you can refer to it using JavaScript.
• You only need to know about creating a text input and submit button for the exams, although other input options can be achieved in a
similar way using alternative tags.
My first form
<input type="text" id=“forename" name=" forename ">

3. OCR H046/H466
SLR12 Web technologies | JavaScript
Outputting data
• Here, we have used a button outside the form which, when clicked, will trigger the JavaScript code below inside the <script> tags.
• The onclick="myFunction()" part is telling the browser the name of the JavaScript function it needs to run when the button is clicked.
My first form
<button onclick="myFunction()">Try Javascript</button>

4. OCR H046/H466
SLR12 Web technologies | JavaScript
Outputting data
• The next line is an output identifier used to capture the output from the JavaScript code.
My first form
<p id="output_here"></p>

5. OCR H046/H466
SLR12 Web technologies | JavaScript
Outputting data
• The actual JavaScript code is enclosed in a set of HTML <script> tags.
• Notice how JavaScript code is similar to code from the language you have been learning but with slightly different syntax.
• You will need to be familiar with the JavaScript equivalents of the structures mentioned in the specification.
My first form

6. OCR H046/H466
SLR12 Web technologies | JavaScript
Outputting data
• Lets look at JavaScript code in more detail – you will already be familiar with many of the programming concepts:
o Command lines are terminated with a semicolon.
o Curly brackets are used to define sections of code.
o Functions are defined.
o Variables are defined.
o For loops work.
My first form
function myFunction() {
var x = document.getElementById("form1");
var text = "";
var i;
for (i = 0; i < x.length ;i++) {
data = x.elements[i].value;
if (data!="Submit") {
text += "Your name was entered as " + data + ".";
}
}
document.getElementById("output_here").innerHTML = text;
}

7. OCR H046/H466
SLR12 Web technologies | JavaScript
Outputting data
• Lets look at JavaScript code in more detail – you will already be familiar with many of the programming concepts:
o An array of inputs can be referred to.
o Variables are assigned values.
o An if condition can be used for selection.
o The output is returned to the page.
My first form
function myFunction() {
var x = document.getElementById("form1");
var text = "";
var i;
for (i = 0; i < x.length ;i++) {
data = x.elements[i].value;
if (data!="Submit") {
text += "Your name was entered as " + data + ".";
}
}
document.getElementById("output_here").innerHTML = text;
}

8. OCR H046/H466
SLR12 Web technologies | JavaScript
Outputting data
• The above code changes the contents of an existing HTML element called output_here.
• You can write directly to the document using: document.write("Hello World");
• You can also use pop-up alert boxes: alert("Hello World");
My first form