both submit data & load the message using ajax

Question

Reply div :

<a href="#" class="show_hide" style="text-align:right;">Reply</a>
<div class="slidingDiv">

<div class="container">
<div id="myDiv">
<a href="#" class="show_hide1" style="float:right; text-decoration:none; font-size:14px; font-weight:bold; color:#000;">
X</a>

<form method="post" name="form" action="">
<table width="97%" border="0">
 <tr height="100px">
<td>Message</td>
<td>:</td>
<td colspan="4"><textarea name="msg" cols="50" rows="6" required></textarea></td>
</tr>
<tr height="30px">
<td>Email</td>
<td>:</td>
<td><input name="email" type="email" required/></td>    
 <td>Mobile</td>
   <td>:</td>
     <td><input name="mob" type="text" required placeholder="+91" maxlength="10"/></td>
</tr>
 <tr height="30px">
<td colspan="6" align="right">
<input type="submit" value="Post" name="submit" class="submit_button" onclick="loadXMLDoc()"/></td>

 </tr>
 <div class="clear"></div>
</table>

<div class="clear"></div>
</form>
</div>
</div>

Ajax content :

Script for show hide div which is in while loop

<script type="text/javascript">
$(document).ready(function () {
var $slides = $(".slidingDiv").hide();
$(".show_hide").show().click(function () {
    //if it is the reply link then find the next element
    var $slider = $(this).next(".slidingDiv");
    if (!$slider.length) {
        //if the link inside the slider div is cliced then find the ancestor element
        $slider = $(this).closest(".slidingDiv");
    }
    $slides.not($slider).stop(true, true).slideUp();
    $slider.stop(true, true).slideToggle();
});
});
</script>

Ajax which ll send data to database

<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>

 <script>
 function loadXMLDoc()
 {
 var xmlhttp;
  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
 else
 {// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
 {
 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
 }
 }
xmlhttp.open("GET","ajax.txt",true);
xmlhttp.send();
}
</script>

reply.txt

message sent

Now the problem is, i ve while loop for reply .. so if im posting in the 3rd reply link, the 1st reply link got posted with msg sent mesage.. second validtion is not working drctly the reply.txt msg is showing n 3rd value is not inserting to database

Answer 1

Your HTML

<a href="#" class="show_hide" style="text-align:right;">Reply</a>
<div class="slidingDiv">

<div class="container">
<div id="myDiv">
<a href="#" class="show_hide1" style="float:right; text-decoration:none; font-size:14px; font-weight:bold; color:#000;">
X</a>

<form method="post" name="form" action="">
<table width="97%" border="0" id="myID"> // Added ID
 <tr height="100px">
<td>Message</td>
<td>:</td>
<td colspan="4"><textarea name="msg" cols="50" rows="6" required></textarea></td>
</tr>
<tr height="30px">
<td>Email</td>
<td>:</td>
<td><input name="email" type="email" required/></td>    
 <td>Mobile</td>
   <td>:</td>
     <td><input name="mob" type="text" required placeholder="+91" maxlength="10"/></td>
</tr>
 <tr height="30px">
<td colspan="6" align="right">
<input type="submit" value="Post" name="submit" class="submit_button" onclick="loadXMLDoc()"/></td>

 </tr>
 <div class="clear"></div>
</table>

<div class="clear"></div>
</form>
</div>
</div>

Your AJAX

function loadXMLDoc()
     {
     var xmlhttp;
      if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
     xmlhttp=new XMLHttpRequest();
     }
     else
     {// code for IE6, IE5
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
     xmlhttp.onreadystatechange=function()
     {
     if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
     $("#myId").css("display", "none"); // Add this
     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
     }
     }
    xmlhttp.open("GET","ajax.txt",true);
    xmlhttp.send();
    }

REMOVED $

<script type="text/javascript">
$(document).ready(function () {
var slides = $(".slidingDiv").hide();
$(".show_hide").show().click(function () {
    //if it is the reply link then find the next element
    var slider = $(this).next(".slidingDiv");
    if (!slider.length) {
        //if the link inside the slider div is cliced then find the ancestor element
        slider = $(this).closest(".slidingDiv");
    }
    slides.not($slider).stop(true, true).slideUp();
    slider.stop(true, true).slideToggle();
});
});
</script>