Admission Enquiry Form: Strings, Validation and Resubmission
An admission enquiry form asks for the applicant's name, phone number, and marks in three subjects. A script is meant to calculate the total and average, show a grade, and block submission if any field is empty or the phone is not 10 digits. The current code reads values with document.getElementById('m1').value, computes total = m1 + m2 + m3, and writes the result with document.getElementById('out').innerHTML = name + ': ' + total. Validation runs in the form's onsubmit='return check()' but check() returns true unconditionally at the end. A student testing with marks 78, 85 and 66 sees '788566' as the total. Another student enters a name containing Rina and the page shows bold text. On a slow phone, tapping Submit twice sends two enquiries. The teacher wants a fix that works without any library and keeps the form usable when JavaScript is disabled.
1. Identify the causes of the wrong total and the bold name, and show corrected code for calculation and output.
Read the worked answer
.value always returns a string, so m1 + m2 + m3 concatenates: '78' + '85' + '66' = '788566'. Convert each value with Number() after checking that it is not empty, and reject non-finite results. parseInt() is not ideal because it accepts '78abc' as 78 and truncates decimals; Number() is stricter. For output, innerHTML parses the name as HTML, which is why Rina renders bold and also creates an XSS risk. Use textContent so the name is displayed literally. Example: const m1 = Number(document.getElementById('m1').value); if (document.getElementById('m1').value.trim() === '' || !Number.isFinite(m1)) { showError(); } Then const total = m1 + m2 + m3; const avg = total / 3; out.textContent = name + ': total ' + total + ', average ' + avg.toFixed(2); Add the grade from the average with an if/else chain.
2. Rewrite validation so empty fields and a non-10-digit phone are caught, and explain how to prevent double submission.
Read the worked answer
Use addEventListener('submit', handler) and call event.preventDefault() first, then validate. Check name.trim() !== '', each mark is a number from 0 to 100, and the phone matches /^[6-9]\d{9}$/ if it is an Indian mobile, or /^\d{10}$/ for a plain 10-digit rule. Build an errors array and show messages next to fields with textContent; return early without submitting if errors exist. To stop double submission, disable the submit button and set a submitting flag as soon as validation passes; re-enable it only if the request fails. Client-side checks give fast feedback but can be bypassed, so the server must repeat every check. Also use type='tel', inputmode='numeric', maxlength='10' and required as a baseline, but do not rely on them alone.
3. The teacher wants the form to remain usable without JavaScript. What should change, and why is client-side validation alone insufficient?
Read the worked answer
Make the form work as a normal HTML form: action='/enquiry' method='post', real name attributes, and a submit button, so it still submits if JavaScript fails. The server must validate the name, marks and phone, recalculate the total and grade, and reject invalid data; it should also use a CSRF token and an idempotency key or unique token to prevent duplicate enquiries from a double tap or a resubmitted request. JavaScript should enhance the page with a live total, inline error messages, and disabling the button after a valid submit. Add a noscript message. Client-side validation alone is insufficient because the user can disable JavaScript, edit the DOM, or send a request with curl; it is a convenience, not a security control. Also keep submitted data out of innerHTML to avoid XSS.