Saving variable data from jQuery to PHP and getting it after page reload

Question

I'm new to PHP and trying to figure this out and still not understanding. I'm trying to take the value of a html text box in jQuery and turn it into a variable I can then store as a (variable or string?) and pull back again after a page refresh.

I want the user to hit a button that then executes the following:

$('.save').click(function () { 
    // pulls the value from the textarea
    var file = $('#subtext').val();
    // send to php to hold text
    $.ajax({
        url: '/mininote/system/data.php',
        type: 'POST',
        data: { textbox: file },
        success: function(data) {
            alert('Saved data to php!');
            $(save).text('All changes saved.').show().delay(3000).fadeOut(800);
        }
    });

});

Then receives the post data and stores in the php until the user reloads the page where it pulls data (or checks if there is any) from the php like so and replaces the value of the textbox with the value from the php:

$.ajax({
    url: '/mininote/system/data.php',
    type: 'GET',
    data: { textbox: file },
    success: function(data) {
        // add text back to text box
        $("#subtext").val(data);
    }
});

Basically what I'm looking for is below:-

a way to perform an ajax POST to insert the data grabbed from the textbox,
add to PHP
on a page reload use a GET request and replace textbox text with text from the PHP file.

What would I need to put into the PHP code? Or would it be easier to go in another direction? I've gotten this method to work in local storage. I also want browser compatibility for this work.

I don't need to set it up for a bunch of users. Any response that will increase my knowledge on this will help greatly.

EDIT: I'm really looking for something more server-side so it's usable across multiple platforms and devices.

Does the data matter server-side? Why not save yourself trouble and use JavaScript's sessionStorage? — Paul S.
– Paul S., Commented Aug 17, 2013 at 2:28
@DummyCode If it is done client-side then no ajax would be required, you don't have to worry about delays or synchronous-ness, the code is shorter, less server overhead, etc etc. — Paul S.
– Paul S., Commented Aug 17, 2013 at 2:40
It's more for personal use for now, I don't have the server capacity to expand it, and I have so many different computers and devices it would be nice to just save it that way(data on server). Plus at some point I plan to make it able to save the notes which is for a later day and another question. — Joey Gallegos
– Joey Gallegos, Commented Aug 17, 2013 at 2:42
@JoeyGallegos saving indefinitely with JavaScript would be localStorage, but if you want it shared across devices then yes it needs something server side. — Paul S.
– Paul S., Commented Aug 17, 2013 at 2:44

Ripa Saha · Accepted Answer · 2013-08-17 05:52:40Z

actually jquery-ajax works like below:-

it takes request and
it gives response.

For Your requirement You also need to follow this steps. so for this , You

send request to PHP page then
send response from php page

so replace Your above jquery-ajax code part with below:-

$('.save').click(function () { 
    // pulls the value from the textarea
    var file = $('#subtext').val();
    // send to php to hold text
$.ajax({
    url: '/mininote/system/data.php',
    type: 'POST',
    data: { textbox: file },
    success: function(data) {
        alert('Saved data to php!');
        $('#subtext').val(data);
        $(save).text('All changes saved.').show().delay(3000).fadeOut(800);
    }
});

});

make sure in Your data.php page textbox value has made echo after inserting data to DB. This process would be something like below:-

data.php

<?php
     $textbox = $_POST["textbox"];
        /*
             perform Your DB inser part here
         */
      if(data inserted to db)
      {
            echo $textbox;
      }
?>

Hope this will help You.

Zorayr · Accepted Answer · 2013-08-17 05:29:25Z

1

You could use the following simple PHP script to accomplish your goal:

<?php
session_start();

if (isset($_POST['textbox'])) {
   $_SESSION['textbox'] = $_POST['textbox'];
} else {
   echo $_SESSION['textbox'];
}
?>

Another option would be to use HTTP Cookies. Just set the cookie with JavaScript using a plugin or something simple such as, document.cookie = "variable=value"; and access it in PHP with, $_COOKIE["variable"].

Hope this helps.

edited Aug 17, 2013 at 5:29

answered Aug 17, 2013 at 2:32

Zorayr

25.1k9 gold badges148 silver badges139 bronze badges

Comments

MattLoszak · Accepted Answer · 2013-08-17 02:28:58Z

0

In the PHP code you could use a PHP session variable like so:

$_SESSION['saveMe'] = $saveMe;

Then get it later, even after a refresh, by using the session variable in php as you would normally use any variable.

For more info see http://www.w3schools.com/php/php_sessions.asp

answered Aug 17, 2013 at 2:28

MattLoszak

5852 gold badges5 silver badges15 bronze badges

Comments

user2638922 · Accepted Answer · 2013-08-17 02:36:20Z

0

Use a session, like a temporary cookie, like the following.

session_start();
$_SESSION['sessionName'] = $sessionVar;

Then you can destroy the session with, session_destroy();

See more here.

answered Aug 17, 2013 at 2:36

user2638922

Comments

Michael Antonius · Accepted Answer · 2013-08-17 04:51:55Z

0

Why you send it to PHP ?
Just saving in client-side with cookie is better and access in PHP with $_COOKIE

Download jQuery.cookie from :

carhartl/jquery-cookie and do :

$('.save').click(function () { 
// save data from textarea to cookie
var data = $.trim($('#subtext').val());
$.cookie('TEXTAREA_VALUE', data);
});

and go to read by PHP :

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

and to remove :

$.removeCookie('TEXTAREA_VALUE', { path: '/' });

Okay friend !

answered Aug 17, 2013 at 4:51

Michael Antonius

6210 bronze badges

Comments

bestprogrammerintheworld · Accepted Answer · 2013-08-17 05:05:18Z

Ajax is mainly used for sending data without reloading the webpage - from client(js) to serverside(php) or from serverside(php) to client(js). Make sure that name-attribute is given in the textarea and that method is set to post in the form. If I understand your issue correctly you could do something like this:

<?php
session_start();

if (isset($_POST['subtext'])) {
    $_SESSION['subtext_value'] = $_POST['subtext'];
}
if (isset($_SESSION['subtext_value'])) {
    $subtextValue = $_SESSION['subtext_value'];
}
else {
    $subtextValue = '';
}
?>
<html>
<body>
<form action="/mininote/system/data.php" method="post">
<textarea id="subtext" name="subtext"><?php echo $subtextValue;?></textarea>
<input type="submit" value="ok" />
</form>
</body>
</html>

Collectives™ on Stack Overflow

Saving variable data from jQuery to PHP and getting it after page reload

6 Answers 6

Comments

Comments

Comments

Comments

Download jQuery.cookie from :

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Download jQuery.cookie from :

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related