0

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!

2
Contributors
3
Replies
5
Views
5 Years
Discussion Span
Last Post by emclondon
0

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

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>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.