jQuery Form Events
Use submit, named controls and explicit validation rather than relying only on a mouse click.
How it works
The submit event covers native form submission paths, including keyboard activation. preventDefault is appropriate when a handler intentionally replaces navigation with a local preview. serializeArray reads successful named controls, but it does not validate their meaning or authorize a request. This example checks a small quantity string and displays an honest local result. It sends nothing and stores no borrower information.
Run in a separate local browser lab
Save this complete HTML source as index.html in an empty folder. Put the pinned full jQuery 4.0.0 file beside it and preserve the MIT licence notice. The document includes its own CSS and JavaScript. Bhylu’s shared website theme does not load jQuery globally.
Open index.html directly in a normal browser. You may also use the optional loopback fixture server with Node 22 if you want the same HTTP setup as the network lessons.
jQuery examples do not run in Bhylu’s current playground: it blocks external libraries and network access. No Apache, MySQL or website configuration change is needed. Review the full-build setup before using Ajax, effects or plugins.
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Handle a Form as a Form</title>
<style>
:root {
font:
18px/1.6 system-ui,
sans-serif;
color: #16304e;
background: #fff;
color-scheme: light;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
main {
max-width: 50rem;
margin: auto;
padding: 1.25rem;
}
h1 {
font-size: 1.8rem;
line-height: 1.2;
}
h2 {
font-size: 1.3rem;
}
button,
input,
select,
textarea {
font: inherit;
max-width: 100%;
}
button {
margin: 0.2rem;
padding: 0.4rem 0.7rem;
background: #034fa0;
color: white;
border: 1px solid #034fa0;
border-radius: 0.3rem;
}
button:disabled {
opacity: 0.6;
}
label {
display: block;
margin: 0.5rem 0;
}
input:not([type='checkbox']),
select,
textarea {
display: block;
padding: 0.3rem;
}
a {
color: #034fa0;
}
output {
display: block;
}
article,
section,
fieldset {
padding: 0.75rem;
margin-block: 0.75rem;
border: 1px solid #a9bcd1;
}
ul {
padding-left: 1.5rem;
}
:focus-visible {
outline: 3px solid #0078d4;
outline-offset: 3px;
}
.chosen {
border: 3px solid #0078d4;
}
.highlight {
font-weight: 700;
}
.muted {
opacity: 0.7;
}
pre {
white-space: pre-wrap;
overflow-wrap: anywhere;
}
:root[data-theme='dark'] {
color: #d6e7fb;
background: #061d30;
color-scheme: dark;
}
:root[data-theme='dark'] a {
color: #8ecbff;
}
</style>
</head>
<body>
<main>
<h1>Neighbourhood book swap</h1>
<form id="request">
<label>Book title<input name="title" required value="River Paths" /></label
><label>Copies, 1 or 2<input name="copies" required value="1" /></label
><button type="submit">Preview request</button>
</form>
<output></output>
</main>
<script src="jquery.min.js"></script>
<script>
jQuery(function ($) {
$('#request').on('submit.swap', function (event) {
event.preventDefault();
const fields = $(this).serializeArray();
const data = Object.fromEntries(
fields.map((field) => [field.name, field.value]),
);
const title = data.title.trim();
$('output').text(
title && /^[12]$/.test(data.copies.trim())
? 'Local preview: ' + data.copies.trim() + ' × ' + title + '. Not sent.'
: 'Check title and copies',
);
});
});
</script>
</body>
</html>
Expected result
A valid edit gives a local preview; quantity zero gives the validation message.
Repeated names need an array-aware contract rather than Object.fromEntries, which would retain only one value per key. Disabled controls and unchecked checkboxes do not appear like ordinary text fields in serialization. A real endpoint needs server validation, authentication where applicable and a CSRF strategy; a form handler is only the browser side of that workflow.
Use jQuery’s official API documentation for exact method and return contracts.