如何在購物車中獲取並提交所選商品？
[英]How to get and submit the selected item(s) in shopping cart?
問題描述
如何在購物車中獲取並提交所選商品？
以下是我的演示，
有兩個問題：
1，目前，我只能手動獲得一件物品，如何獲得所有選中的物品？
2，如果未選擇任何內容，我希望禁用“提交”按鈕。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type='text/css'>
<link href="https://cdn.bootcss.com/tether/1.2.0/css/tether.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/tether/1.2.0/css/tether-theme-basic.min.css" rel="stylesheet">
</head>
<body>
<div class="container" id="goodsTable">
<table class="table">
<thead>
<tr>
<th class="col-xs-3">
<label class="c-input c-checkbox">
<input type="checkbox" name="selectAll" id="selectAll">
<span class="c-indicator"></span>Select All
</label>
</th>
<th class="col-xs-5">Name</th>
<th class="col-xs-4">Number</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-3">
<label class="c-input c-checkbox">
<input type="checkbox" name="domainList" id="goods_100" class="checkboxSelection">
<span class="c-indicator"></span>
</label>
</td>
<td class="col-xs-5">Apple</td>
<td class="col-xs-4"><input type="text" class="form-control" id="number_100" value="1000"></td>
</tr>
<tr>
<td class="col-xs-3">
<label class="c-input c-checkbox">
<input type="checkbox" name="domainList" id="goods_101" class="checkboxSelection">
<span class="c-indicator"></span>
</label>
</td>
<td class="col-xs-5">Pear</td>
<td class="col-xs-4"><input type="text" class="form-control" id="number_101" value="1200"></td>
</tr>
<tr>
<td class="col-xs-3">
<label class="c-input c-checkbox">
<input type="checkbox" name="domainList" id="goods_102" class="checkboxSelection">
<span class="c-indicator"></span>
</label>
</td>
<td class="col-xs-5">Peach</td>
<td class="col-xs-4"><input type="text" class="form-control" id="number_102" value="1500"></td>
</tr>
</tbody>
</table>
<button type="button" id="submit" class="btn btn-primary">Submit</button>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.2.0/js/tether.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<script>
//Select all
$("#selectAll").change(function () {
if ($(this).is(":checked")) {
$(".checkboxSelection").each(function () {
$(this).prop('checked', true);
});
}
else {
$(".checkboxSelection").each(function () {
$(this).prop('checked', false);
});
}
});
$(".checkboxSelection").change(function () {
var allSelected = true;
$(".checkboxSelection").each(function () {
if (!$(this).is(":checked")) {
$("#selectAll").prop('checked', false);
allSelected = false;
}
});
if (allSelected)
$("#selectAll").prop('checked', true);
});
</script>
<script>
//Get the value and submit
$(function () {
//Below is getting one of the items,how to get all the selected item(s) ?
var data = {
"name": $("#goods_100").val(),
"number": $("#number_100").val()
};
//ajax submit
$(document).on('submit', '#goodsTable', function (e) {
e.preventDefault();
$("#submit").addClass('disabled');
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: "POST",
url: "{{ url('/goods/') }}",
cache: false,
data: data,
dataType: "json"
})
.done(function (msg) {
window.location.href = "/goods/success";
})
.fail(function (textStatus) {
$("#submit").removeClass('disabled');
alert('Fail,try again');
});
});
});
</script>
</body>
</html>
2 個解決方案
解決方案1
2 2016-05-01 14:01:12
您的每個復選框都具有相同的名稱，因此發生的是：
domainList = on
domainList = on
domainList = on
domainList = on
並且只有最后一個被發送。 您需要在名稱中添加[]以使其成為數組。
domainList[] = on
domainList[] = on
domainList[] = on
domainList[] = on
這將為Laravel控制器提供一個數組，而不是一個數組。
例：
<input type="checkbox" name="domainList[]" id="goods_102" class="checkboxSelection">
但是，您正在使用這些復選框。 它們的默認值為“ on”，並且僅在選中時顯示在表單數據中。 您絕對應該為其添加一個value ，該value代表該項的數據庫行。
例如：
<input type="checkbox" name="domainList[]" id="goods_102" class="checkboxSelection" value="stackoverflow.com" >
那將返回一個字符串數組
domainList[] = stackoverflow.com
domainList[] = stackexchange.com
domainList[] = serverfault.com
解決方案2
2 2016-05-01 14:51:33
使用下面的第二個問題更新腳本：
$(document).ready(function(){ if($(".table tr input[type='checkbox']:checked").length > 0) { $('#submit').attr("disabled",false); } else { $('#submit').attr("disabled","disabled"); } //Select all $("#selectAll").change(function () { if ($(this).is(":checked")) { $(".checkboxSelection").each(function () { $(this).prop('checked', true); }); $('#submit').attr("disabled",false); } else { $(".checkboxSelection").each(function () { $(this).prop('checked', false); }); $('#submit').attr("disabled","disabled"); } }); $(".checkboxSelection").change(function () { var allSelected = true; $(".checkboxSelection").each(function () { if (!$(this).is(":checked")) { $("#selectAll").prop('checked', false); allSelected = false; } }); if (allSelected) { $("#selectAll").prop('checked', true); } if($(".table tr input[type='checkbox']:checked").length < 1) { $('#submit').attr("disabled","disabled"); } else { $('#submit').attr("disabled",false); } }); });
<html lang="en"> <head> <meta charset="UTF-8"> <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type='text/css'> <link href="https://cdn.bootcss.com/tether/1.2.0/css/tether.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/tether/1.2.0/css/tether-theme-basic.min.css" rel="stylesheet"> </head> <body> <div class="container" id="goodsTable"> <table class="table"> <thead> <tr> <th class="col-xs-3"> <label class="c-input c-checkbox"> <input type="checkbox" name="selectAll" id="selectAll"> <span class="c-indicator"></span>Select All </label> </th> <th class="col-xs-5">Name</th> <th class="col-xs-4">Number</th> </tr> </thead> <tbody> <tr> <td class="col-xs-3"> <label class="c-input c-checkbox"> <input type="checkbox" name="domainList" id="goods_100" class="checkboxSelection"> <span class="c-indicator"></span> </label> </td> <td class="col-xs-5">Apple</td> <td class="col-xs-4"><input type="text" class="form-control" id="number_100" value="1000"></td> </tr> <tr> <td class="col-xs-3"> <label class="c-input c-checkbox"> <input type="checkbox" name="domainList" id="goods_101" class="checkboxSelection"> <span class="c-indicator"></span> </label> </td> <td class="col-xs-5">Pear</td> <td class="col-xs-4"><input type="text" class="form-control" id="number_101" value="1200"></td> </tr> <tr> <td class="col-xs-3"> <label class="c-input c-checkbox"> <input type="checkbox" name="domainList" id="goods_102" class="checkboxSelection"> <span class="c-indicator"></span> </label> </td> <td class="col-xs-5">Peach</td> <td class="col-xs-4"><input type="text" class="form-control" id="number_102" value="1500"></td> </tr> </tbody> </table> <button type="button" id="submit" class="btn btn-primary">Submit</button> </div> <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/tether/1.2.0/js/tether.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
如何將不同尺寸的相同產品作為單獨的商品添加到購物車中？
[英]How to add the same product with different sizes to the shopping cart as a separate item?
購物車JSP：當選擇一項或多項商品並將其提交到購物車時，需要商品行保留在商品頁面上
[英]Shopping car JSP : Need item rows to stay on the product page when one or more items are selected and submitted to cart
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.