How to have user submit text in form and AJAX it to enter to db and show up on same page?

Question

I want the user to fill it out. Submit it, have it store into the database and then use jquery to have it show up on the same page in front of them. Right now I can get it to se

Answer 1

Here is work flow:

1) User hits form submit.

2) You gather necessary information from DOM. You AJAX the information to a server-side script that enters that info into the database.

3) You use JQuery to insert the information however you want to display it into the DOM.

4) Remove whatever html you no longer need on the page if necessary.

In terms of code you are going to want to look at JQuery's ajax or post functions for the AJAX call.

Answer 2

Here is another way, if you use the serialize function built into jquery along with the $.post you won't have to actually write much code.

html form and html displaying the messages:

<form action="data.php" method="post" class="commentForm">
    <div>
        <label for="comment">Type here:</label>
        <textarea id="story" name="story" rows="2" cols="20">
        </textarea>
        <div id="txtHint"></div>
    </div>
    <div>
    <div><input type="submit" value="Submit" class="submit"/></div>
</form>
<ul class="messages">
    <li>Some old message</li>
    <li>Some other old message</li>
</ul>

jquery to send the new messages to your server from the client and placing new message into the DOM and resetting the html form

//bind a click even to the submit
$('.commentForm input[type=submit]').click(function(){
      $(this).closest('form').find('input[type=submit]').value('Submitting');
      $.post(
       $(this).closest('form').attr('action'),
       $(this).closest('form').serialize(),
       function(responseFromServer){
          //get the message from the html form (don't need to send it back from the server)
          var message = $(this).closest('form').find('textarea');
          $('.messages').append('<li>'+message+'</li>');

          //resetting the html form
          $(this).closest('form').find('textarea').html('');
          $(this).closest('form').find('input[type=submit]').value('Submit');
       }
     );
     //prevent the form from actually sending in the standard fashion by returning false
     return false;
});

php

//get the post variable and make it safe for inputting into the db
$message = mysql_real_escape_string(html_entities($_POST['story']));
if(!empty($message)){
   //assuming you have a db connection
   $insert_query = mysql_query("INSERT INTO textwalltable VALUES($message)");
   echo 'message entered';
} else {
   echo 'no message';
}

Answer 3

You can use a javascript function (using jquery) to handle those events. This method does not use a button, so you will need to create your own button that will call the following function:

function postPage() {
    $.post("post.php", $("#form_id").serialize(), function(){
        $("#display_id").load('display.php');
    });
}

You will need to have the post values processed in this case by "test.php", and then the contents of which you want to display back to the user after posting in display.php. The contents of display.php will be placed inside a div/container with the id of "display".