jQuery Set Input Value Example

Free Online HTML Editor

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery Set Input Value and Update Table</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	<style>
		body {
			font-family: sans-serif;
			padding: 30px;
			background: #f9f9f9;
		}

input {
			padding: 8px;
			width: 250px;
			margin-top: 10px;
			display: block;
			border: 1px solid #ccc;
			border-radius: 4px;
		}

button {
			margin-top: 15px;
			padding: 10px 15px;
			background: #17a2b8;
			color: white;
			border: none;
			border-radius: 4px;
			cursor: pointer;
		}

button:hover {
			background: #138496;
		}

table {
			margin-top: 30px;
			border-collapse: collapse;
			width: 100%;
			max-width: 500px;
			background: #fff;
			border: 1px solid #ccc;
		}

th, td {
			padding: 10px;
			border: 1px solid #ccc;
			text-align: left;
		}

th {
			background-color: #f1f1f1;
		}
	</style>
</head>
<body>

<h1>jQuery Set Username Example</h1>
	<p>This example shows the current user info and allows updating the username field based on input.</p>

<label for="usernameInput">New Username:</label>
	<input type="text" id="usernameInput" placeholder="Type new username">

<button id="setUsername">Update Username</button>

<table id="userTable">
		<tr>
			<th>Username</th>
			<th>Email</th>
		</tr>
		<tr>
			<td id="displayUsername"></td>
			<td id="displayEmail"></td>
		</tr>
	</table>

// Show initial data
			$("#displayUsername").text(userData.username);
			$("#displayEmail").text(userData.email);

// On button click, update username based on input value
			$("#setUsername").click(function(){
				let newUsername = $("#usernameInput").val().trim();

if(newUsername !== ""){
					userData.username = newUsername;
					$("#displayUsername").text(userData.username);
				}
			});
		});
	</script>

</body>
</html>

Editor Commands

Ctrl

Find

Ctrl

Find Next

Ctrl

⇧

Find Previous

Ctrl

⇧

Find & Replace

Ctrl

]

Indent Code Right

Ctrl

[

Indent Code Left

⇧

Tab

Auto Indent Code

Ctrl

Line Comment

Ctrl

Alt

Block Comment

TutsInsider Actions

Alt

Run Code

Ctrl

Copy Editor Code

Ctrl

Select All Editor Code

Ctrl

Save/Download

Ctrl

Alt

Rotate

Ctrl

Alt

Switch Theme

Ctrl

⇧

Open Console

Esc

Close Console