2016-05-05 1 views
0

Эй, мне нужно знать, как размещать информацию на другой php-странице, используя javascript, чтобы предоставить таблицу предварительного просмотра.Как опубликовать информацию с помощью javascript для таблицы предварительного просмотра

Вот мой 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> 

Оттуда я хочу отправить его в каталог.

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

Если я могу получить другую страницу, чтобы получить эту переменную, я могу запустить команду MYSQL для получения информации. Вот как выглядит каталог.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) быть назначены в catalogue.php переменной $product_id. Спасибо за помощь.

+0

Oops! Просто исправлены две небольшие ошибки, теперь мой ответ должен работать нормально (добавлено 'target =" _ blank "и' id = "key" '). –

+0

Пока он работает, это не то, что мне нужно. Я хочу остаться на домашней странице, но пересылаю переменную, не выходя из home.php таким образом, я могу взять все из каталога catalog.php и опубликовать это в теге div – Mparry27

+0

Итак, вам нужен Ajax. Готово! Отредактировал мой ответ, чтобы добавить версию ajax. –

ответ

0

Вы можете добавить невидимую форму:

<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>"; 
?> 
Смежные вопросы