javascript - 显示的摘要中的数据必须使用模式形式提交到数据库

Question

抱歉，英语不是我的母语。自从我刚刚使用 PHP 在数据库中存储数据(我使用的是 mysql)以来，我真的陷入了困境。

所以在我的 html 中我有主要

   function display() {
 var canvas = document.getElementById('displaycanvas');
 context = canvas.getContext('2d');
 context.clearRect(0, 0, canvas.width, canvas.height);

    if(document.getElementById('color1').checked){ context.strokeStyle="#FF0000"; } else if(document.getElementById('color2').checked){ context.strokeStyle="#0000FF"; }
    if (document.getElementById('shape1').checked) {
           context.beginPath(); context.arc(95,50,40,0,2*Math.PI); context.stroke(); }

    if (document.getElementById('shape2').checked) {
            context.beginPath(); context.rect(50, 27, 50, 100); context.stroke(); }
   }

$('#review').click(function () {
       $('#shape').html($('input[name="shape_design"]:checked').val());
       $('#color').html($('input[name="color_design"]:checked').val());
});

 

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="displaycanvas"></canvas>
    <form role="form" id="showchoices" name="showchoices" method="post" onsubmit="return entry_check()" action="/user/ps/add/">
           <div> <input type="radio" id="shape1" name="shape_design"   value="CIRCLE" onchange="display()" /> O 
            <input type="radio" id="shape2" name="shape_design"  value="RECTANGLE" onchange="display()" /> [] </div>

          <div>  <input type="radio" id="color1" name="color_design"  value="RED"  onchange="display()"/> RED  
            <input type="radio" id="color2" name="color_design"  value="BLUE" onchange="display()" /> BLUE </div>  </form> 
   
    <input type="button" name="btn" value="Review" id="review" data-toggle="modal" data-target="#con_rev" class="btn btn-primary" />

    <!-- this modal displays the SUMMARY,working fine -->
    <div class="modal fade" id="con_rev" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">Confirm Order</div>
                <div class="modal-body">
                  
                 <form action="#myModal1" role="form" method="POST"> <!-- display for the Order sent -->
                    <p> Shape: <span id="shape" name="shape" ></span> </p>
                    <p> Color: <span id="color" name="color" ></span> </p>
                    </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <input type="submit" class="btn btn-success" name="order"/>  </div>
            </div> </form>
        </div>
    </div>

上面的一切都工作正常，我只是想展示它的样子。

这就是它的工作原理。一旦用户选择了她/他的选择，首先它将显示一个“汇总”数据的模态，其模态 id="con_rev"。所以这里我们根据用户的选择显示数据。现在，当用户决定“订购”或提交其选择时，我创建了另一个模式。

HTML 页面中的模态相同:(这个不起作用)

<div id="myModal1" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">ORDER SENT</h4> </div>
            <div class="modal-body">
            <?php
            include 'database.php';
            $pdo = Database::connect();

            $shape = $_POST['shape'];
            $color = $_POST['color'];

    $dbc = @mysql_connect('localhost' , 'root', '');
    @mysql_select_db('order_db', $dbc);

    $query = "INSERT INTO choice VALUES(NULL, '$shape','$color')";

    if(@mysql_query($query,$dbc)){
        print '<h1> Your order has been sent </h1>';    }  
        else{ print '<p> failed. '.mysql_error().'</p>'; }
            ?>

            </div>
        </div>
    </div>
</div>

我遵循了不同来源的教程并将它们结合起来。它不会显示错误，但如果我要检查我的数据库，它仍然是空的。希望你能真正帮助我。如果您将使用 Ajax，我们的类(class)还没有解决这个问题，所以我不确定我是否可以进步，但如果这是我接受的唯一方法! 先感谢您!

Answer 1

首先，mysql_connect() 已被弃用，并已在 PHP 7.0.0 中删除

现在令我困惑的是，您通过以下方式获取 pdo 实例(可能是PDO 扩展名):

include 'database.php';
$pdo = Database::connect();

但根本没有使用它:

试试这个(我已使用 PDO 扩展来适应您的配置):

<div id="myModal1" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">ORDER SENT</h4> </div>
            <div class="modal-body">

<?php
$host = 'localhost';
$user = 'root';
$pass = '';
$database = 'order_db';

$shape = $_POST['shape'];
$color = $_POST['color'];

$options = array(
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_EMULATE_PREPARES => false
);

 try {
$pdo = new PDO("mysql:host=host;dbname=database", $user, $pass, $options);
}

catch (PDOException $e) {
      echo "connection error : <br> :";
      echo $e->getMessage();
    }    

    $sql = "INSERT INTO 'choice'  VALUES (:mynull, :shape, :color)";
    $statement = $pdo->prepare($sql);

     $statement->bindValue(':mynull', null, PDO::PARAM_INT);
     $statement->bindValue(':shape', $shape, PDO::PARAM_STR);
     $statement->bindValue(':color', $color, PDO::PARAM_STR);   
     $inserted = $statement->execute();

     if($inserted){
     echo 'Your order has been sent !<br>';
    }

?>

 </div>
        </div>
    </div>
</div>

也不要使用 @ ，它的目的是抑制错误，因此当错误抛出时你看不到它。