按鈕單擊後更新數據庫

我有一個動態表，可以內聯編輯或可以動態添加行。我希望能夠點擊保存按鈕來運行UPDATE查詢來更新數據庫。但我無法弄清楚如何。我真的堅持這一點，並會感謝任何幫助。按鈕單擊後更新數據庫

這裏是一個codepen：http://codepen.io/anon/pen/yawyQQ

你可以發現，大部分的代碼在codepen ......我將提供一些我的HTML/PHP代碼和ajaxSubmit的代碼。

HTML/PHP代碼：

<html> 

    <head> 
     <title>Stage Rebate Master HTML Table</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
     <link rel="stylesheet" type="text/css" href="html_master.css"> 
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
     <script type="text/javascript" src="html_master.js"></script> 
    </head> 

    <label id="table_name">Stage_Rebate_Master</label><br> 

<body>  

<div id="dialog-form" title="Add Vendor"> 
    <p class="validateTips">All form fields are required.</p> 

    <form> 
    <fieldset> 
     <label for="mr_name">Vendor</label> 
     <input type="text" name="mr_name" id="mr_name" class="text ui-widget-content ui-corner-all"> 
     <label for="buyer_id">Buyer ID</label> 
     <input type="text" name="buyer_id" id="buyer_id" class="text ui-widget-content ui-corner-all"> 
     <label for="poc_n">POC Name</label> 
     <input type="text" name="poc_n" id="poc_n" class="text ui-widget-content ui-corner-all"> 
     <label for="poc_p">POC Email</label> 
     <input type="text" name="poc_e" id="poc_e" class="text ui-widget-content ui-corner-all"> 
     <label for="poc_p">POC Phone</label> 
     <input type="text" name="poc_p" id="poc_p" class="text ui-widget-content ui-corner-all"> 

     <!-- Allow form submission with keyboard without duplicating the dialog button --> 
     <input type="submit" id="submit" tabindex="-1" style="position:absolute; top:-1000px"> 
    </fieldset> 
    </form> 
</div> 



<div id="users-contain" class="ui-widget"> 
<table id="html_master" class="ui-widget ui-widget-content"> 
<thead> 
    <tr class="ui-widget-header"> 
    <td>ID</td> 
    <td>Vendor</td> 
    <td>Buyer ID</td> 
    <td>POC Name</td> 
    <td>POC Email</td> 
    <td>POC Phone</td> 
    <td>Edit/Delete</td> 
    </tr> 
</thead> 
<tbody> 

<?php 
    foreach ($dbh->query($sql) as $rows){ 
    ?> 
    <tr> 
     <td class="mr_id" contenteditable="false"><?php echo intval ($rows['MR_ID'])?></td> 
     <td class="mr_name" contenteditable="false"><?php echo $rows['MR_Name']?></td> 
     <td class="buyer_id" contenteditable="false"><?php echo $rows['Buyer_ID']?></td> 
     <td class="poc_n" contenteditable="false"><?php echo $rows['MR_POC_N']?></td>  
     <td class="poc_e" contenteditable="false"><?php echo $rows['MR_POC_E']?></td> 
     <td class="poc_p" contenteditable="false"><?php echo $rows['MR_POC_P']?></td> 
     <td><input type="button" class="edit" name="edit" value="Edit"> 
     <input type="button" class="deactivate" name="deactivate" value="Deactivate"></td> 
    </tr> 
<?php 
    } 
?> 
</tbody> 

    <input type="button" class="create-user" value="Add Row"> 
    <input type="submit" value="Save Table" class="save"> 

</table> 
</div> 

    <input type="button" class="create-user" value="Add Row"> 
    <input type="submit" value="Save Table" class="save"> 

</body> 


</html>

ajaxSubmit的代碼：

<?php 

$host="xxxx"; 
$dbName="xxxxxxx"; 
$dbUser="xxxxx"; 
$dbPass="xxxxxxxxxxxx"; 

$dbh = new PDO("sqlsrv:server=".$host."; Database=".$dbName, $dbUser, $dbPass); 
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 


$data = $_POST['data']; 
foreach($data as $row){ 
    $sql = "UPDATE Stage_Rebate_Master SET MR_Name='$row[mr_name]', 
    Buyer_ID='$row[buyer_id]', 
    MR_POC_N='$row[poc_n]', 
    MR_POC_E='$row[poc_e]', 
    MR_POC_N='$row[poc_p]' 
    WHERE MR_ID='$row[mr_id]'"; 

    $dbh->query($sql); 
} 

?>

來源

2016-10-24 Rataiczak24

你有沒有關於ajax的文檔？ –

我已經閱讀了一點，但從來沒有用它足夠知道如何使用它...只需要快速 – Rataiczak24

檢查我的答案，如果有什麼不清楚請問我 – mohade

如果你只是希望它當你的 '更新' 按鈕，點擊，你可以嘗試使用

發生

if(isset($_POST["Update"])) 
{ 
//PDO statement to update the database 
}

這隻有在窗體內按下名稱爲「Update」的按鈕時纔會執行。

來源

2016-10-24 19:05:01

這樣會進去ajax提交頁面？ – Rataiczak24

它會進入「更新」按鈕的主頁面。這將是服務器端，所以它需要重新加載頁面。這就像一個驗證腳本，說你提交表單的值更新，所以下面的動作。 –

您可以使用jQuery或JavaScript發佈和更新數據

jQuery代碼：

$.post("save2db.php",{ 
    id:"id", 
    vendor:"vendor_name" 
});

ID：$ _ POST [ '身份證']

廠商：$ _ POST [ '供應商' ]

save2db.php將是：

if(isset($_POST['vendor'])){ 
     $vendor=$_POST['vendor']; 
     $id=$_POST['id']; 
    //your update sql query 
    }

來源

2016-10-24 19:18:13 mohade

那麼ajaxsubmit頁面會是什麼樣子，或者在你的情況下，save2db頁面是什麼樣的？ – Rataiczak24

我現在編輯我的答案 – mohade

仍然不能正常工作 – Rataiczak24

按鈕單擊後更新數據庫

回答

相關問題