JS Popup says "Enter name" save it as a variable and display it in PHP?

Question

riahc3 50 Â

12 Years Ago

Hey

Let me see how I describe this....

I have a textbox (inside of a form) and that form also has a button that calls a Javascript function that does some unrelated stuff. This is all inside of Lightbox. I want to be able to type in text in that textbox, save it (somehow), click the button that not only calls the JS function but closes the Lightbox and still have that valued store.

Now I know that PHP is server side and JS is client side so I would have to somehow pass it to the server and store it there temp. Several answers come to mind (which I dont know how to implant at all):

1: AJAX
2: Cooke/session/etc.

As for 1, I think it is the best way but I have no idea how to implant something as simple as this. As for 2, Ive tried but it just doesnt work....

2:

Using a cookie (Yes, I know it is a overkill for this) (This is my Lightbox):

//this code is in a JS function inside the Lightbox called saveAndClose
document.cookie="cookiename=" + document.getElementById('cookiebox').value;

The HTML of the principal page (the LightBox is in a iframe I believe which is opened from the principal page emulating a popup of sorts) is:

<form name="save" id="save" action="saveAndClose">
        <div id="actions">
            <input type="text" id="cookiebox" name="cookiebox"/>
            <input type="submit" id="saveAndClose" name="saveAndClose" value="OK" title="Final"/>
        </div>

        </form>

And finally the PHP side of things:

<?php echo $_COOKIE['cookiebox']; ?>

Ive also tried with " " and without ; incase my sintaxis was incorrect.

So that a bit where I am at right now. Basically I want a JS textbox's value to be able to be seen in all of the website, to sum it up and make it easier.

Thank you!

javascript php

2 Contributors
3 Replies
184 Views
4 Days Discussion Span
Latest Post 12 Years Ago Latest Post by emclondon

emclondon 38 Junior Poster in Training

12 Years Ago

here's something that I did earlier.

index.html

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <title>First Demo</title>
        <META name="description" content="HTML5 JS Tutorial" />
        <META name="keywords" content="HTML5,CSS,JavaScript" />
        <META name="Author" lang="en" content="Prasanna K Yalala" />
        <style type="text/css">
                html,body {
                    border: 0;
                    height: 100%;
                    font-family: arial, helvetica, sans-serif;  
                }
                #popup{
                    display: none
                }

                #secret {
    font-size: 20px;
    font-style: italic;
    color: #f00;
}
                body{
                    font-family: Garamond;
                    background: -webkit-gradient(linear, left top, left bottom, from(#F0F0F0), to(#CCCCCC));
                    background-color: rgba(0, 0, 0, 0.6);
                    color: #999;
                    height: 100%;
                    margin: 0;
                }

                #my_div {
                    margin-top: 10%;
                    margin-left: 15%;
                    width: 425px;

                }

                #my_layout {
                    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#DDDDDD));
                    width: 500px;
                    position:absolute;
                    top: 50%;
                    left: 50%;
                    width:28em;
                    height:10em;
                    margin-top: -5em; /*set to a negative number 1/2 of your height*/   
                    margin-left: -14em; /*set to a negative number 1/2 of your width*/
                    border: 1px solid #ccc;
                    -webkit-box-shadow: 2px 2px 2px #999;
                }

                #my_layout input{
                     border: 1px solid #ccc;
                }

                #my_layout button{
                    border: none;
                    color: #888;
                    padding: 5px;
                    font-size: 15px;
                    width: 125px;
                    height: 30px;
                    font-weight: bold;
                    font-family: Garamond;
                    border-radius: 5px;
                    -webkit-box-shadow: 1px 1px 1px #888;
                    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CCCCCC));
                }
                #my_layout button:hover{
                    color: #000;
                }

            </style>
        <script type="text/javascript">

            /**
            * Prasanna K Yalala
            * 
            * References
            * .tutorialspoint.com,  Stackoverflow.com,
            * html5rocks.com,  Tizag.com, w3schools.com, 
            *
            * Copyleft 2012, Nothing is Reserved.
            */

            /**
            * This function validates the data from the form and
            * sets a cookie for the next page.
            */
            function checkForm() {
                var u = document.getElementById('firstname').value
                if((u==null) || ( u==""))
                {
                    document.getElementById('secret').hidden = false;
                    setInterval(showme, 5000);
                    function showme() {
                        document.getElementById('secret').hidden = true;
                    }
                    return (false);

                }else{
                    document.cookie = "targetname="+u+"; expires="+new Date();+"; path=/";
                    return (true);
                }
            }
        </script>
</head>
    <body>
    <div id="my_layout">
    <div id="my_div">
        <form name="DemoVersion" method="POST" action="cookie.php" onsubmit="return checkForm();">
            <table>
                <tr>
                    <td style="width: 100px">
                        Username
                    </td>
                    <td>
                        <input type="text" id="firstname" name="username"/>
                    </td>
                    <td id="secret" hidden="true"> required!</td>
                </tr>

                <tr>
                        <td>
                        &nbsp;
                    </td>
                </tr><tr>

                    <td>
                        &nbsp;
                    </td>
                    <td>
                        <button type="submit" value="Submit">Submit</button>
                    </td>
                </tr>
            </table>
        </form></div></div>

    </body>
</HTML>

cookie.php

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <title>First Demo</title>
        <META name="description" content="HTML5 JS Tutorial" />
        <META name="keywords" content="HTML5,CSS,JavaScript" />
        <META name="Author" lang="en" content="Prasanna K Yalala" />
        <style type="text/css">
                html,body {
                    border: 0;
                    height: 100%;
                    font-family: arial, helvetica, sans-serif;  
                }
                #popup{
                    display: none
                }

                #secret {
                    font-size: 20px;
                    font-style: italic;
                    color: #f00;
                }
                body{
                    font-family: Garamond;
                    background: -webkit-gradient(linear, left top, left bottom, from(#F0F0F0), to(#CCCCCC));
                    background-color: rgba(0, 0, 0, 0.6);
                    color: #999;
                    height: 100%;
                    margin: 0;
                }

                #my_div {
                    margin-top: 10%;
                    margin-left: 15%;
                    width: 425px;

                }

                #my_layout {
                    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#DDDDDD));
                    width: 500px;
                    position:absolute;
                    top: 50%;
                    left: 50%;
                    width:28em;
                    height:10em;
                    margin-top: -5em; /*set to a negative number 1/2 of your height*/   
                    margin-left: -14em; /*set to a negative number 1/2 of your width*/
                    border: 1px solid #ccc;
                    -webkit-box-shadow: 2px 2px 2px #999;
                }

                #my_layout input{
                     border: 1px solid #ccc;
                }

                #my_div .error {
                    color: red;
                }

            </style>
        </head>
        <body>
            <div id="my_layout">
                <div id="my_div">
                        <?php if(isset($_COOKIE['targetname'])){
                            ?><br />Welcome Back <?php echo $_COOKIE['targetname'];?>!<?php 
                        }
                        else{
                            die("<div class='error'><b>ERROR!</b></div><br />You are not supposed to be in here!");
                        }
                        ?>
                </div>
            </div>
        </body>
</HTML>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

riahc3 50 Â Team Colleague · Answer 1 · 2012-05-04T07:14:04+00:00

I put something wrong (wrong here, not in the code):

//this code is in a JS function inside the Lightbox called saveAndClose
document.cookie="cookiebox=" + document.getElementById('cookiebox').value;

riahc3 50 Â Team Colleague · Answer 2 · 2012-05-07T06:56:40+00:00

riahc3 50 Â

12 Years Ago

No tips/ideas/alternatives/etc at all?