Currently, I am working on creating a form for collecting passenger information at an airport. The form includes fields for first name, last name, passenger weight, and cargo weight. Upon submitting the form, I aim to display the entered information along with the total weights of passengers and cargo. The process is meant to continue until all passenger details are collected. Ultimately, I want to keep track of the total weight that the plane will be carrying.
I have already set up the form, but I am struggling to implement the functionality using my basic knowledge of JavaScript. I have assigned an onclick function to the submit button and defined it as follows:
<form id="Passenger-form" onsubmit="return false">
<label for="First-name">First name: </label>
<input type="text" name="First-name" placeholder="Please insert first name."><br>
<label for="Second-name">Second name: </label>
<input type="text" name="Second-name" placeholder="Please insert second name"> <br>
<label for="Passenger-weight">Passengers weight: </label>
<input type="number" name ="Passenger-weight" placeholder="Please enter passengers weight"><br>
<label for="cargo-weight">Cargo weight: </label>
<input type="number" name ="cargo-weight" placeholder="Please enter cargo weight"><br>
<input type="submit" name ="submit" onclick="showInput(); multiply(); ">
</form>
<p > <span id="display"></span></p>
<body>
<script language="JavaScript">
function showInput() {
document.getElementById('display').innerHTML =
document.getElementById("First-name").value +" "+ document.getElementById("Second-name").value;
}
function multiply(){
num1 = document.getElementById("Passenger-weight").value;
num2 = document.getElementById("cargo-weight").value;
document.getElementById("display").innerHTML = num1 + num2;
}
</script>
I know I still have a long way to go in resolving this issue, so any help would be greatly appreciated. Additionally, dealing with the JavaScript "+" sign has been particularly challenging for me as I struggle to use it as an operator.