css
.wrap_result {
background-color: #f0f2f0;
border: 2px solid orangered;
padding: 20px;
position: fixed;
left: 35%;
top: 45%;
width: 400px;
height: 150px;
text-align: center;
display: none;
z-index: 5005;
}
script
$('#removeSelected').click(function (e) {
$('#qty').removeAttr('required');
$('#product_id').removeAttr('required');
var checked = $("input[type=checkbox]:checked").length;
var cboxCount = $('input:checkbox').length;
if (!checked) {
$('.wrap_result')
.text('No selected items')
.fadeIn(3000).fadeOut(3000);
e.preventDefault();
}
]);
When Im trying to remove products with 0 products selected im preventing form submit and informing user about it. Alert works just fine, but this custom window doesn't work :c
I think the problem was the typo, Check this out!
$(function(){ console.log('test') $('#removeSelected').click(function (e) { $('#qty').removeAttr('required'); $('#product_id').removeAttr('required'); var checked = $("input[type=checkbox]:checked").length; var cboxCount = $('input:checkbox').length; if (!checked) { $('.wrap_result') .text('No selected items') .fadeIn(3000).fadeOut(3000); e.preventDefault(); } }); })
.wrap_result { background-color: #f0f2f0; border: 2px solid orangered; padding: 20px; position: fixed; left: 35%; top: 45%; width: 400px; height: 150px; text-align: center; display: none; z-index: 5005; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap_result"> </div> <div> <form method="GET" action="#"> Water: <input type="checkbox" /><br/> Fire: <input type="checkbox" /><br/> Qty:<input type="text" id="qty"/><br/> Product ID:<input type="text" id="product_id" required/><br/> <button id="removeSelected">Remove</button> </form> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.