- 4 years ago
- Zaid Bin Khalid
- 25875 Views
-
7
With the help of JQuery, you can get HTML values easily. In this tutorial, I will let you know how you can get attribute values. JQuery is a very simple but powerful Javascript plugin and widely used in web development.
How to install JQuery into your Project?
It is very simple you just need to download JQuery plugin on its official site or you can add JQuery CDN that directly loads JQuery into your project. In this tutorial, I will use Bootstrap 4 and JQuery as a CDN.
Below snippet is bootstrap 4 snippets.
<form method="post" id="userForm" onSubmit="return false;">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>User</label>
<input type="text" name="user" id="user" class="form-control" data-user="zaid" data-user-id="1">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" id="email" class="form-control" data-user-id="1" data-email="[email protected]">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>City</label>
<select name="city" id="city" class="form-control">
<option value="">Select</option>
<option value="city1" data-city="1">City 1</option>
<option value="city2" data-city="2">City 2</option>
<option value="city3" data-city="3" selected>City 3</option>
<option value="city4" data-city="4">City 4</option>
</select>
</div>
<div class="form-group">
<label>State</label>
<select name="state" id="state" class="form-control">
<option value="">Select</option>
<option value="state1" data-state="1">State 1</option>
<option value="state2" data-state="2" selected>State 2</option>
<option value="state3" data-state="3">State 3</option>
<option value="state4" data-state="4">State 4</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<input type="submit" name="submit" value="Submit" class="btn btn-primary">
</div>
</form>
We can get HTML attribute values with the help of JQuery attr() function. You can also set an attribute with the same function. And there is an HTML5 data attribute getting function also in JQuery data() that retrieves all data element values.
With the help of data() function you only able to get data to attribute values. But the help of attr() function you can get any attribute value like name, id, text and any other self define attribute values. The below code shows how you can use both functions.
$(document).ready(function(e) {
$('#userForm').on("submit",function(){
var user = $('#user').attr('data-user');
var userId = $('#user').attr('data-user-id');
console.log(user+' '+userId);
var user = $('#user').attr('data-user');
console.log(user);
var data = $('#email').data();
console.log(data);
});
});
zaid 1
zaid
{email: “[email protected]”, userId: 1}
You can also get select option attribute values with the help of JQuery for that use below code.
$(document).ready(function(e) {
$('#userForm').on("submit",function(){
var city = $('#city option:selected').data();
console.log(city);
var state = $('#state option:selected').attr('data-state');
console.log(state);
});
});
Output:
{city: 3}
2
You can also get all the values of any form with the help of .serialize() the JQuery function.
$(document).ready(function(e) {
$('#userForm').on("submit",function(){
var fData = $(this).serialize();
console.log(fData);
});
});
The above function will return all element values in the form of string.
Output:
user=&email=&city=city3&state=state2
You can also set an attribute with the help of attr() function. attr(‘getAttribute’,’setAttribute’); the below example shows how you can set attribute of an HTML element.
$(document).ready(function(e) {
$('#user').attr('userName','Test'); //Set attribute
var user = $('#user').attr('userName'); //Get Attribute
console.log(user);
});
Output:
Test
- 4 years ago
- Zaid Bin Khalid
- 25875 Views
-
7