提交表格后刷新div？

Question

I have a form with results (amount of products left in stock) pulled from my data from a database. 我有一个表格，其中包含从数据库中的数据中提取的结果（剩余产品数量）。 The user is able to add and subtract to the stock using a form with 2 buttons (one to add and one to subtract). 用户可以使用带有2个按钮的表单（一个要添加，一个要减去）添加或减去股票。 The results are in the same table on the same page. 结果在同一页面的同一表中。

What I'd like to see is the results updated as soon as it is submitted. 我希望看到的结果是在提交后立即更新。

Because of this, I use the following code: 因此，我使用以下代码：

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

The whole table is in the id 'resultaten'. 整个表格都在id'resultaten'中。 When I have an image and use the following code, it does work (but only after the user clicks on the image, not on submit) 当我有图片并使用以下代码时，它确实可以工作（但仅在用户单击图片后才提交）

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

Is anybody out there with any idea how to make this work? 是否有人知道如何进行这项工作？

My complete HTML: 我完整的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);

Answer 1

As you said, when you click the image, it reloads the div properly but not on submit event of the form. 如您所说，当您单击图像时，它将正确地重新加载div ，但不会在表单的Submit事件上重新加载。 The problem - your page must be getting refreshed after submitting the form. 问题-提交表单后必须刷新页面。 If that is the case, then you have to disable the default form submission by putting return false at the end of the function. 如果是这种情况，则必须通过在函数末尾添加return false来禁用默认表单提交。

 $("#image").click(function() {
    $("#resultaten").load(location.href + " #resultaten > *");
    return false;
 });

Answer 2

You should consider having that PHP code be in a separate php file so it can be called from whatever page you're on and be displayed in a DIV. 您应该考虑将PHP代码放在单独的php文件中，以便可以从您所在的任何页面中调用它并在DIV中显示。

Instead of using a load, you can use innerHTML after modifications have taken place 修改后，您可以使用innerHTML来代替使用负载

So, after you've made changes to stock, re-run a query to display the updated information. 因此，对库存进行更改后，请重新运行查询以显示更新的信息。

AJAX AJAX

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

Where queryResult is the formatted HTML to insert back into your DIV. 其中queryResult是要插入DIV中的格式化HTML。

This won't be appropriate however if what you're trying to display is a ton of HTML, but if it's something simple like what you've posted, this will work nicely and it will update the DIV without reloading the page. 但是，如果您要显示的内容是大量的HTML，这将是不合适的，但是如果它像您发布的内容一样简单，则效果很好，并且无需重新加载页面即可更新DIV。

Answer 3

Like codef0rmer said you are using a submit function which refreshes the page. 就像codef0rmer所说的那样，您正在使用一个提交功能来刷新页面。

submit(function()) - refreshes page, unless you put return false; Submit（function（））-刷新页面，除非您输入return false;

click(function()) - doesn't refresh page click（function（））-不刷新页面

You can use a click function for the submit instead of submit and handle the outputs manually. 您可以对提交使用单击功能，而不是手动提交和处理输出。

Answer 4

You could also try something like this. 您也可以尝试类似的方法。

Sorry I haven't really finished it or tested it but it should set you on the right track 抱歉，我尚未真正完成或测试过它，但它应该使您走上正确的轨道

INDEX.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>

UPDATE.PHP UPDATE.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);
?>

提交表格后刷新div？

问题描述

4 个解决方案

解决方案1
0 2012-08-17 10:23:28

解决方案2
0 2012-08-17 10:24:04

解决方案3
0 2012-08-17 10:28:24

解决方案4
0 2012-08-17 12:40:51

提交表格后刷新div？

问题描述

4 个解决方案

解决方案1 0 2012-08-17 10:23:28

解决方案2 0 2012-08-17 10:24:04

解决方案3 0 2012-08-17 10:28:24

解决方案4 0 2012-08-17 12:40:51

解决方案1
0 2012-08-17 10:23:28

解决方案2
0 2012-08-17 10:24:04

解决方案3
0 2012-08-17 10:28:24

解决方案4
0 2012-08-17 12:40:51