JQuery #7: How to Fetch HTML Values with jQuery
In this advanced tutorial on learning jQuery in TechBriefers, I will discuss how to retrieve HTML element values using jQuery .
Fetching the value of an HTML element is quite common. Suppose I created the form field <input type=”text”> . How do I retrieve filled values using JavaScript?
With ‘pure’ JavaScript we can use the innerHTML property . But the method is quite long because it must be combined with the document.getElementById() function. I’ve made a tutorial in the Tutorial How to Fetch HTML Values with JavaScript .
With jQuery, the way is simpler and shorter.
How to retrieve HTML values with the jQuery text () method
The first method to retrieve the value of an HTML element with jQuery is to use the text() method . The trick is to simply add the text() method / function to the jQuery Selector.
Here’s an example of its use:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery Tutorial | Techbriefers</title>
<script src="jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("#mybutton").click(function() {
var getText = $("#mypara").text();
alert(getText);
})
});
</script>
</head>
<body>
<p id="mypara">
<em>JQuery</em> Tutorial By <b>Techbriefers</b>
</p>
<button id="mybutton">Click Here</button>
</body>
</html>See the Pen xxqEEMY by Techbriefers (@techbriefers) on CodePen.
To retrieve the text value that is in the <p id=”paragraph”> tag , I can use the $(“# paragraph”) command . text() . Then this value is stored in the value variable , then displayed with the alert function (value) .
If you click the “Get Value” button, the result is: “Currently learning jQuery at Techbriefers…” . Note that the text() method will remove all HTML tags contained in the <p> tag, such as <em> and <b> tags that are also inside the paragraph.
What if we also want to retrieve the values contained in the complete <p> tag along with the HTML tag? Use jQuery’s html() method.
How to retrieve HTML values with jQuery html() method
The next way to retrieve HTML values with jQuery is to use the html() method . It is used exactly the same as the text() method . The difference is, the result of the html() method will retain the HTML tags that are inside the HTML element.
Using the same example, here are the results obtained with the html() method :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Tutorial | Techbriefers</title>
<script src="jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("#mybutton").click(function() {
var getHtml= $("#mypara").html();
alert(getHtml);
})
});
</script>
</head>
<body>
<p id="mypara">
<em>JQuery</em> Tutorial By <b>Techbriefers</b>
</p>
<button id="mybutton">Click Here</button>
</body>
</html>How to retrieve HTML form values with jQuery val() method
Both the text() and html() methods are sufficient to retrieve the values present in each HTML element. But specifically for forms, jQuery provides a val() method . Immediately, we see an example of its use:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn jQuery | Techbriefers </title>
<script src="jquery-3.6.0.js"> </script>
<script>
$(document).ready(function() {
$("#button").click(function() {
var value = $("#name").val();
alert(value);
})
});
</script>
</head>
<body>
Name: <input type="text" id="name" value="Techbriefers ...">
<button id="button"> Fetch Value </button>
</body>
</html>This time I have a <input type = “text”> tag . Please immediately click the “Get Value” button, or change the text in the form input. The command $ (“#name”).val() will display whatever value you input into the form field.
What about other form objects like <select>?
The method is exactly the same, here is an example:
Please select a city name, then click the “Get Value” button. The return value comes from the value attribute of each <option> tag .
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn jQuery | Techbriefers </title>
<script src="jquery-3.6.0.js"> </script>
<script>
$(document).ready(function() {
$("#button").click(function() {
var value = $("#city").val();
alert(value);
})
});
</script>
</head>
<body>
Select City:
<select id="city" name="city">
<option value="delhi">Delhi</option>
<option value="mumbai">Mumbai</option>
<option value="chennai">Chennai</option>
</select>
<button id="button"> Fetch Value </button>
</body>
</html>See the Pen Jquery #7.3 by Techbriefers (@techbriefers) on CodePen.
How about a checkbox?
For checkbox need further screening, as if using a method val () directly, the value of the form will be returned in any condition checkbox (either already have or have not). To solve this, we can use jQuery’s custom selector, which is : checked .
Here’s an example of its use:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn jQuery | Techbriefers </title>
<script src="jquery-3.6.0.js"> </script>
<script>
$(document).ready(function() {
$("#button").click(function() {
var value1 = $("#cool:checked").val();
var value2 = $("#handsome:checked").val();
var value3 = $("#nice:checked").val();
alert(value1 + ', ' + value2 + ', ' + value3);
})
});
</script>
</head>
<body>
I am:
<input type="checkbox" id="cool" value="I'm cool"> Cool
<input type="checkbox" id="handsome" value="I am handsome"> Handsome
<input type="checkbox" id="nice" value="I'm Nice"> Nice
<br> <br>
<button id="button"> Fetch Value </button>
</body>
</html>Here I have 3 check boxes: Cool , Handsome and Nice. When the Fetch Value button is clicked, the following command will be executed:
var value1 = $("#cool:checked").val();
var value2 = $("#handsome:checked").val();
var value3 = $("#nice:checked").val();
alert(value1 + ', ' + value2 + ', ' + value3);
This means that the variables value1 , value2 and value3 will contain the value of the checkbox only when the checkbox is in a checklisted state (pay attention to how to write the jQuery selector, #cool: checked ).
Please try from the following codepen link:
See the Pen Jquery #7.4 by Techbriefers (@techbriefers) on CodePen.
However, now a new problem arose. When the checkbox is deselected, the val() method returns undefined . This happens because selector :checked doesn’t find the HTML element we wrote (because it hasn’t been checked).
How to handle it? simply add some IF conditions, where if the value of the variable value is undefined , do something, for example leave the variable blank.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn jQuery | Techbriefers </title>
<script src="jquery-3.6.0.js"> </script>
<script>
$(document).ready(function() {
$("#button").click(function() {
var value1 = $("#cool:checked").val();
var value2 = $("#handsome:checked").val();
var value3 = $("#nice:checked").val();
if (value1 == undefined) {value1 = "";}
if (value2 == undefined) {value2 = "";}
if (value3 == undefined) {value3 = "";}
alert(value1 + ', ' + value2 + ', ' + value3);
})
});
</script>
</head>
<body>
I am:
<input type="checkbox" id="cool" value="I'm cool"> Cool
<input type="checkbox" id="handsome" value="I am handsome"> Handsome
<input type="checkbox" id="nice" value="I'm Nice"> Nice
<br> <br>
<button id="button"> Fetch Value </button>
</body>
</html>This time when the Fetch Value button is clicked, only the selected checkbox values will appear. In cases like this you can also see that jQuery is not enough. We still need basic JavaScript to handle any problems that arise.
In today’s jQuery tutorial we have learned how to use jQuery to retrieve HTML element values, including fetching form values. Next, I will discuss how to change or insert new values into HTML via jQuery .