Scan the QR code below to view the web page version :
| <label for="fname">First name:</label> <input type="text" id="fname" name="fname"> <br> |
| <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"> <br> |
| <button class="confirm" onclick="register()">Confirm</button> |
| 1. |
You may get the value of the text field and alert it by these
codes (by jQuery):
function register() {
var x = $("#lname").val();
var y = $("#fname").val();
alert("Welcome, " + x + " " + y + "!");
}
|
| 2. |
You may get the value of the text field and alert it by these
codes (by DOM):
function register() {
var x = document.getElementById("lname").value;
var y = document.getElementById("fname").value;
alert("Welcome, " + x + " " + y + "!");
}
|
| <h2>Which subject do you like the most?</h2> |
| <input type="radio" name="subject" value="ICT" id="ict" checked> <label for="ict">ICT</label> |
| <input type="radio" name="subject" value="MATHS" id="maths"> <label for="maths">MATHS</label> |
| <input type="radio" name="subject" value="M2" id="m2"> <label for="m2">M2</label> <br> <br> |
| <button class="confirm" id="confirmSubjectBtn">Confirm</button> <br> |
| <u> <div id="outputSubject"></div> </u> <br> |
| 1. | Never call the radio button vaule by using ID as ID is unique. |
| 2. | Put the script in HTML document if $(document).ready() function is used as it only work in the same document. |
| 3. |
You may get the value of the selected radio button and display it
by these codes (by jQuery event listener):
$(document).ready(function () {
$("#confirmSubjectBtn").click(function () {
var e = $("outputSubject");
var subject = $("[name=subject]:checked").val();
e.innerHTML = "You like " + subject + " the most.";
});
});
|
| 4. |
You may get the value of the selected radio button and display it
by these codes (by DOM event listener):
const btn = document.getElementById("confirmSubjectBtn");
btn.addEventListener("click", (event) => {
var e = document.getElementById("outputSubject");
var selectedVal =
document.querySelector("input[name='subject']:checked").value;
e.innerHTML = "You like " + selectedVal + " the most.";
})
|
|
<input id="tripDate" type="date" min="2025-09-01"
max="2025-09-15" value="2025-09-01"> <br> <br> <button onclick="tripDate()" class="confirm">Confirm</button> <br> <br> <u> <div id="outputTripDate"></div> </u> <br> |
| 1. | min and max attributes constraint the range of dates allowed to be inputted. |
| 1. |
Complete version to get the inputted date:
function tripDate() {
var x = document.getElementById("tripDate").value;
var e = document.getElementById("outputTripDate");
e.innerHTML = "Your trip was at " + x + ".";
}
|
| <select name="cars" id="cars"> |
| <option value="A">Car A</option> |
| <option value="B" selected="selected">Car B</option> |
| <option value="C">Car C</option> |
| <option value="D">Car D</option> |
| </select> |
|
<button onclick="car()" class="confirm">Confirm</button>
<br> <br> <u> <div id="outputCar"></div> </u> <br> |
| 1. |
You may get the HTML text of the selected option by these codes:
var e = document.getElementById("cars");
var text = e.options[e.selectedIndex].text; |
| 2. |
You may get the value of the selected option by these codes:
var e = document.getElementById("cars");
var value = e.value; |
| 3. |
Complete version to get the choosen car:
function car() {
var x = document.getElementById("cars");
var y = x.options[x.selectedIndex].text;
var e = document.getElementById("outputCar");
e.innerHTML = "Your like " + y + " the most";
}
|
|
<input id="hiking" type="checkbox" name="interest[]"
value="hiking"> <label for="hiking">Hiking</label> <input id="swimming" type="checkbox" name="interest[]" value="swimming"> <label for="swimming">Swimming</label> <br> <br> <button onclick="interest()" class="confirm">Confirm</button> <br> <br> <u> <div id="outputInterest"></div> </u> <br> |
| 1. |
Complete version to get all selected interests:
function interest() {
var x = document.getElementsByName("interest");
var y = "";
var e = document.getElementById("outputInterest");
for (i = 0; i < x.length; i++) {
if (x[i].checked) {
y += x[i].value + ", ";
}
}
e.innerHTML = "Your interest(s): " + y;
}
|
| 1. |
You should always define the
name
attribute for every <input> element. It is recommended that the name attribute should describe the data filled in the <input>. (e.g. full_name, password, email and etc.) |
button |
checkbox |
color |
date |
datetime-local |
|
file |
hidden |
image |
month |
number |
password |
radio |
range |
reset |
search |
submit |
tel |
text(default value) |
time |
url |
week |