Reloading PHP Form results

Question

Is there any way that as soon as a user fills out a PHP form and hit's submit, the required query is executed and shown below and doesn't reload the page. (For example when user fills out a comments form and hits comment, it would show the comment immediately like facebook chat.)

this is what AJAX does or you can use jquery also for the same. — R R, Jan 04 '14 at 11:46
Is there any way to give me some code on how to do it? Sorry I am totally a fail in JavaScript and jQuery, I am mostly a Back-end developer. — user3152750, Jan 04 '14 at 11:47
http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form look up here — Trouble, Jan 04 '14 at 11:48
@user3152750 go though the link trouble provided also search in google you will find plenty of solutions. — R R, Jan 04 '14 at 11:49
I've looked up all over stackoverflow and nothing provides a full helpful source code. I checked but it was not helpful, it doesn't provide any HTML for me to process after submit. — user3152750, Jan 04 '14 at 11:50
http://stackoverflow.com/questions/17449120/passing-user-input-data-from-html-to-php-page-and-showing-the-content-back-to-ht — Shina, Jan 04 '14 at 12:02
http://www.akshitsethi.me/facebook-like-comments-system-using-php-jquery-and-ajax/ — StudioTime, Jan 04 '14 at 13:04

score 0 · Answer 1 · answered Jan 04 '14 at 11:54

I recommend using ajax/javascript and jquery. This is the way to do what you seek. Its not possible with only serverside coding. Jquery is easy and well documented.

Introduction to ajax and jquery: http://www.w3schools.com/jquery/jquery_ajax_intro.asp

Jquery: jquery.com

Jquery ajax: http://api.jquery.com/jquery.ajax/

score 0 · Accepted Answer · answered Jan 04 '14 at 12:04

Here's HTML Code

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
    <div id="container" style="min-height:100px;background:ccc">
    </div>
   <form action="#" method="post">
   <textarea id="textArea" onkeydown="displayResult(event)"></textarea>
   </form>
   <script>
  function sendData()
    {
        $.ajax({
             type: "POST",
             url: 'rest.php',
             data:"Formdata="+$("#textArea").val(),
             success: function (data)
             {
                $("#container").append("<h3>"+data+"</h3>");
            }
        });
    }

function displayResult(e) 
{
    var keycode;
    if (window.event) keycode = window.event.keyCode;
    else if (e) keycode = e.which;
    if(e && e.keyCode == 13)
    {
      sendData();
      $("#textArea").val('');
      $("#textArea").focus();
    }
 }


</script>
</body>
</html>

Here's PHP Side Code

<?php
$a=$_POST["Formdata"];
$con=mysql_connect("localhost","root","");
mysql_select_db("json",$con);
$x=mysql_query("insert into test(data) values('$a')");
echo $a;
?>

Reloading PHP Form results

2 Answers2