- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How Can Calculate HTML Input Values And Show Directly Input Value By JQuery?
There are several JavaScript methods we can use to retrieve the value of the text input field. We may access or set the value of the text input field inside the script by using the jQuery .val() method.
The task we are going to perform in this article is calculating HTML input values and showing them directly using JQuery. Let’s dive into the article for a better understanding.
Using JQuery val() method
To retrieve the values of form components like input, select, and textarea, utilize the .val() function. It returns undefined when called on a collection that is empty.
Syntax
Following is the syntax for .val() method
$(selector).val()
Example
In the following example, we are running the script for calculating HTML input values and displaying them directly on the webpage.
<!DOCTYPE html>
<html>
<body style="text-align:center; background-color:#D5F5E3;">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="tutorial">
<form>
<div class="tutorial">
<label for="">ActualPrice</label>
<input type="text" id="price" required class="price form-control" />
</div>
<div class="tutorial">
<label for="">Discount</label>
<input type="text" id="discount" required class="discount form-control" />
</div>
<div class="tutorial">
<label for="">Amount</label>
<input type="text" id="amount" required class="amount form-control" readonly />
</div>
<button type="submit">Pay</button>
</form>
</div>
<script>
$('form input').on('keyup', function() {
$('#amount').val(parseInt($('#price').val() - $('#discount').val()));
});
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of input fields along with a click button on the webpage. When the user starts entering the values, it performs a subtraction between the price and the discount and displays the amount.
Example
Considering the following examples, where we are running the script to get the input values displayed directly on the webpage.
<!DOCTYPE html>
<html>
<body style="text-align:center; background-color:#E8DAEF;">
<style>
div {
color: #DE3163;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name" id="tutorial">
<div></div>
<script>
$("#tutorial").keyup(function(event) {
text = $(this).val();
$("div").text(text);
});
</script>
</body>
</html>
On running the above script, the output window will pop up, displaying the input field on the webpage. When the user begins filling out the input field, the text is directly displayed on the webpage applied with CSS.
Example
Execute the script below to see how we make the input text appear directly on the webpage.
<!DOCTYPE html>
<html>
<body style="background-color:#CCCCFF">
<input type="text" id="tutorial">
<button type="button" id="tutorial1">Click To Show Value</button>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$("#tutorial1").click(function() {
var result = $("#tutorial").val();
alert(result);
});
})
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of an input field along with a click button on the webpage. When the user enters the text and clicks the button, it will display an alert consisting of input field text on the webpage.
262 Views
