堆棧內存溢出
  簡體   English   中英

提交表格后刷新div？

[英]Refresh div after form submitted?

 原文  2012-08-17 10:13:12  8   4    php/ jquery/ mysql/ forms/ refresh

問題描述

我有一個表格，其中包含從數據庫中的數據中提取的結果（剩余產品數量）。 用戶可以使用帶有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 個解決方案

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

如您所說，當您單擊圖像時，它將正確地重新加載div ，但不會在表單的Submit事件上重新加載。 問題-提交表單后必須刷新頁面。 如果是這種情況，則必須通過在函數末尾添加return false來禁用默認表單提交。 

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

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

您應該考慮將PHP代碼放在單獨的php文件中，以便可以從您所在的任何頁面中調用它並在DIV中顯示。

修改后，您可以使用innerHTML來代替使用負載

因此，對庫存進行更改后，請重新運行查詢以顯示更新的信息。

AJAX 

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

其中queryResult是要插入DIV中的格式化HTML。

但是，如果您要顯示的內容是大量的HTML，這將是不合適的，但是如果它像您發布的內容一樣簡單，則效果很好，並且無需重新加載頁面即可更新DIV。

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

就像codef0rmer所說的那樣，您正在使用一個提交功能來刷新頁面。

Submit（function（））-刷新頁面，除非您輸入return false;

click（function（））-不刷新頁面

您可以對提交使用單擊功能，而不是手動提交和處理輸出。

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

您也可以嘗試類似的方法。

抱歉，我尚未真正完成或測試過它，但它應該使您走上正確的軌道

索引文件 

<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 

<?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);
?>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 提交表單（在div內）時刷新div（由jquery填充） 表單提交后回顯div類 頁面刷新后如何保留提交的表單數據？ 提交表單后顯示一個 div（或按下“發送”按鈕后） 提交HTML / PHP表單后，需要保持彈出式div打開 使用ajax提交ajax表單后，重新填充div（我認為！） 表單提交-提交后無刷新/隱藏Div 使用 AJAX 提交表單后刷新 div CodeIgniter-提交表格后刷新div 提交成功后刷新頁面
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM