jQuery

Display TextBox value in Alert using jQuery

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

 <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>

HTML Code

<body>
    <div>
        <label id="lblName">Name :</label>
        <input type="text" id="textName" />
        <hr />
        <input type="button" class="btnSave" value="Save" />
    </div>
</body>

Display TextBox value in Alert using jQuery

When the Button is clicked, the TextBox value is retrieved and displayed in JavaScript Alert Box.

Advertisement
    <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>

Output

display-textbox-value-in-alert-using-jquery

display-textbox-value-in-alert-using-jquery

Advertisement

Leave a Reply

Your email address will not be published. Required fields are marked *