如何使用javascript發布預覽表的信息

Question

嘿，我需要知道如何使用javascript將信息發布到另一個php頁面，以提供預覽表。

這是我的HTML，帶有一個onchange標記，該標記將productID發送到函數。

<form action="Home.php" method="Post">
    <div>
        <p>
            <span class="text">Please Select a product:</span>
            <select id="Select_Product" name="Select_Product" onchange="productInfo(this.value)" class="select">
            <?php
                //setting the select statement and running it
                $search = "SELECT * FROM Library.Products order by Name";
                $return = mysql_query($search);
                //echo "<select id=Select_Product name=Select_Product onchange=productInfo(this.value) class=select>";
                  while ($row = mysql_fetch_array($return)) {
                    echo "<option value='" . $row['ProductID'] . "' selected='selected'>".$row['Name'] . "</option>";
                }
            ?>
            </select>
        </p>
        <table>    
            <tr>
                <td>
                    <input name="action" type="submit"class="button" id="button_Add" value="Add"/>
                </td>
                <td>
                    <input name="action" type="submit" class="button" id="button_Remove" value="Remove"/>
                </td>
                <td>
                    <input name="action" type="submit" class="button" id="button_empty" value="Empty"/>
                </td>
            </tr>
        </table>
    </div>

從那里我希望它發送到catalogue.php。

<script>
    function productInfo(key) {
        //Send key to catalogue.php
    }
</script>

如果可以獲取另一個頁面來獲取該變量，則可以運行MYSQL命令以獲取信息。 這是catalogue.php目前的樣子。

<?php
$sql = "SELECT Name, Price FROM Library.Products WHERE ProductID = " . $product_id;
echo "<table border=\"1\" padding=\"3\" width=\"650px\"><tr><th>Name</th><th>Description</th><th>Price</th><th width=\"80px\">Image</th></tr>";
    echo "<tr>";
        echo "<td>" .$product_id . "</td>";
        echo "<td> Hi</td>";
        echo "<td></td>";
        echo "<td align=\"center\"><img alt=\"\" src=\"productImages/".$product_id.".jpg\ width=\"120\" height=\"120\"/></td>";
    echo "</tr>";
echo "</table><br>";
document.
?>

因此，從某種意義上講，我想將productInfo(key)中的productInfo(key)分配給catalogue.php中的變量$product_id 。 感謝您的幫助。

Answer 1

您可以添加不可見的形式：

<script>
    function productInfo(key) {
        //Send key to catalogue.php
        document.getElementById( "key" ).value = key;
        document.getElementById( "frm" ).submit(); // SUBMIT FORM.
    }
</script>
<form action="catalogue.php" method="post" id="frm"
      style="display:none" target="_blank">
  <input type="text" id="key" name="key"/>
</form>

catalogue.php需要一點改動：

<?php
$product_id = $_POST[ "key" ]; //<================== VALUE FROM THE INVISIBLE FORM.
$sql = "SELECT Name, Price FROM Library.Products WHERE ProductID = " . $product_id;
echo "<table border=\"1\" padding=\"3\" width=\"650px\"><tr><th>Name</th><th>Description</th><th>Price</th><th width=\"80px\">Image</th></tr>";
    echo "<tr>";
        echo "<td>" .$product_id . "</td>";
        echo "<td> Hi</td>";
        echo "<td></td>";
        echo "<td align=\"center\"><img alt=\"\" src=\"productImages/".$product_id.".jpg\ width=\"120\" height=\"120\"/></td>";
    echo "</tr>";
echo "</table><br>";
document.
?>

或者您可以使用Ajax：

html文件

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type = "text/javascript">
function myAjax ( key ) {
$.ajax( { type : 'POST',
          data : { 'param' : key },
          url  : 'catalogue.php',
          success: function ( data ) {
            document.getElementById( "my_div" ).innerHTML = data;
          },
          error: function ( data ) {
            alert( "error" );
          }
        });
}
function productInfo( key ) {
//Send key to catalogue.php
myAjax( key );
}
    </script>
  </head>
  <body>
    <button onclick="productInfo('123')">Click here to get the data</button>
    <div id="my_div">
      - data will show here -
    </div>
  </body>
</html>

catalogue.php

<?php
$key = $_POST[ "param" ];
echo "<table border='1'>" .
     "  <tr>" .
     "    <td>$key</td>" .
     "    <td>ABC</td>" .
     "  </tr>" .
     "</table>";
?>

如何使用javascript發布預覽表的信息

問題描述

1 個解決方案

解決方案1
0 2016-05-05 20:41:40

如何使用javascript發布預覽表的信息

問題描述

1 個解決方案

解決方案1 0 2016-05-05 20:41:40

解決方案1
0 2016-05-05 20:41:40