SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Transfer of Javasript variables to php page

    I have a javascript code that has some variables which stores information in them. Now I want this html page containing javascript to transfer these variables to a new php page. How can I achieve this?

    Please let me know. Thanks a lot in advance for your reply.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Depending on what you're wanting to achieve, you could place those variables as form data, and submit the form to the new php page.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    other options include

    1) writing those variables to cookies

    2) appending the variables to a url as a query string in an <a>

    3) use ajax to send the variables to a php page

  4. #4
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) writing those variables to cookies

    2) appending the variables to a url as a query string in an <a>

    3) use ajax to send the variables to a php page


    I dont want to use cookies and I don't have an idea about ajax. Can you give me further idea about how do I append variables to a url as a query string? Is it by using get and post methods? But I believe get and post methods are not valid in javascript?

  5. #5
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    post the html and javascript you have so far after which we should be able to give you a specific solution.

  6. #6
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just started learning Javascript so please bear with me if you find any drastic mistakes.



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

    function square(form)
    {



    var test = form.value1.value;
    window.alert(+test);

    test = test << 2;

    window.alert(test);

    var point = document.test.value1.value;
    pointcon = point.toString();

    window.alert("nice");
    window.alert(+pointcon);

    var point2 = eval(document.test.value2.value);

    var point3 = point + point2;
    alert(point3);
    */
    }

    </script>



    <head>
    <body>
    <form name = "test">
    First name: <input type="text" name = "value1" value1 = ""/><br />
    Last name: <input type="text" name = "value2" value2 = ""/>
    <input type = "button" value = "Submit" onClick="square(this.form)"/>
    </form>
    </body>

    </html>



    For ex: I need the point 3 variable and point 2 variable to be transferred to the query string..


    THanks a ton.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    That would seem to involve using hidden form values, then updating them from within the script.

    Why though are you squaring the "First name" value?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    its called function square but it doesn't compute any square...Irregular naming convention :P


    What do you mean by hidden values? I am a beginner to Javascript so can you please be a little clearer. Sorry for that..

  9. #9
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it looks like you want to just the send the values entered for first and last name to a php script.

    If that is the case, you don't need the javascript at all.

    You just need to add some parameters to your <form>, change the button to type="submit" and then submit the form.

    In the code below, your php script will receive to variables called

    $_POST['value1'] //will contain the first name

    $_POST['value2'] //will contain the last name

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    </head>
    <body>
     
    <form action="myPhpScript.php" method="post">
    First name: <input type="text" name = "value1" value = ""/><br />
    Last name: <input type="text" name = "value2" value = ""/>
    <input type = "submit" value = "Submit" />
    </form>
     
    </body>
    </html>

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Sure thing, with a hidden form value:

    Code html4strict:
    <input type="hidden" name="widgets">

    You can update its value (which in the form is always a string) from the script with:

    Code javascript:
    form.elements.widgets.value = widgetCount;
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually its a little complicated than that...


    When the user enters his first name and last name and on clicking submit, it should be directed towards a javascript function where some encryption needs to be done and after that the encrypted values are to be stored in point 1 and point 2. I have not included the encryption thing because I thought I would figure it out later.

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by gsashwin View Post
    Actually its a little complicated than that...

    When the user enters his first name and last name and on clicking submit, it should be directed towards a javascript function where some encryption needs to be done and after that the encrypted values are to be stored in point 1 and point 2. I have not included the encryption thing because I thought I would figure it out later.
    During which the visitor is capable of investigating everything that's going on, including the data being sent back to your server.

    Are you sure that's a good idea?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah wierd as it sounds that was one of the requirement.

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by gsashwin View Post
    Yeah wierd as it sounds that was one of the requirement.
    It may be wise then to advise your client on the lack of security in the requirement.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, then I would do something similar to this.

    I haven't done any error checking and I assume this is just an exercise and not a real lfe application because as pmw57 points out, this is not a secure way of doing things.

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <script  type="text/javascript">
     
    function sendForm() {
        var formO = document.getElementById("frm1");
        //reset the textbox values to the encrypted values
        document.getElementById("value1").value = encryptStr(document.getElementById("value1").value);
        document.getElementById("value2").value = encryptStr(document.getElementById("value2").value);
        //now submit the form
        formO.submit();
    }
     
    function encryptStr(str) {
     //put your encryption code here
        return strOut;
    }
     
    </script>
     
    </head>
    <body>
    <form id="frm1" action="myPhpScript.php" method="post">
    First name: <input type="text" name = "value1" id="value1" value = ""/><br />
    Last name: <input type="text" name = "value2" id="value2" value = ""/>
    <input type = "button" value = "Submit" onclick="sendForm();" />
    </form>
    </body>
    </html>

  16. #16
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your efforts. How are the variables being transferred to a php page?

  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by gsashwin View Post
    Thanks for your efforts. How are the variables being transferred to a php page?
    The form is set up to submit to a php page.

    Code html4strict:
    <form id="frm1" action="myPhpScript.php" method="post">

    The submit button in the form runs the script, which updates the form values.
    The form then submits the data to the php page.

    Q: This isn't homework is it?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #18
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and within myphpscript.php I can use the get property to access the variables recieved from Javascript right?

  19. #19
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by gsashwin View Post
    and within myphpscript.php I can use the get property to access the variables recieved from Javascript right?
    Currently the form submits the data using the post protocol, but it's not too hard to change that so that the form uses the get protocol.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  20. #20
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gsashwin View Post
    ...How are the variables being transferred to a php page?
    With form method = "post" I think they are added to the headers of the http request to the url of the action attribute in <form>

    With form method = "get" they are appended to to the action url as a query string (name value pairs of all your form inputs) and so everyone can easily see what is being sent.

    The php script receives the sent form data in arrays called $_POST or $_GET depending on the form's method value.

    So in the code I posted, your php script will receive 2 variables called

    $_POST['value1'] //will contain the first name

    $_POST['value2'] //will contain the last name

    have a look at this w3schools tutorial on forms.

  21. #21
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know I am pestering you but I am being helpless for that.. Really appreciate your efforts in this...

    The code below is not working



    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <script type="text/javascript">

    function sendForm() {
    var formO = document.getElementById("frm1");
    //reset the textbox values to the encrypted values
    var newval1 = encryptStr(document.getElementById("value1").value);
    var newval2 = encryptStr(document.getElementById("value2").value);
    window.alert(newval1);

    //now submit the form
    formO.submit();
    }

    function encryptStr(str) {
    //put your encryption code here

    var strOut = str + abc; // sample Encryption code
    return strOut;

    */
    }

    </script>

    </head>
    <body>
    <form id="frm1" action="myPhpScript.php" method="post">
    First name: <input type="text" name = "value1" id="value1" value = ""/><br />
    Last name: <input type="text" name = "value2" id="value2" value = ""/>
    <input type = "button" value = "Submit" onclick="sendForm();" />
    </form>
    </body>
    </html>

  22. #22
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gsashwin View Post
    I know I am pestering you but I am being helpless for that..
    That's ok - the bill's in the mail
    (just kiddin')

    This now works.

    But bear in mind, for the php script to receive the encrypted strings you will have to reset the textbox values in the form to the respective encrypted strings (newval1, newval2) before .submit() as in my previous code.

    Code:
     
    <script type="text/javascript">
     
    function sendForm() {
    var formO = document.getElementById("frm1");
    //reset the textbox values to the encrypted values
    var newval1 = encryptStr(document.getElementById("value1").value);
    var newval2 = encryptStr(document.getElementById("value2").value);
    window.alert(newval1);
     
    //now submit the form
    //formO.submit();  //comment out for testing purposes
    }
     
    function encryptStr(str) {
    //put your encryption code here
    var strOut = str + 'abc'; // sample Encryption code
    return strOut;
    }
    </script>

  23. #23
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot guys.. Your suggestions have helped me do this..



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script language="JavaScript" type="text/javascript">
    function xor_str()
    {

    var formO = document.getElementById("the_form");
    var username_val = document.forms['the_form'].elements["username"].value;
    var password_val = document.forms['the_form'].elements["password"].value;
    var xor_key='1234';
    var username_res="";
    var password_res=""
    for(i=0;i<username_val.length;++i)
    {
    username_res+=String.fromCharCode(xor_key^username_val.charCodeAt(i));
    }
    for(i=0;i<password_val.length;++i)
    {
    password_res+=String.fromCharCode(xor_key^password_val.charCodeAt(i));
    }
    // XOR is done

    //shifting the username_res to the left by 1 bit
    //username_res = username_res << 1;
    //shifting the password_res to the left by 1 bit
    //password_res = password_res << 1;

    //setting the xor'ed and shifted value for submission
    document.forms['the_form'].elements["username"].value = username_res;
    document.forms['the_form'].elements["password"].value = password_res;
    //alert("UserName: " + username_res);
    //alert("Password: "+ password_res);
    form0.submit();


    }
    </script>
    </head>

    <body>
    <form name="the_form" action="transfer.php" method = "post">
    <table>
    <tr><td colspan="3">Usernameinput type="text" name="username"></td></tr>
    <tr><td>Password: <input type="text" name="password"></td><td colspan="2"><input type="button" onClick="xor_str()" value="Submit"></td></tr>
    </table>
    </form>
    </body>
    </html>



    I hope this is right. I am able to encrypt.. Can you check once? Really appreciate the help again..


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •