提交数据并使用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 i m 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>