1
如何獲取並提交購物車中的選定項目？如何獲取並提交購物車中的選定項目？
下面是我的演示，
有2個問題：
1，目前，我只能得到一個手工項目，如何讓所有選定的項目（S）？
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>
Thanks！和javascript代碼：var data = {name}：$（「＃goods_100」）。val（）， 「number」：$（「＃number_100」）。val（） };''' '如何寫在這裏？ – zwl1619
你不需要那樣做。把你的表放在''form id =「myform」>'中，然後設置'var data = $（「＃myForm」）。serialize（）;'和jQuery完成剩下的工作。 – Josh
https://api.jquery.com/serialize/ – Josh