In this article we will learn how to Display TextBox value in Alert using jQuery.
When you will clicked on button the Textbox value is displayed in the JavaScript Alert Box.
In this blog we will see how to Display TextBox value in Alert using jQuery.
When you will clicked on button the Textbox value is displayed in the JavaScript Alert Box.
CSS Code
[php]
<style>
.btnSave {
background-color: green;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
[/php]
HTML Code
[php]
<body>
<div>
<label id="lblName">Name :</label>
<input type="text" id="textName" />
<hr />
<input type="button" class="btnSave" value="Save" />
</div>
</body>
[/php]
Display TextBox value in Alert using jQuery
When the Button is clicked, the TextBox value is retrieved and displayed in JavaScript Alert Box.
[php]
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$(".btnSave").click(function () {
if ($("#textName").val() != ”) {
var name = $("#textName").val();
alert(name);
}
else {
alert("Please enter name.");
}
});
});
</script>
[/php]
Output
