提交表單後刷新div？

我有一張表格，其中包含從我的數據庫中提取的數據的結果（庫存產品數量）。用戶可以使用帶有2個按鈕的表單（一個用於添加，另一個用於減少）添加和減去股票。結果在同一頁上的同一張表中。提交表單後刷新div？

我想看到的結果是一旦提交就更新結果。

正因爲如此，我使用下面的代碼：

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

整個表是 'resultaten' 的ID。當我有一個形象，並使用下面的代碼，它的工作（但只能在圖像上的用戶點擊後，不提交）

$(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);

來源

2012-08-17 user1540744

如果你使你的確切問題更清楚，這將有所幫助。謝謝！ – 2012-08-17 10:20:54

正如你所說，當你點擊圖片，它重新加載div正常，但不提交表單的事件。問題 - 您的頁面在提交表單後必須刷新。如果是這種情況，那麼你必須通過在函數的末尾放置return false來禁用默認表單提交。

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

來源

2012-08-17 10:23:28 codef0rmer

我可能還不夠清楚，但我試圖在不使用圖像的情況下刷新它（因爲圖像按照我發佈的方式工作）。點擊按鈕時，我希望它刷新，甚至沒有圖像。感謝您一起看看！ – user1540744 2012-08-17 10:31:39

'我想看到的是一旦它被提交就更新結果。' - 你是什麼意思？它是否按預期工作？ – codef0rmer 2012-08-17 10:47:40

當我目前提交頁面時，我沒有立即看到更改。我只看到刷新頁面的時間。 – user1540744 2012-08-17 11:10:28

您應該考慮具有PHP代碼是在一個單獨的PHP文件，因此它可以從你在任何頁面，並顯示在一個DIV被調用。

而不是使用的負載，可以使用innerHTML改變已經發生

後，所以，你已經更改了股票後，重新運行一個查詢，顯示更新的信息。

AJAX

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

哪裏queryResult是格式化的HTML插入回到您的DIV。

但是，如果您要顯示的是大量的HTML，但如果它的內容與您發佈的內容一樣簡單，這將會很好地工作，並且它將更新DIV而不重新加載頁。

來源

2012-08-17 10:24:04 Dorian

我似乎無法解決這個問題，請注意，我仍然是初學PHP和所有人，所以我嘗試了以下方法：' var stockDisplay = document.getElementById（'resultaten'）; stockDisplay.innerHTML = queryResult;'（changed stockDiv resultaten）因爲這是div的名稱但是，我得到錯誤'Parse error：syntax error，第79'行的C：\ xampp \ htdocs \ 2golocal \ aantal \ aantal.php出現了意外的T_VAR 這可能是一件非常簡單的事情，但我似乎無法弄清楚它的真實性，謝謝 – user1540744 2012-08-17 10:35:23

好的，所以我只是reali sed我需要把它放在jQuery中。衛生署。我的jQuery現在看起來是這樣的：'$（函數（）{//當文件的準備，元件裝入 $（「vernieuwknop。」）運行點擊（函數（）{ $（「＃resultaten」）的負載。（location.href + 「#resultaten> *」）; \t }）; 變種stockDisplay =的document.getElementById（ 'resultaten'）; stockDisplay.innerHTML = QueryResult中; }）;' 它現在提交表單，但它仍然不顯示更新的數據。 – user1540744 2012-08-17 11:56:40

看到我的其他答案，可能是一個更好的開始。對不起，它不是真正完成或測試，但應該設置在正確的道路上。 – Dorian 2012-08-17 12:41:35

Like codef0rmer表示您正在使用刷新頁面的提交功能。

submit（function（）） - 刷新頁面，除非你把return返回false;

點擊（函數（）） - 不刷新頁面

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

來源

2012-08-17 10:28:24

這不起作用，當我使用click（function（））時，它不提交表單。 – user1540744 2012-08-17 11:12:29

這是整個想法，你不需要提交表單來獲取值。您可以使用ajax來完成該圈並向服務器發送所需的所有輸入。並且因爲它沒有提交，所以沒有刷新，而且它瞬間發生。檢查XTORO的AJAX答案 – 2012-08-17 11:19:02

所以你的意思是，忽略來自HTML標籤的POST方法並使用Ajax提交表單？我沒有使用Ajax的經驗，所以對我來說這會有點兒麻煩，但這對我來說可能是一個更好的解決方案。謝謝。 – user1540744 2012-08-17 11:42:23

你也可以嘗試這樣的事情。

對不起，我還沒有真正完成它或測試，但它應該設置你在正確的軌道

上的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

<?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-17 12:40:51 Dorian

這看起來好像很多，但index.php的'resultaten' div中的所有PHP代碼與update.php中的代碼相同，只是更新內容不同。PHP有2'IF'語句來添加或減少你的表。這允許'resultaten' div在頁面首次加載時被填充。並注意+和 - 按鈕現在調用一個函數onclick，將調用update.php併發送它的值做你想做的（行ID）。然後div更新爲來自update.php的最新'SELECT'結果。 – Dorian 2012-08-17 12:57:04

哇，謝謝你的代碼！我剛剛嘗試過，但遇到了一個錯誤， '分析錯誤：語法錯誤，意外的T_STRING，期待'，'或';'在C：？\ XAMPP \ htdocs中\上線2golocal \ aantal \的index.php 33' 我注意到這是addFunc和subFunc的原因，因此我改變了代碼 '{> <輸入類=」 vernieuwknop'type ='button'name ='add'value ='+'onclick =「addFunc（'。$ row ['id'''。'）」> <？php} 'in index.php and update.php ，但是之後，頁面顯示但不起作用。 – user1540744 2012-08-17 13:01:11

啊，我搞砸了一些引用，並逃脫了我不應該擁有的東西。再試一次，我編輯了我發佈的代碼。我改變了while循環中的echo（對於索引和更新）。您不需要製作多個單獨的回波線，即使它有多條線，比如我如何改變它，只要一條就可以工作。 – Dorian 2012-08-17 15:19:27

提交表單後刷新div？

回答

相關問題