Override (refresh) echo statement instead of adding it along with an old one

Question

I've created an input that allows user to update info about him/her. Input shows entered info immediately beyond it (I use AJAX). I maid everything work, the problem is that when a user decides to change personal info, enters some data and hits 'save' - it does not override or refresh the previous data shown but puts it underneath it.

My point is to allow user to immediately change info about him/her and display it right away and not to display new record along with old one.

Here's my index.php

<head>   
<script type="text/javascript">
$(function() {
$(".submit_button").click(function() {
var textcontent = $("#content").val();
var dataString = 'content='+ textcontent;
if(textcontent=='')
{
alert("Enter some text..");
$("#content").focus();
}
else
{
$("#flash").show();
$("#flash").fadeIn(400).html('<span class="load">Loading..</span>');
$.ajax({
type: "POST",
url: "action.php",
data: dataString,
cache: true,
success: function(html){
$("#show").after(html);
document.getElementById('content').value='';
$("#flash").hide();
$("#content").focus();
}  
});
}
return false;
});
});
</script>
</head>
<body>


<div class="container">

<div class="main">
<form  method="post" name="form" action="">
<textarea style="width:500px; font-size:14px; height:60px; font-weight:bold;   resize:none;" name="content" id="content" ></textarea><br />
<input type="submit" id="submit"value="Post" name="submit" class="submit_button"/>
</form>
</div>
<div class="space"></div>
<div id="flash" align="left"  ></div>
<div id="show" align="left"></div>
</div>
</body>
</html>

action.php

<?php
include('db.php');
$check = mysqli_query($conn,"SELECT * FROM user order by age desc");
if(isset($_POST['content']))
{
$content=$_POST['content'];
$ip=$_SERVER['REMOTE_ADDR'];


$query = "UPDATE user SET rain = '$content' WHERE name = 'gala'";
mysqli_query($conn,$query) or die("error querying record");
$fetch= mysqli_query($conn,"SELECT rain FROM user WHERE name = 'gala' LIMIT    1");
$result = mysqli_fetch_assoc($fetch);
}
?>

And here is where my input goes - here is the problem. It adds the new record while I want it to get refreshed!

<div class="showbox"> <?php echo $result['rain'];  ?> </div>

Thanks in advance!

please take care about sql injection and don't use user input directly in sql statements (for more information see http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) — Evil_skunk, Mar 19 '16 at 19:47

score 0 · Answer 1 · answered Mar 19 '16 at 19:43

In your ajax success callback you use jQuerys .after() function. After appends the given html (your div class "showbox") to the div with id "box". So everytime you hit save, another div.showbox will be added to DOM.

Use jQuerys .html() instead to replace already present content

Replace

$("#show").after(html);

with

$("#show").html(html);

Override (refresh) echo statement instead of adding it along with an old one

1 Answers1