HTML Forms contains various elements like input fields, options, textarea etc. and for further processing, we need to get value of each field using jQuery.
This tutorial, Explains about, how to get input values of different HTML form elements using jQuery as follows:
we have taken three form elements in our example – input field, radio button and a textarea.
- To get value of input field.
$("input").val();- To get value of Checked Radio Button.
$("form input[type='radio']:checked").val();- Get value of Radio button with onChange.
$('input:radio').change(function(){
var value = $("form input[type='radio']:checked").val();
alert("Value of Changed Radio is : " +value);
});- To get value of Textarea field.
$("textarea").val();To learn more, just watch our live demo and go through our complete HTML and jQuery codes given below.
HTML file: form_value.html
Given below our complete HTML code.
<!DOCTYPE html>
<html>
<head>
<title>Get Values Of Form Elements Using jQuery</title>
<!-- Include CSS File Here -->
<link rel="stylesheet" href="form_value.css"/>
<!-- Include JS File Here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="form_value.js"></script>
</head>
<body>
<div class="container">
<div class="main">
<h2>Get Values Of Form Elements Using jQuery</h2>
<form action="">
<!-- Text -->
<label>Input :</label>
<input type="text" id="text" name="name" value="" />
<input type="button" id="text_value" value="Get Value"/>
<input type="button" id="text_reset" value=" Reset "/>
<!-- Radio Button -->
<label>Radio Button :</label>
<input type="radio" name="radio" value="Radio 1">Radio 1
<input type="radio" name="radio" value="Radio 2">Radio 2
<input type="radio" name="radio" value="Radio 3">Radio 3
<input type="radio" name="radio" value="Radio 4">Radio 4
<input type="button" id="radio_value" value="Get Value"/>
<input type="button" id="radio_reset" value=" Reset "/>
<p id="result"></p>
<!-- Textarea -->
<label>Textarea :</label>
<textarea id="textarea" ></textarea>
<input type="button" id="textarea_value" value="Get Value"/>
<input type="button" id="textarea_reset" value=" Reset "/>
</form>
</div>
</div>
</body>
</html>jQuery File: form_value.js
Given below our complete jQuery code.
$(document).ready(function() {
// Function to get input value.
$('#text_value').click(function() {
var text_value = $("#text").val();
if(text_value=='') {
alert("Enter Some Text In Input Field");
}else{
alert(text_value);
}
});
$('#text_reset').click(function() {
$("#text").val('');
});
// Funtion to get checked radio's value.
$('#radio_value').click(function() {
$('#result').empty();
var value = $("form input[type='radio']:checked").val();
if($("form input[type='radio']").is(':checked')) {
$('#result').append("Checked Radio Button Value is :<span> "+ value +" </span>");
}else{
alert(" Please Select any Option ");
}
});
// Get value Onchange radio function.
$('input:radio').change(function(){
var value = $("form input[type='radio']:checked").val();
alert("Value of Changed Radio is : " +value);
});
// Funtion to reset or clear selection.
$('#radio_reset').click(function() {
$('#result').empty();
$("input:radio").attr("checked", false);
});
// To get value of textarea.
$('#textarea_value').click(function() {
var textarea_value = $("#textarea").val();
if(textarea_value=='') {
alert("Enter Some Text In Textarea");
}else{
alert(textarea_value);
}
});
$('#textarea_reset').click(function() {
$("textarea").val('');
});
});CSS File: form_value.css
Styling HTML elements.
/* Below line is used for online Google font */
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
div.container{
width: 960px;
height: 600px;
margin:50px auto;
font-family: 'Droid Serif', serif;
}
div.main{
width:425px;
float:left;
padding: 30px 40px;
box-shadow: 0 0 10px;
border-radius: 2px;
margin-top:7px;
}
h2{
text-align:center;
font-size:18px;
}
p{
font-size:15px;
color:#084CA1;
}
label{
color: #464646;
font-size: 16px;
font-weight: bold;
}
input[type=button]{
font-size: 15px;
border: 1px solid gray;
padding: 5px;
background-color: #084CA1;
font-weight:bold;
cursor: pointer;
width:48%;
color:white;
border-radius:3px;
margin-left:6px;
font-family: 'Droid Serif', serif;
}
input[type=radio]{
width:15px;
height:15px;
}
input[type=text]{
padding: 5px;
border-radius:3px;
margin-left:6px;
border: 2px solid rgb(165, 165, 165);
width: 95%;
height: 20px;
}
form{
font-size:15px;
}
span{
color:red;
}
textarea{
border: 2px solid rgb(165, 165, 165);
padding: 5px;
width: 95%;
border-radius: 3px;
resize: none;
height: 40px;
margin-left:6px;
}Conclusion:
This was all about to get values of different HTML Form elements. hope you like it, keep reading our other blogs.
4 Replies to “jQuery Get Value Of Input, Textarea and Radio Button”
Nice Help! Nice Coding!
Thanks for your work!
Ringo
Hello RingoD,
That sounds really great ! Keep reading our other blog posts for getting more coding tricks.
Regards,
FormGet Team
n!ce work..
its realy helpful n easy to understand..
keep it up..
Very very helpful tutorials. I wish you good luck