JavaScript Forms and Client/Server Validation

Text input values arrive as strings. In JavaScript, adding two strings concatenates them: "4"+"3" gives "43". Convert the intended numerical value before arithmetic, and handle invalid or empty input deliberately. Number("") produces zero, so a blank check must happen first when blank should be rejected.

The example allows a whole-number quantity from 0 through 20 and charges 3 units per item. Number.isInteger rejects non-integer values and non-finite results; range checks enforce this exercise’s bounds. The function returns display text, separating calculation from the event handler. These APIs are introduced here; the important exam skill is following the values and control flow rather than memorising every browser API detail.

The HTML creates a form, a quantity input and an output paragraph. document.getElementById obtains the specified element. The submit listener passes the event to updateTotal, which prevents the default submission for this local demonstration, reads the value, calls the function and writes its result into the output.

textContent sets plain text; it does not interpret the supplied string as HTML. OCR’s guide also illustrates innerHTML, which parses markup and therefore needs care with untrusted input, and alert or document.write output. The script element can load or contain JavaScript; here it should be placed after the shown elements or run once they exist. The example makes no network request.

Client-side processing can provide immediate feedback and reduce avoidable server requests, but users can alter or bypass it. Server-side code must enforce permissions, validate submitted values and calculate authoritative outcomes such as payment totals. Sending a modified request does not require using the displayed form.

Server processing can centralise shared data and keep private implementation details away from the client, but needs connectivity and server resources. Client processing uses the user’s device and can work locally for suitable tasks. A useful comparison considers responsiveness, connectivity, trust and maintenance. Browser code does not become trusted merely because it was originally downloaded from the server.

<form id="order">
  <input id="quantity" type="text" name="quantity" aria-label="Quantity">
  <input type="submit" value="Calculate">
</form>
<p id="total" aria-live="polite">Enter a quantity</p>

function totalCost(text) {
  if (text.trim() === "") return "Enter a quantity";
  const quantity = Number(text);
  if (!Number.isInteger(quantity) || quantity < 0 || quantity > 20) {
    return "Enter a whole number from 0 to 20";
  }
  return "Total: " + (quantity * 3);
}
function updateTotal(event) {
  event.preventDefault();
  const text = document.getElementById("quantity").value;
  document.getElementById("total").textContent = totalCost(text);
}
document.getElementById("order").addEventListener("submit", updateTotal);

Attempt the task before opening its worked response. Record each change of state, explain the rule used, and check the result against the original requirements. Code examples labelled Python 3 use that language’s conventions; pseudocode states its own assumptions.