.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> ASP.NET >> Post New Resource Bookmark and Share   

 Subscribe to Articles

How to show a User Input box in ASP.Net

Posted By:ASPEvil       Posted Date: August 31, 2014    Points: 200    Category: ASP.NET    URL: http://www.dotnetspark.com  

How to show a PopUp window which will accept users' inputs, in ASP.Net
 

In many cases, we often need to show the users a popup window, which will be able to ask few questions to the users and will be able to accepts the answers of the same questions, from the users. For example: you did show a popup window to the users which you will ask the users if they are interested to subscribe to blog page of your website and this popup window is containing a textbox control and a button control, the textbox is to accept the email id of the users and the button control is to submit the email id. So users can provide their email id and click this button and their email id will be registered as the subscriber to your blog page.

This article is going to show you how you can achieve this type of functionality. In this article we are having a popup window which accept some selection of choice of the users for a membership package.

I have used the following code, at the head section of the webpage:-
---------------------------------------
<script src="scripts/jquery-1.4.3.min.js" type="text/javascript"></script>
    <style type="text/css">
        .web_dialog_overlay
        {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            background: #000000;
            opacity: .15;
            filter: alpha(opacity=15);
            -moz-opacity: .15;
            z-index: 101;
            display: none;
        }
        .web_dialog
        {
            display: none;
            position: fixed;
            width: 380px;
            height: 293px;
            top: 50%;
            left: 50%;
            margin-left: -190px;
            margin-top: -100px;
            background-color: #ffffff;
            /*border: 2px solid #336699;*/
            border: 2px solid #FF8A93;
            padding: 0px;
            z-index: 102;
            font-family: Verdana;
            font-size: 10pt;
        }
        .web_dialog_title
        {
            border-bottom: solid 2px #336699;
            /*background-color: #336699;*/
            background-color: #FF4E5E;
            padding: 4px;
            color: White;
            font-weight:bold;
        }
        .web_dialog_title a
        {
            color: White;
            text-decoration: none;
        }
        .align_right
        {
            text-align: right;
        }
    </style>



<script type="text/javascript">

        $(document).ready(function () {
            $("#btnShowSimple").click(function (e) {
                ShowDialog(false);
                e.preventDefault();
            });

            $("#btnShowModal").click(function (e) {
                ShowDialog(true);
                e.preventDefault();
            });

            $("#btnClose").click(function (e) {
                HideDialog();
                e.preventDefault();
            });

            $("#btnSubmit").click(function (e) {
                var brand = $("#brands input:radio:checked").val();

                if (brand == '1 Day') {

                    window.location.replace("buy-1-day-membership.aspx");
                }

                else if (brand == '1 Week') {
                    window.location.replace("buy-1-week-membership.aspx");
                }

                else if (brand == '1 Month') {
                    window.location.replace("buy-1-month-membership.aspx");
                }

                else if (brand == '1 Year') {
                    window.location.replace("buy-1-year-membership.aspx");
                }


                HideDialog();
                e.preventDefault();

            });
        });

        function ShowDialog(modal) {
            $("#overlay").show();
            $("#dialog").fadeIn(300);

            if (modal) {
                $("#overlay").unbind("click");
            }
            else {
                $("#overlay").click(function (e) {
                    HideDialog();
                });
            }
        }

        function HideDialog() {
            $("#overlay").hide();
            $("#dialog").fadeOut(300);
        } 
        
    </script>

    
    <script language="javascript" type="text/javascript">
        function showSelectedPackageDetails() {

            if (document.getElementById('rd_1day').checked) {

                document.getElementById('lbl_selected_package_details').innerHTML = " package description goes here.";
            }

            if (document.getElementById('rd_1week').checked) {

                document.getElementById('lbl_selected_package_details').innerHTML = " package description goes here.";
            }

            if (document.getElementById('rd_1month').checked) {

                document.getElementById('lbl_selected_package_details').innerHTML = " package description goes here.";
            }

            if (document.getElementById('rd_1year').checked) {

                document.getElementById('lbl_selected_package_details').innerHTML = " package description goes here.";
            }
        }
    </script>
With the above code, I first

 declared the <script> block which is a reference of the JQuery file which is required to run this user input box (This same file I have also attached with this article, within the .zip file: "Script.zip").

Next, with the <style> block, I did mention how the style/look of the user input box will be.

With the next <script> block, I used some Jquery functions which operate this user input box, as follow:-
-------------------------------------------------
$("#btnShowSimple").click(function (e) {
                ShowDialog(false);
                e.preventDefault();
            });
-------------------------------------------------

The above code works on the click of a button, named as: btnShowSimple. The next line: ShowDialog(false); calls the function: "ShowDialog" which is responsible to show the popup user input window. I am providing the parameter: false while calling this function which means the popup user input box will not be modal.
The next code block: $("#btnShowModal").click(function (e) {
                ShowDialog(true);
                e.preventDefault();
            });
 does the same work, just 1 difference is, it calls the ShowDialog function with the true parameter which means the popup user input box will be modal and this work happens when the button:  btnShowModal is clicked.

The next code block: $("#btnClose").click(function (e) {
                HideDialog();
                e.preventDefault();
            });
Hides the popup user input box after the button:  btnClose is clicked.
Next, with the code block: $("#btnSubmit").click(function (e) {
                var brand = $("#brands input:radio:checked").val();

                if (brand == '1 Day') {

                    window.location.replace("buy-1-day-membership.aspx");
                }

                else if (brand == '1 Week') {
                    window.location.replace("buy-1-week-membership.aspx");
                }

                else if (brand == '1 Month') {
                    window.location.replace("buy-1-month-membership.aspx");
                }

                else if (brand == '1 Year') {
                    window.location.replace("buy-1-year-membership.aspx");
                }


                HideDialog();
                e.preventDefault();

            });
        });
Whenever the "btnSubmit" button is clicked, then there is a div named as: brands (it is with the body part which designs the user input popup box and it is shown later, in this article) and within this div, there are four radio buttons with the name: brand; with the text: '1 Day', '1 Week', '1 Month' and '1 Year' respectively. And this code block checks which radio button is selected by the user, after the "btnSubmit" button is clicked.

Next the code block:    <script language="javascript" type="text/javascript">
        function showSelectedPackageDetails() {

            if (document.getElementById('rd_1day').checked) {

                document.getElementById('lbl_selected_package_details').innerHTML = " package description goes here.";
            }

            if (document.getElementById('rd_1week').checked) {

                document.getElementById('lbl_selected_package_details').innerHTML = " package description goes here.";
            }

            if (document.getElementById('rd_1month').checked) {

                document.getElementById('lbl_selected_package_details').innerHTML = " package description goes here.";
            }

            if (document.getElementById('rd_1year').checked) {

                document.getElementById('lbl_selected_package_details').innerHTML = " package description goes here.";
            }
        }
    </script>
This code block shows some package description of the selected package, from the popup user input box, within the user popup user input box. For example: when the radio button: 'rd_1day' is selected from the popup user input box, then the javascript code: document.getElementById('lbl_selected_package_details').innerHTML = " package description goes here."; changes the label: lbl_selected_package_details's text as per the requirement.

Now let see how the design code of the popup user input box look like, as the following:-
---------------------------------------------------------------------
<div id="output"></div>
    
    <div id="overlay" class="web_dialog_overlay"></div>
    
    <div id="dialog" class="web_dialog">
        <table>        
            <tr>
                <td class="web_dialog_title" width="100%">Select a Membership</td>
                <td class="web_dialog_title align_right" align="right">
                    <a href="#" id="btnClose"><img src="images/cross_trasparent_background.png" alt="Close" width="18px" height="18px" title="Close" /></a>
                </td>
            </tr>
            <tr>
                <td> </td>
                <td> </td>
            </tr>
            <tr>
                <td colspan="2" style="padding-left: 15px;">
                    <b>Select a Memberhsip Package </b>
                </td>
            </tr>
            <tr>
                <td> </td>
                <td> </td>
            </tr>
            <tr>
                <td colspan="2" style="padding-left: 15px;">
                    <div id="brands">
                        <input id="rd_1day" name="brand" type="radio" value="1 Day" onclick="showSelectedPackageDetails()" /> 1 Day
                        <input id="rd_1week" name="brand" type="radio" value="1 Week" onclick="showSelectedPackageDetails()" /> 1 Week 
                        <input id="rd_1month" name="brand" type="radio" value="1 Month" onclick="showSelectedPackageDetails()" /> 1 Month
                        <input id="rd_1year" name="brand" type="radio" value="1 Year" onclick="showSelectedPackageDetails()" /> 1 Year                        
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2"><label id="lbl_selected_package_details" style="color: #990000"></label></td>
                
            </tr>
            <tr>
                <td colspan="2" style="text-align: center;">
                    <input id="btnSubmit" type="button" value="Buy Now" title="Select a membership package from the above and click me, to proceed forward, to make the payment using PayPal"/>                    
                </td>
            </tr>
        </table>
    </div>
Now your fully
functional popup user input box is ready to be attached with your website.

You can make any necessary changes to suite your requirement and it will be then completely as per your requirement.

 

 

Thanks.

 Subscribe to Articles

     

Further Readings:

Responses
Author: Santhakumar Munuswamy         Company URL: http://www.dotnetspark.com
Posted Date: December 10, 2015

Thanks for nice article

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend