首頁猿問如何在手動 POST 中獲取所有復選框

如何在手動 POST 中獲取所有復選框

Html5

qq_遁去的一_1 2023-10-10 16:26:04

一些背景知識，我主要使用 .Net/C# 工作，一生中從未接觸過任何 PHP，我的公司給了我一個現(xiàn)有的 PHP 代碼，并要求我添加一些功能。我需要開發(fā)的網(wǎng)頁是一個餐飲系統(tǒng)。當人數(shù)發(fā)生變化時，頁面會重新計算總價。如果菜單中的每個項目的價格都相似，那么這種方法就很有效。function RefreshPrice() { menuid = getQueryString('menuid'); $.ajax({ url: "ajax.php", type: "POST", data: { refreshprice: "refreshprice", menuid: menuid, }, success: function(data, textStatus, jqXHR) { }, error: function(jqXHR, textStatus, errorThrown) { alert("Error"); } }); }但現(xiàn)在有些物品的成本比其他物品高，所以我需要重新計算每個物品的選擇。我正在嘗試使用隱藏字段來存儲該商品的額外價格。<input type="checkbox" class="validate-checkbox" item-name="<?php echo $item["Name"];?>" name="menuitem[]" value="<?php echo $item["Id"];?>"><input type="hidden" class="addprice" name="addprice" value="<?php echo $item["AddPrice"];?>">但是我如何獲取每個選定項目的隱藏字段的值，以便我可以執(zhí)行類似的操作。function RefreshPrice() { menuid = getQueryString('menuid'); addprice= document.getElementsByClassName("addprice:checked").val(); //OR $(".addprice:checked").val(); $.ajax({ url: "ajax.php", type: "POST", data: { refreshprice: "refreshprice", menuid: menuid, addprice: addprice, }, success: function(data, textStatus, jqXHR) { }, error: function(jqXHR, textStatus, errorThrown) { alert("Error"); } }); }抱歉，如果這是一個重復的問題，但我發(fā)現(xiàn)的大多數(shù)答案是使用表單提交 POST 方法并使用$_POST["addprice"]，但這是手動構(gòu)建 ajax POST。

查看完整描述

3 回答

呼啦一陣風

TA貢獻1802條經(jīng)驗獲得超6個贊

經(jīng)過一些研究和大量測試后，我找到了一種實現(xiàn)你想要的方法，所以這里是一個例子......

我一直在我正在構(gòu)建的應用程序上測試這個示例，因此該示例不會使用您的代碼，但方法是相同的，您只需要調(diào)整它以與您的代碼一起使用...

好的，首先讓我們創(chuàng)建所需的表并用幾行填充它

PHP

// Establish Connection (change the connection details if necessary)

$mysqli = new mysqli ('localhost','root','','test');

// Create table

mysqli_query($mysqli, "CREATE TABLE IF NOT EXISTS permissions(

id INT(11) AUTO_INCREMENT PRIMARY KEY,

name VARCHAR(255) NOT NULL,

description VARCHAR(255) NOT NULL

)");

// Populate table

mysqli_query($mysqli, "INSERT INTO permissions (

name,

description

) VALUES (

'manage_users',

'Can add/edit users'

),

('permission_plus',

'Can manage roles/permissions & access logs'

)");

?>

因此，在本示例中，我將嘗試為我的網(wǎng)絡辦公室創(chuàng)建一個新角色，并為該角色分配一些現(xiàn)有權(quán)限，為此，我們需要創(chuàng)建一個表單，該表單將顯示表中的所有現(xiàn)有角色我們剛剛創(chuàng)建了...

超文本標記語言

</script>

<hr /><span class="title">Include Permissions</span>

<?php

$query = mysqli_query($mysqli, "SELECT * FROM permissions");

while($row = $query->fetch_assoc()){

$permid = $row['id'];

$permname = $row['name'];

$permdesc = $row['description'];

echo "<label class='checks' title='$permdesc'>

$permname</label>";

}

?>

</div>

</form>

</div>

現(xiàn)在，在我們以復選框的形式顯示“權(quán)限”表中的所有行之后，我們終于可以看到代碼中最重要的部分，即使用 JavaScript/JQuery 將選定的復選框存儲在數(shù)組中并使用 AJAX 將它們傳遞到服務器...

JavaScript

$('#addroles').on('submit', function(event){

event.preventDefault();

let rolename = $('#rolename').val();

let roledesc = $('#role_description').val();

let permissions = [];

$('.selected').each(function(){

if($(this).is(":checked")){

permissions.push($(this).data('id'));

}

});

if(rolename != '' && roledesc != ''){

$.ajax({

url: 'addrole.php',

method: 'POST',

data: {

rolename: rolename,

roledesc: roledesc,

permissions: permissions

},

success: function(data){

console.log(data);

}

});

}

});

正如您所看到的，這里的腳本說，提交表單后，首先阻止它使用默認函數(shù)，并將表單字段中的值分配給這個特定變量，當涉及到復選框時，創(chuàng)建一個數(shù)組，然后每個選中的復選框 - 將存儲在 data-id 中的值推送到先前創(chuàng)建的數(shù)組中，然后觸發(fā) AJAX 并將所有變量傳遞到服務器，在服務器處理數(shù)據(jù)后，請告訴我們它所說的內(nèi)容

添加角色.php

$mysqli = new mysqli ('localhost','root','','test');

$permissions = $_POST['permissions'];

foreach($permissions as $permission){

echo $permission.' ';

}

服務器使用foreach函數(shù)分解傳遞的選定復選框數(shù)組，并回顯存儲在每個選定復選框的 data-id 中的值，我們可以在瀏覽器的控制臺中看到它的結(jié)果。

為了這個例子的外觀，這里有一些 CSS

CSS

#addRole{

background-color: rgb(241, 241, 241);

position: relative;

width:30%;

padding:20px;

}

#addRole input[type='text']{

width:80%;

height:40px;

margin:5px 5px 5px 0px;

position: relative;

left:50%;

transform: translate(-50%);

text-align: center;

outline:none;

}#addRole input[type='submit']{

width:80%;

height:40px;

margin:5px 5px 5px 0px;

position: relative;

left:50%;

transform: translate(-50%);

text-align: center;

outline:none;

}

#addRole form hr{

width:30%;

margin-bottom: 20px;

margin-top: 20px;

}

.checks{

display: inline-block;

padding:20px;

text-indent: -20px;

background-color: rgb(252, 252, 252);

border:1px solid rgb(238, 238, 238);

margin: auto;

}

#checks{

position: relative;

left:50%;

transform: translate(-50%);

margin:10px;

display: flex-box;

text-align: center;

}

#addRole input[type='checkbox']{

width:20px;

height:20px;

margin:0px 0px 0px 20px;

outline:none;

text-align: center;

}

.title{

position:relative;

left:50%;

transform: translate(-50%);

text-align: center;

display: inline-block;

font-size: 20px;

margin:auto;

margin-bottom: 10px;

}

反對回復 2023-10-10

慕田峪7331174

TA貢獻1828條經(jīng)驗獲得超13個贊

我確信您已經(jīng)意識到根據(jù)可以在客戶端更改的數(shù)據(jù)計算價格是一個安全問題。另外，如果服務器端只是添加值，為什么不直接在 javascript 中處理它呢。無論哪種方式，下面的代碼都應該收集已檢查項目的數(shù)據(jù)值。

<input type="checkbox" class="validate-checkbox priceItems" item-name="<?php echo $item['Name'];?>" name="menuitem[]" value="<?php echo $item['Id'];?>" data-price="<?php echo $item['AddPrice'];?>">

您可以將價格作為參數(shù)添加到 ajax 函數(shù)的數(shù)據(jù)中或在此處進行求和。

var prices = $('.priceItems:checked').map(function() {

return $(this).data('price');

}).get();

反對回復 2023-10-10