jQuery Form Values
Use val for form editing and normalize only at a deliberate validation or submission boundary.
How it works
val reads a control’s value and can set it. It is different from reading the value attribute, which describes markup/default state rather than every later edit. The example reads a title when a button is pressed and displays a trimmed local preview. The input keeps the user’s exact editing value until that action. A val setter does not automatically mean a user input or change event has occurred.
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 Read a Field’s Current Value</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>
<label>Book title<input id="title" value="River Paths" /></label
><button id="preview">Preview title</button><output></output>
</main>
<script src="jquery.min.js"></script>
<script>
jQuery(function ($) {
$('#preview').on('click', function () {
const title = String($('#title').val()).trim();
$('output').text(title ? 'Local title: ' + title : 'Enter a title');
});
});
</script>
</body>
</html>
Expected result
Editing the field and selecting Preview displays its current trimmed title, or a useful empty message.
For a multi-select, val can return an array; do not force every control through a text-only handler. An input’s current value does not establish that it is valid or saved. A server must validate a real submission again. If another feature listens for change, explicitly decide whether a programmatic setter should trigger that event rather than assuming val does it.
Use jQuery’s official API documentation for exact method and return contracts.