0

我有一个表格，其中包含从数据库中的数据中提取的结果（库存产品数量）。用户可以使用带有 2 个按钮（一个用于添加，一个用于减去）的表单来添加和减去库存。结果在同一页的同一张表中。

我希望看到的是提交后立即更新的结果。

因此，我使用以下代码：

 $(function() {       //run when the document's ready, elements are loaded
  $("form").submit(function() {
    $("#resultaten").load(location.href + " #resultaten > *");
  });
});

整个表在 id 'resultaten' 中。当我有一张图片并使用以下代码时，它确实有效（但仅在用户点击图片后，而不是在提交时）

$(function() {       //run when the document's ready, elements are loaded
  $("#image").click(function() {
    $("#resultaten").load(location.href + " #resultaten > *");
  });
});

有没有人知道如何使这项工作？

我的完整 HTML：

$con = mysql_connect("localhost","xx","xx");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("aantal", $con);

$result = mysql_query("SELECT * FROM voorraad");

echo "<div id='resultaten'><table border='1'>
<tr>
<th>Product</th>
<th>Aantal</th>
<th>Aantal erbij/eraf</th>
<th>Erbij</th>
<th>Eraf</th>
</tr>";

while($row = mysql_fetch_array($result))
  {
  echo "<form name='form' method='post'><tr>";
  echo "<td>" . $row['product'] . "</td>";
  echo "<td class='aantal-" . $row['stock'] . "'>" . $row['stock'] . "</td>";
  echo "<td><input type='text' name='aantal'></td>";
  echo "<td><input class='vernieuwknop' type='submit' name='add' value='+'></td>";
  echo "<td><input class='vernieuwknop' type='submit' name='subtract' value='-'></td>";
  echo "<td><input style='display: none;' type='text' name='idtje' value='" . $row['id'] . "'></td>";
  echo "</tr></form>";
  }
echo "</table></div>";

if(isset($_POST['add'])){
    $add=$_POST['aantal'];
    $idtje=$_POST['idtje'];
    $query="update voorraad set stock=stock+$add where id=$idtje";
    mysql_query($query) or die("Cannot update");
}
if(isset($_POST['subtract'])){
    $subtract=$_POST['aantal'];
    $idtje=$_POST['idtje'];
    $query="update voorraad set stock=stock-$subtract where id=$idtje";
    mysql_query($query) or die("Cannot update");
}


mysql_close($con);
4

4 回答 4

0

正如您所说，当您单击图像时，它会重新加载div正确但不是表单的提交事件。问题 - 您的页面必须在提交表单后刷新。return false如果是这种情况，那么您必须通过在函数末尾放置来禁用默认表单提交。

 $("#image").click(function() {
    $("#resultaten").load(location.href + " #resultaten > *");
    return false;
 });
于 2012-08-17T10:23:28.687 回答
0

您应该考虑将 PHP 代码放在单独的 php 文件中，以便可以从您所在的任何页面调用它并显示在 DIV 中。

您可以在修改发生后使用innerHTML，而不是使用加载

因此，在您对库存进行更改后，重新运行查询以显示更新的信息。

AJAX

var stockDisplay = document.getElementById('stockDiv');
stockDisplay.innerHTML = queryResult;

queryResult要插入 DIV 的格式化 HTML在哪里。

但是，如果您要显示的是大量 HTML，那么这将不合适，但是如果它像您发布的内容一样简单，那么它将很好地工作，并且它将在不重新加载页面的情况下更新 DIV。

于 2012-08-17T10:24:04.190 回答
0

就像codef0rmer说的那样，您正在使用刷新页面的提交功能。

submit(function()) - 刷新页面，除非你把 return false;

click(function()) - 不刷新页面

您可以使用单击功能进行提交，而不是手动提交和处理输出。

于 2012-08-17T10:28:24.777 回答
0

你也可以尝试这样的事情。

抱歉，我还没有真正完成或测试它，但它应该让你走上正确的轨道

索引.PHP

<HTML>
<BODY>

Some content here

<div id='resultaten'>
<?PHP
$con = mysql_connect("localhost","xx","xx");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("aantal", $con);

$result = mysql_query("SELECT * FROM voorraad");

echo "<table border='1'>
<tr>
<th>Product</th>
<th>Aantal</th>
<th>Aantal erbij/eraf</th>
<th>Erbij</th>
<th>Eraf</th>
</tr>";

while($row = mysql_fetch_array($result))
  {
    echo "<form name='form' method='post'><tr>
    <td>".$row['product']."</td>
    <td class='aantal-".$row['stock']."'>".$row['stock']."</td>
    <td><input type='text' name='aantal'></td>
    <td><input class='vernieuwknop' type='button' name='add' value='+'  onclick=\"addFunc('".$row['id']."')\"></td>
    <td><input class='vernieuwknop' type='button' name='subtract' value='-'  onclick=\"subFunc('".$row['id']".')\"></td>
    </tr></form>";
  }
echo "</table>";

mysql_close($con);
?>
</div>

More Content if you want....

<script type="text/javascript">

function addFunc(rowID) {
    $.ajax({
    type: "GET",
    url: "update.php?add=+?idtje="+ rowID ,
    success: function(html) {
    if(html){       
        $("#resultaten").innerHTML=html;
        }
    }
    });
}


function subFunc(rowID) {
    $.ajax({
    type: "GET",
    url: "update.php?subtract=-?idtje="+ rowID ,
    success: function(html) {
    if(html){       
        $("#resultaten").innerHTML=html;
        }
    }
    });
}

</script>

</BODY>
</HTML>

更新.PHP

<?PHP
$con = mysql_connect("localhost","xx","xx");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("aantal", $con);

if(isset($_POST['add'])){
    $add=$_POST['aantal'];
    $idtje=$_POST['idtje'];
    $query="update voorraad set stock=stock+$add where id=$idtje";
    mysql_query($query) or die("Cannot update");
}
if(isset($_POST['subtract'])){
    $subtract=$_POST['aantal'];
    $idtje=$_POST['idtje'];
    $query="update voorraad set stock=stock-$subtract where id=$idtje";
    mysql_query($query) or die("Cannot update");
}    

$result = mysql_query("SELECT * FROM voorraad");

echo "<table border='1'>
<tr>
<th>Product</th>
<th>Aantal</th>
<th>Aantal erbij/eraf</th>
<th>Erbij</th>
<th>Eraf</th>
</tr>";

while($row = mysql_fetch_array($result))
  {
    echo "<form name='form' method='post'><tr>
    <td>".$row['product']."</td>
    <td class='aantal-".$row['stock']."'>" .$row['stock']."</td>
    <td><input type='text' name='aantal'></td>
    <td><input class='vernieuwknop' type='button' name='add' value='+'  onclick=\"addFunc('".$row['id']."')\"></td>
    <td><input class='vernieuwknop' type='button' name='subtract' value='-'  onclick=\"subFunc('".$row['id']".')\"></td>
    </tr></form>";
  }
echo "</table>";



mysql_close($con);
?>
于 2012-08-17T12:40:51.963 回答