CODEWITHSUNDEEP
javascripthtmlpopup
BobbyJones
BobbyJones

Reputation: 1364

How do I get text from input boxes to appear in a popup window?

How would I go about extracting the info from the input boxes and display it in a separate popup window at the click of a button?

Example below:

enter image description here

HTML coding:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

<body>

<table style="width: 50%" cellspacing="0" cellpadding="0">
    <tr>
        <td>Firstname</td>
        <td><input type="text" id="firstname"></td>
    </tr>
    <tr>
        <td>Lastname</td>
        <td><input type="text" id="lastname"></td>
    </tr>
    <tr>
        <td>Address</td>
        <td><input type="text" id="address"></td>
    </tr>
    <tr>
        <td>Telephone</td>
        <td><input type="text" id="telephone"></td>
    </tr>
</table>

<input type="button" value="show details">

</body>

</html>

Upvotes: 0

Views: 714

Answers (2)

BobbyJones
BobbyJones

Reputation: 1364

I was thinking something along the lines of this concept:

function show_mailing_address() {  
    var width = 200
    var height = 150
    var left = parseInt((screen.availWidth/2) - (width/2))
    var top = parseInt((screen.availHeight/2) - (height/2))

    var windowFeatures = "scrollbars=no, toolbar=no,menubar=no,location=no, width=" + width + ",height=" + height + ",status=no,resizable=yes,left=" + left + ",top=" + top + "screenX=" + left + ",screenY=" + top;

    win = window.open('', '_blank', windowFeatures)

        var html = '<p style="text-align: center;">' +
            document.getElementById('firstname').value + ' ' +
            document.getElementById('lastname').value + '<br>' +
        document.getElementById('address').value + '<br>' +
            document.getElementById('telephone').value + '</p>'

        if (win) {
            win.document.write(html)
            win.document.title = 'Mailing Address'
            win.document.close()
            win.focus()
        }
        return false;   
}

Upvotes: 0

damare
damare

Reputation: 201

I guess, the simplest way to send data from one web page to another is using the GET method of HTML's forms.

Let's say, your input boxes are implemented in file form.html:

<html>
    <body>
        <form action="./display.html" method="GET">
            <table>
                <tr><td>First Name:</td><td><input type="text" name="firstname"></td></tr>
                <tr><td>Last Name:</td><td><input type="text" name="lastname"></td></tr>
                <tr><td>Phone number:</td><td><input type="tel" name="phonenumber"></td></tr>
            </table>

            <input type="submit" value="submit">
        </form>
    </body>
</html>

If you type in your first and last name as well as your phonenumber and press the submit button, you will be redirected to the file display.html. Furthermore, your browser appends the data of the form to the url in the following way:

display.html?firstname=Albert&lastname=Einstein&phonenumber=555-12345

(if you are Albert Einstein ;) )

More precisely, it takes the name information of each form element adds an = and then the information given by the user. If more than one form element is inside the <form></form> tags, each of that key-value pair is separated by a &.

In order to retrieve the data in the file display.html, you have to use a bit of javascript:

<html>
    <body>
        <table>
            <tr>
                <td>First name: </td><td><span id="firstname"></span></td></tr>
                <td>Last name: </td><td><span id="lastname"></span></td></tr>
                <td>Phone number: </td><td><span id="phonenumber"></span></td>
            </tr>
        </table>

        <script>
            var queryvars={};

            function getQueryVariables() {
                var query = window.location.search.substring(1);
                var vars = query.split("&");

                for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    queryvars[pair[0]]=pair[1];
                } 
            }   

            getQueryVariables();

            document.getElementById("firstname").innerHTML=queryvars['firstname'];
            document.getElementById("lastname").innerHTML=queryvars['lastname'];
            document.getElementById("phonenumber").innerHTML=queryvars['phonenumber'];
        </script>
    </body>
</html>

It takes everything after the ? of the current url, namely, firstname=Albert&lastname=Einstein&phonenumber=555-12345, splits it at every &, such that you end up with a list of key-value pairs. After that, it splits each of these key-value pairs at the = and stores the information in the queryvars variable. Finally, the information is inserted into the corresponding <span></span> of the table displayed to the user.

I hope, this answers your question.

Upvotes: 1

Related Questions