Insert to database and show form submission in real time...

[Jim R]

I don't work with JS at all--php a lot though--but I'm hoping some small input can help me see the logic in it.  This is part of another problem I had, which has led me to the JS portion of it.  The below code allows the User to submit a message and have it show up on the screen in real time, without a refresh.  The middle part of it is interaction with a database.

 

Here is the demo:  http://demos.9lessons.info/update_delete.php

 

 

My issue is I have a form where I'd like it to include the person's first and last name (actually more than that).  In searching for the answer here and the internet in general, I find examples of form submission, serialized data, etc, but nothing that I can make enough sense to fit it into the below code. 

 

My main interest is the real time nature of it.  Otherwise, I can easily set up my form to Insert, present a new form, and show an updated list to the User via a refresh after submitting data.  Basically, it's coaches creating a roster online.

 

How do I go about adding the fields I need to include? 

 

 

<script type="text/javascript">


$(function() {

$(".comment_button").click(function() 
{


var element = $(this);
   
    var boxval = $("#content").val();

    var dataString = 'content='+ boxval;

if(boxval=='')
{
alert("Please Enter Some Text");

}
else
{
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="ajax.gif" align="absmiddle"> <span class="loading">Loading Update...</span>');
$.ajax({
	type: "POST",
  url: "/live_update/update_data.php",
   data: dataString,
  cache: false,
  success: function(html){

  $("ol#update").prepend(html);
  $("ol#update li:first").slideDown("slow");
   document.getElementById('content').value='';
  $("#flash").hide();

  }
});
}
return false;
});


$('.delete_update').live("click",function() 
{
var ID = $(this).attr("id");
var dataString = 'msg_id='+ ID;

if(confirm("Sure you want to delete this update? There is NO undo!"))
{

$.ajax({
type: "POST",
url: "/live_update/delete_data.php",
  data: dataString,
cache: false,
success: function(html){
$(".bar"+ID).slideUp('slow', function() {$(this).remove();});
}
});

}

return false;
});

});
</script>