why when i reload a page using AJAX the data disappears
why when i reload a page using AJAX the data disappears
Basically i find code on the internet to test and use it.
the problem is that when i reload the page, the data disappears.
what i want to happen is for the data or the value to just stay.
Thanks guys
Here is the code in index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pass Data to PHP using AJAX without Page Load</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Enter Some Data Pass to PHP File</h2>
<div class="row">
<div class="col-md-3">
<form>
<div class="form-group">
<input type="text" id="pass_data" class=" form-control">
<input type="button" class="btn btn-success" onclick="passData();" value="Set">
<p id="message"></p>
</div>
</form>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function passData()
var name = document.getElementById("pass_data").value;
var dataString = 'pass=' + name;
if (name == '')
alert("Please Enter the Anything");
else
// AJAX code to submit form.
$.ajax(
type: "POST",
url: "post.php",
data: dataString,
cache: false,
success: function(data)
$("#message").html(data);
,
error: function(err)
alert(err);
);
return false;
</script>
</html>
and here is my php code
<?php
$pass=$_POST['pass'];
echo json_encode($pass);
?>
Start by replacing
data: dataString, with data: pass: name,– RiggsFolly
Aug 21 at 9:39
data: dataString,
data: pass: name,
Sorry, still on my first coffee. Got there in the end
– RiggsFolly
Aug 21 at 9:40
@RiggsFolly thank u for recumendation.
– jeffrey acenas
Aug 21 at 9:43
i try data: pass: name but still not working.
– jeffrey acenas
Aug 21 at 9:44
2 Answers
2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pass Data to PHP using AJAX without Page Load</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Enter Some Data Pass to PHP File</h2>
<div class="row">
<div class="col-md-3">
<form>
<div class="form-group">
<input type="text" id="pass_data" class=" form-control">
<input type="button" id="success" class="btn btn-success" value="Set">
<p id="message"></p>
</div>
</form>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$("#success").click(function ()
var name = document.getElementById("pass_data").value;
var dataString = 'pass=' + name;
if (name == '')
alert("Please Enter the Anything");
else
// AJAX code to submit form.
$.ajax(
type: "POST",
url: "post.php",
data: dataString,
cache: false,
success: function (data)
$("#message").html(data);
localStorage.setItem("data",data);
,
error: function (err)
alert(err);
);
return false;
)
$(document).ready(function ()
var someVarName = localStorage.getItem("data");
console.log(someVarName)
$("#message").html(someVarName);
);
</script>
</html>
First of all i changed your js code to use more jquery syntax, as you already have included it (i trigger the on click event on the script and i don't put it in in html). After that in order not to lose your variable after refresh on ajax success i pass the value of data to localstorage, and after refresh (on document ready) i retrieve it and display it in the label.
data
Of course every time you put a new value and display it, it over-writes the previous one, so after refresh you display the latest value put in your input field.
thank u very much
– jeffrey acenas
Aug 21 at 10:54
You're welcome glad i helped you!!!
– pr1nc3
Aug 21 at 10:55
can i set this to interval ?
– jeffrey acenas
Aug 21 at 11:38
Think it like this. Local storage saved the value of your variable when you refresh the page. That means that when you refresh you variable (data) has it's previous value already set. That means that you can use it anywhere you want. BUT if you want to save more values on page refresh then you must put them also in the local storage or create sessions in the back-end.
– pr1nc3
Aug 21 at 11:40
I am not sure I understand what you mean but...
Before this line:
<!DOCTYPE html>
enter
<?php session_start(); ?>
In this line add
<input type="text" id="pass_data" class=" form-control" value="<?php echo $_SESSION['VAL']; ?>">
and in your php file:
<?php session_start();
$pass=$_POST['pass'];
$_SESSION['VAL'] = $pass;
echo json_encode($pass);
?>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Some sensible code indentation would be a good idea. It helps us read the code and more importantly it will help you debug your code Take a quick look at a coding standard for your own benefit. You may be asked to amend this code in a few weeks/months and you will thank me in the end.
– RiggsFolly
Aug 21 at 9:36