jQuery – Set Value of TextArea and Input

  • by
Post Views: 709

We can use .val() method to set the value of a textArea or a input field on a HTML page. Below example demonstrates how we can set the values of both the elements using jQuery. In the example, we are setting the input field value to current system DateTime using Javascript Date() and browser information again using Javascript navigator object.

Syntax: 

$('#idOfTheElement').val('value');

Suppose the field name is txtArea1 and value we need to set is “Sample text”, final code to set its value would be:

$('#txtArea1').val('Sample text');

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo 5thJune2021 02:11 PM</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

</head>
<body style="padding:10px;background-color:#f5f5f5">
<table class="table table-striped">
<tr>
<td>System DateTime: </td>
<td><input id="txtDate" value="" class="form-control"/></td>
</tr>
<tr>
<td>Browser Info:</td>
<td><textarea id="txtBrowserInfo" class="form-control"></textarea></td>
</tr>
</table>

<script>
$('#txtDate').val(new Date().toLocaleString());

$('#txtBrowserInfo').val(navigator.appName + " Version:" + navigator.appVersion);
</script>
</body>

</html>

Output:

jQuery-set-values-of-textArea-and-input-fields-html

Also see:

Javascript – Creating a minimal design digital clock.
Amazing Digital Clock CSS designs using Javascript.
Getting values of selected Radio Button using jQuery
jQuery: How to Get, Set and Remove Attribute
HTML showing Notifications using jQuery
jQuery DataTable custom dark theme
Custom CSS designs for jQuery DataTable.