将表单数据发送到嵌套在div

时间:2015-09-21 05:00:49

标签: javascript php ajax forms

这是我第三次尝试找到这个问题的答案,每次我因为某种原因而被投票。所以我再试一次。我试图通过ajax从表单中的隐藏输入发送数据。隐藏的输入从php脚本中获取其值。现在我似乎无法在接收页面上拉出隐藏的输入值。现在我发送的表单是在php中生成和传播的,就像触发将表单发送到另一页面的ajax一样。

当我尝试从接收页面上的表单中调用信息时,它似乎没有从第一页接收数​​据。我假设这个的原因是我没有错误,它不会显示数据,但它会触发位于获取数组之前的回声。

这是第一页的代码。除了表单发送部分之外,它适用于我正在尝试的所有方面。我要离开很多,但是ajax和表格部分都在那里。

<?php


$con=mysqli_connect("localhost","base","password","util");
// Check connection
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sql = "SELECT * FROM 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);


?>   

这是接收页面。它加载但只显示回声。如果我在SELECT语句中删除WHERE,它将显示所有数据库结果(不是所需的)。

<?php


$con=mysqli_connect("localhost","base","password","util");
// Check connection
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$r = $_POST["f2"]['recipe'];
$sql = "SELECT * FROM recipes WHERE recipe ='".$r."'";
$result = mysqli_query($con,$sql);


echo "  2 ";



while ($row = mysqli_fetch_array($result)) {






echo "  " . $row['recipe'] ." ";


}

  mysqli_close($con);


?> 

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:1)

尝试使用id而不是表单名称发布序列化数据。请参阅下面的示例代码。

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

希望这会对你有所帮助。

请参阅以下更新的工作代码。

更新的答案:

<强> 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 as $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);


?>