Introduction
हेलो दोस्तों आज हम इस post में jQuery form events के बारेमे जानेगे!. jQuery form elements को handle करने के लिए jQuery के five jQuery form events है!.
jquery form events को समझने के लिए हम एक HTML form create कर लेते है!.
HTML form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jquery form events in hindi</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
<div class="container">
<form action="#" method="post" id="formID">
<div class="form-group"><h3>Jqury Form Events</h3></div>
<div class="form-group">
<label for="fname">First name:</label>
<input type="text" class="form-control" id="fname" name="fname">
</div>
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" id="username" name="username">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="text" class="form-control" id="email" name="email">
</div>
<div class="form-group set_error">
<label>Gender:</label><br>
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female
</div>
<div class="form-group">
<label for="email">Select Language:</label><br>
<select name="language" class="select_data">
<option value="html">HTML</option>
<option value="php">PHP</option>
<option value="css">CSS</option>
<option value="jquery">jquery</option>
</select>
</div>
<div class="form-group">
<textarea name="address" id="address" class="form-control"></textarea>
</div>
<input type="submit" name="submit" value="Submit" class="btn-primary form-control">
</form>
</div>
</body>
</html>
jQuery form events जैसे की
- focus()
- blur()
- change()
- select()
- submit()
focus()
focus event तब trigger होती है जब हम किसी form के input box पर focus करते है!.
Example
<script type="text/javascript">
$(document).ready(function(){
$(".form-control").focus(function(){
$( this ).css("background-color",'red');
});
});
</script>
blur()
blur() event तब trigger होती है जब हम किसी from के input box से focus हटा लेते है!.
Example
<script type="text/javascript">
$(document).ready(function(){
$(".form-control").blur(function(){
$( this ).css("background-color",' ');
});
});
</script>
change()
change () event तब fire होती है जब checkbox, radio button या textbox elements की value को update (change) करते है!.
Example
<script type="text/javascript">
$(document).ready(function(){
$(".select_data").change(function(){
var slv = $( this ).val();
console.log(slv);
});
});
</script>
select()
select () event तब fire होती है जब element के अंदर text highlights ( select ) करते है!. select () event just textbox और textarea तक ही सिमित है!।
Example
<script type="text/javascript">
$(document).ready(function(){
$(".form-control").select(function(){
console.log("This is select events jquery");
});
});
</script>
submit()
submit() event तब fire होती है जब form data को submit करना हो!
Example
<script type="text/javascript">
$(document).ready(function(){
$("#formID").submit(function(){
console.log("Submit Data successfully!!");
});
});
</script>
Full source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jquery form events in hindi</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//focus events
$(".form-control").focus(function(){
$( this ).css("background-color",'red');
});
//focus blur
$(".form-control").blur(function(){
$( this ).css("background-color",'');
});
//focus select
$(".form-control").select(function(){
console.log("This is select events jquery");
});
//focus change
$(".select_data").change(function(){
var slv = $( this ).val();
console.log(slv);
});
//focus submit
$("#formID").submit(function(){
console.log("Submit Data successfully!!");
});
});
</script>
<body>
<div class="container">
<form action="#" method="post" id="formID">
<div class="form-group"><h3>Jqury Form Events</h3></div>
<div class="form-group">
<label for="fname">First name:</label>
<input type="text" class="form-control" id="fname" name="fname">
</div>
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" id="username" name="username">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="text" class="form-control" id="email" name="email">
</div>
<div class="form-group set_error">
<label>Gender:</label><br>
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female
</div>
<div class="form-group">
<label for="email">Select Language:</label><br>
<select name="language" class="select_data">
<option value="html">HTML</option>
<option value="php">PHP</option>
<option value="css">CSS</option>
<option value="jquery">jquery</option>
</select>
</div>
<div class="form-group">
<textarea name="address" id="address" class="form-control"></textarea>
</div>
<input type="submit" name="submit" value="Submit" class="btn-primary form-control">
</form>
</div>
</body>
</html>
