Jquery Tutorials
- What is JQuery
- DOM Document Object Model
- JQuery Syntax
- Jquery Selector
- Get & Set Form value
- jQuery - Attributes
- Attribute Methods
- jQuery - DOM Manipulation
- JQuery Events
- JQuery Effects
- JQuery Html/Css
- jQuery Insert Content
- Auto Hide Div
- JQuery noConflict()
- JQuery Form Validation
- Form Validation
- Login Form Validation
- Jquery Fadeout message
- Modal popup
- Jquery Ajax Forms
- Dependent Dropdown
- Autocomplete Country jquery ajax
- Dynamic Content Load using jQuery AJAX
- Dynamic star rating jQuery AJAX
- Drag and Drop Image Upload
- show Hide Elements By click on checkbox
- How to Add class in jQuery
- calculate discount in jQuery
- Calculate GST by input value in text box
- check Password strength in jQuery
- Count Remaining Character
- onClick Checkbox check all
- password match or not
- DataTable
- Date Picker
- Multiselect Dropdown with Checkbox
- Add Dynamic Input Field (Add More Input Field)
- submit button disable after one click
- Show hide password in Password textbox using checkbox
- Put value in the text field
- Set Data and Attributes
Customer Say
Get and set
How to declare a variable in jquery.
File name : index.php
var uid = "mahtab";
var password = 'mahi';
what is val() function.
The val() method returns or sets the value attribute of the selected elements.
File name : index.php
Syntax
Return the value attribute:
$(selector).val()
Set the value attribute:
$(selector).val(value)
How to get & set Form Value.
File name : index.php
//Get
var bla = $('#txt_name').val();
//Set
$('#txt_name').val(bla);
// First way to get a value
value = $("#txt_name").val();
// Second way to get a value
value = $("#txt_name").attr('value');
document.getElementById('txt_name').value
$(document).ready(function(){
$("#txt_name").keyup(function(){
alert(this.value);
});
});
How to get form value in jquery
File name : index.php
var name = $('#txtname').val();
Set the value of the <input> field:
File name : index.php
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("input:text").val("mahtab");
});
});
</script>
</head>
<body>
<p>Name: <input type="text" name="user"></p>
<button>Set the value of the input field</button>
</body>
</html>
Name:
Example : set the value of tag in input field.
File name : index.php
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("input:text").val("Mahtab");
});
$(".atag").click(function(){
$("#userid").val("Mahtab");
});
$(".setid").click(function(){
var user_id = this.id;
$('#userid').val(user_id);
});
});
</script>
</head>
<body>
<p>Name : <input type="text" name="user"></p>
<p>user id : <input type="text" name="uid" id="userid" value=""></p>
<button>Set the value</button></br>
<a href="#" class="atag" id="1">set the value in input box.</a><br/>
<a href="#" class="setid" id="1">set the value in input box.</a>
</body>
</html>
File name : index.php
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".setid").click(function(){
var stud_id = this.id;
$('#sid').val(stud_id);
var stud_name = this.name;
$('#sname').val(stud_name);
var stud_address = this.address; // not work, this keyword only work with id and name.
$('#saddress').val(stud_address);// not work
});
});
$(document).on("click", ".myid", function() {
var sid = this.id;
alert(sid);
$('#sid').val(sid);
});
</script>
</head>
<body>
<p>id : <input type="text" name="sid" id="sid"></p>
<p>Name : <input type="text" name="sname" id="sname"></p>
<p>Address : <input type="text" name="saddress" id="saddress"></p>
<a href="#" class="setid" id="1" name="mahtab" address="delhi">set the value in input box.</a>
<a href="#" class="myid" id="1" ename="mahtab">get value</a>
<p>NOte : this keyword is only work with id and name </p>
</body>
</html>
jQuery Get or Set Contents and Values
Some jQuery methods can be used to either assign or read some value on a selection. A few of these methods are text(), html(), attr(), and val(). When these methods are called with no argument, it is referred to as a getters, because it gets (or reads) the value of the element. When these methods are called with a value as an argument, it's referred to as a setter because it sets (or assigns) that value.
jQuery text() Method
The jQuery text() method is either used to get the combined text contents of the selected elements, including their descendants, or set the text contents of the selected elements.
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Get Text Contents of the Elements</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-one").click(function(){
var str = $("p").text();
alert(str);
});
$(".btn-two").click(function(){
var str = $("p:first").text();
alert(str);
});
$(".btn-three").click(function(){
var str = $("p.extra").text();
alert(str);
});
});
</script>
</head>
<body>
<button type="button" class="btn-one">Get All Paragraph's Text</button>
<button type="button" class="btn-two">Get First Paragraph's Text</button>
<button type="button" class="btn-three">Get Last Paragraph's Text</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p class="extra">This is one more paragraph.</p>
</body>
</html>
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Set Text Contents of the Elements</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-one").click(function(){
$("p").text("This is demo text.");
});
$(".btn-two").click(function(){
$("p:first").text("This is another demo text.");
});
$(".btn-three").click(function(){
$("p.empty").text("This is one more demo text.");
});
});
</script>
</head>
<body>
<button type="button" class="btn-one">Set All Paragraph's Text</button>
<button type="button" class="btn-two">Set First Paragraph's Text</button>
<button type="button" class="btn-three">Set Empty Paragraph's Text</button>
<p>This is a test paragraph.</p>
<p>This is another test paragraph.</p>
<p class="empty"></p>
</body>
</html>
jQuery html() Method
The jQuery html() method is used to get or set the HTML contents of the elements.
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Get HTML Contents of an Element</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-one").click(function(){
var str = $("p").html();
alert(str);
});
$(".btn-two").click(function(){
var str = $("#container").html();
alert(str);
});
});
</script>
</head>
<body>
<button type="button" class="btn-one">Get Paragraph's HTML Contents</button>
<button type="button" class="btn-two">Get Container's HTML Contents</button>
<div id="container">
<h1>Hello World!</h1>
<p>The quick <b>brown fox</b> jumps over the lazy dog.</p>
</div>
</body>
</html>
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Set HTML Contents of the Element</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("body").html("<p>Hello World!</p>");
});
});
</script>
</head>
<body>
<button type="button">Write Message</button>
</body>
</html>
jQuery attr() Method
the jQuery attr() method to either get the value of an element's attribute or set one or more attributes for the selected element.
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Get an Element's Attribute Value</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-one").click(function(){
var str = $("a").attr("href");
alert(str);
});
$(".btn-two").click(function(){
var str = $("img#sky").attr("alt");
alert(str);
});
});
</script>
</head>
<body>
<button type="button" class="btn-one">Get Link's HREF Attribute</button>
<button type="button" class="btn-two">Get Image ALT Attribute</button>
<p><a href="https://www.itechxpert.com/">Tutorial </a></p>
<img id="sky" src="/examples/images/sky.jpg" alt="Cloudy Sky">
</body>
</html>
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Set Element's Attribute Value</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$('input[type="checkbox"]').attr("checked", "checked");
});
});
</script>
</head>
<body>
<p><label><input type="checkbox"></label> I agree with terms and conditions.</p>
<button type="button">Check</button>
</body>
</html>
jQuery val() Method
The jQuery val() method is mainly used to get or set the current value of the HTML form elements such as <input>, <select> and <textarea>.
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Get a Form Field Value</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button.get-name").click(function(){
var name = $("#name").val();
alert(name);
});
$("button.get-comment").click(function(){
var comment = $("#comment").val();
alert(comment);
});
$("button.get-city").click(function(){
var city = $("#city").val();
alert(city);
});
});
</script>
</head>
<body>
<form>
<table>
<tr>
<td>Name:</td>
<td>
<input type="text" id="name">
</td>
</tr>
<tr>
<td>Comments:</td>
<td>
<textarea rows="4" cols="30" id="comment"></textarea>
</td>
</tr>
<tr>
<td>City:</td>
<td>
<select id="city">
<option>London</option>
<option>Paris</option>
<option>New York</option>
</select>
</td>
</tr>
</table>
</form>
<p><strong>Note:</strong> Fill the above form and click the following button to get the value.</p>
<button type="button" class="get-name">Get Name</button>
<button type="button" class="get-comment">Get Comment</button>
<button type="button" class="get-city">Get City</button>
</body>
</html>
File name : index.php
<script type="text/javascript">
$(document).ready(function(){
// Get value of a text input with ID name
$("button.get-name").click(function(){
var name = $('input[type="text"]#name').val();
alert(name);
});
// Get value of a textarea with ID comment
$("button.get-comment").click(function(){
var comment = $("textarea#comment").val();
alert(comment);
});
// Get value of a select box with ID city
$("button.get-city").click(function(){
var city = $("select#city").val();
alert(city);
});
});
</script>
Set the Values of Form Fields with val() Method
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Set Form Fields Values</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
var text = $(this).text();
$('input[type="text"]').val(text);
});
});
</script>
</head>
<body>
<button type="button">Discovery</button>
<button type="button">Atlantis</button>
<button type="button">Endeavour</button>
<p><strong>Note:</strong> Click the above buttons to set the value of following input box.</p>
<p>
<input type="text">
</p>
</body>
</html>
File name : index.php
File name : index.php
File name : index.php
File name : index.php
File name : index.php
File name : index.php