javascript - Sending form data to page nested in div -

this third attempt find answer question, every other time downvoted 1 reason or another. try again. attempting send data hidden input within form via ajax. hidden input gets value php script. can not seem pull hidden input value on receiving page. form sending generated , propagated within php ajax fires send form other page.

when attempt call info form on receiving page not seem receive data first page. reason assume no errors , not display data fire echo located before fetch array.

here code first page. works in aspects trying except form sending portion. leaving lot out ajax , form portions in there.

<?php   $con=mysqli_connect("localhost","base","password","util"); // check connection if (mysqli_connect_errno()) {   echo "failed connect mysql: " . mysqli_connect_error(); } $sql = "select * recipes"; $result = mysqli_query($con,$sql);  while($row = mysqli_fetch_array($result)) {               echo"             <script>    $(document).ready(function() {//start document ready       $('#" . $row['id'] ."').click(function (e){         e.preventdefault();          $.ajax({         type: 'post',         url: 'http://localhost/pages/receivingpage.php',         data: $(\"f2\").serialize(), success: function(d){    $(\"#content-disp\").html(d); }     });   });  });//end document ready </script>           <div id=\"covera\">          <div id=\"holder\" class=\"holder\">   <div id=\"disp\" class=\"disp\">  <div class=\"click diagonal panel\">     <div id=\"" . $row['id'] ."\"  class=\"front\">     <form id=\"" . $row['recipe'] ."\" name=\"f2\">     <input type=\"hidden\" name=\"recipe\" value=\"" . $row['recipe'] ."\">         <h2>         " . $row['recipe'] ."<br></h2>      <img src=\"http://localhost/img/" . $row['image'] ."\" alt=\"recipe image\" style=\"width:150px;height:100px;\">      </form>      </div>       <div class=\"back\">         <div class=\"pad\">             <h2>" . $row['recipe'] ."</h2>              <p>" . $row['id'] ."</p>             <p>" . $row['id'] ."</p>                         <p>number of servings " . $row['servings'] ."</p>             <p>appx. cooking time: " . $row['cooking'] ." minutes</p>             <p>numer of calories: " . $row['calories'] ."</p>         </div>     </div> </div>  </div>                   </div>              </div>";   }    mysqli_close($con);   ?>    

here receiving page. loads displays echo. if remove within select statement displays database results(not desired).

<?php   $con=mysqli_connect("localhost","base","password","util"); // check connection if (mysqli_connect_errno()) {   echo "failed connect mysql: " . mysqli_connect_error(); } $r = $_post["f2"]['recipe']; $sql = "select * recipes recipe ='".$r."'"; $result = mysqli_query($con,$sql);   echo "  2 ";    while ($row = mysqli_fetch_array($result)) {       echo "  " . $row['recipe'] ." ";   }    mysqli_close($con);   ?>  

any appreciated.

try posting serialized data using id instead of name of form. see below example code.

data: $(\"#f2\").serialize(), 

hope you.

see below updated working code.

updated answer:

page1.php

</script> <?php      $rows[0]['id'] = 1;     $rows[0]['recipe'] = "veg rec";     $rows[0]['cooking'] = "hot cooking";     $rows[0]['calories'] = 1000;     $rows[0]['image'] = "image.png";     foreach ($rows $key => $row) {     # code...     echo"             <div id=\"covera\">          <div id=\"holder\" class=\"holder\">   <div id=\"disp\" class=\"disp\">  <div class=\"click diagonal panel\">     <div id=\"" . $row['id'] ."\"  class=\"front\">     <form id2=\"" . $row['recipe'] ."\" id=\"f2\">     <input type=\"hidden\" name=\"recipe\" value=\"" . $row['recipe'] ."\">         <h2>         " . $row['recipe'] ."<br></h2>      <img src=\"http://localhost/img/" . $row['image'] ."\" alt=\"recipe image\" style=\"width:150px;height:100px;\">      </form>      </div>       <div class=\"back\">         <div class=\"pad\">             <h2>" . $row['recipe'] ."</h2>              <p>" . $row['id'] ."</p>             <p>" . $row['id'] ."</p>                         <p>number of servings " . $row['servings'] ."</p>             <p>appx. cooking time: " . $row['cooking'] ." minutes</p>             <p>numer of calories: " . $row['calories'] ."</p>         </div>     </div> </div>  </div>                   </div>              </div>    <script>    $(document).ready(function() {//start document ready       $('#" . $row['id'] ."').click(function (e){         e.preventdefault();          $.ajax({         type: 'post',         url: 'page2.php',         data: $(\"#f2\").serialize(), success: function(d){    $(\"#content-disp\").html(d); }     });   });  });//end document ready </script>               ";   }  ?>   

page2.php

<?php  print_r($_post);   ?>