I'm doing an online ordering system for our customers where when they log in, they're brought to a page where the items that they order are retrieved from a db, so it's dynamic and different for all customers. Some customers have over 50 items, so as they're entering in quantities in the input fields, every now and then they'll want to see what they've ordered so far. I'm trying javascript to toggle between complete order list and just to view what they've placed a quantity next to. Retrieving the items via php, I put each array item in a SECTION then a DIV CLASS="w3-third..".
Below is the bottom portion of the php pull; the last LIST element is the quantity field and i put a SPAN around it in order to grab it for the count.
And below that is the javascript i'm attempting (I'm new to coding and first time asking a question here):
$i=1; //counter variable
while($rowtbl = mysqli_fetch_array($resulttbl)) {
?>
<section>
<div class="w3-third w3-margin-bottom" id="itemsToFilter" data-type="<?php echo $rowtbl['category']?>">
<ul class="w3-ul w3-border w3-center w3-hover-shadow" >
<li class="w3-padding-16"><?php echo htmlspecialchars($rowtbl['CustNo']) ?></li>
<li class="w3-green"><?php echo htmlspecialchars($rowtbl['description']) ?></li>
<li class="w3-padding-16"><?php echo htmlspecialchars($rowtbl['brand']) ?></li>
<li class="w3-padding-16"><?php echo htmlspecialchars($rowtbl['category']) ?></li>
<li class="w3-padding-16"><?php echo htmlspecialchars($rowtbl['itemNu']) ?>
<input type="hidden" name="prodid<?php echo $i; ?>" value="<?php echo $rowtbl['itemNu']; ?>" /></li>
<li class="w3-padding-16"><?php echo htmlspecialchars($rowtbl['pksz']) ?></li>
<li class="w3-padding-16"><?php echo htmlspecialchars($rowtbl['ea']) ?></li>
<?php if ($rowtbl['bc'] == "y" && $rowtbl['ea'] == 1) { ?>
<li class="w3-padding-16"><input type="checkbox" checked name="bc<?php echo $i; ?>" /></li>
<?php } elseif ( $rowtbl['bc'] == "y" && $rowtbl['ea'] == 0) { ?>
<li class="w3-padding-16"><input type="checkbox" name="bc<?php echo $i; ?>" /></li>
<?php }
else { ?>
<li class="w3-padding-16"><input type="hidden" name="bc<?php echo $i; ?>" /></li>
<?
}
?>
<input type="hidden" name="rows" id="rows" value="<?php echo $i; ?>" />
<li class="w3-padding-16"><span><input type="text" name="qty<?php echo $i; ?>" id="inputq" /></span></li>
</ul>
<div>
</section>
<?php $i++; //increment counter variable
} ?>
and the javascript, where nothing happens:
<script>
$(document).ready(function(){
$("button").click(function() {
var x = document.getElementsByTagName("span");
document.getElementById("demo").innerHTML = x.length;
var i;
for (var i = 0; i < x.length; i++) {
if(document.getElementById("inputq".[i]).value == ""){
$("span").parentsUntil("section").toggle();
}
}
});
});
</script
If i use just the javascript below and click the button, I do get the correct count, so it's reading the SPAN, I'm clearly doing something wrong with the for loop.
<script>
$(document).ready(function(){
$("button").click(function() {
var x = document.getElementsByTagName("span");
document.getElementById("demo").innerHTML = x.length;
});
});
</script>
I've also tried this below, but it toggles all 33 Sections initially, and if I put a quantity in a Section input field, it doesn't toggle, then if I put a quantity in a second Section, it toggles, etc.
$(document).ready(function(){
$("button").click(function(){
$('input[type=text]').each(function(){
if (this.value == "") {
$("span").parentsUntil("section").toggle();
};
});
});
});
I'm not sure if I need a combination of the two or something completely different. I've been looking online for days but all I can find are topics on toggling 1 element or 1 type of element. Please help.. Thanks in advance.
@mfink ..and to anyone else viewing this...Ok I found something that helped me resolve my problem; i was also needing a live search option and found a script (http://www.designchemical.com/blog/index.php/jquery/live-text-search-function-using-jquery/) where i just had to change the selector to match mine and add 'allitems' class to my SECTION. Below is the live search script:
$(document).ready(function(){
$("#filter").keyup(function(){
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0;
// Loop through the Items list
$(".allitems div").each(function(){
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});
// Update the count
var numberItems = count;
$("#filter-count").text("Number of Matches = "+count);
});
});
and below is how I changed it to resolve my posted question; I changed it so it loops through all input type 'text' and if it's blank, it toggles it:
$(document).ready(function(){
$("#getIt").click(function(){
// Retrieve the input field text and reset the count to zero
var filterI = $(this).val(), count = 0;
// Loop through the items list
$(":text").each(function(){
// If the list item does not contain a quantity fade it out
if ($(this).val() == "") {
$(this).parentsUntil("section").toggle();
// Show the list item if there is a quantity and increase the count by 1
} else {
$(this).show();
count++;
}
});
// Update the count
var numberItems = count;
$("#filterI-count").text("Items On Your Order = "+count);
});
});
I've tested it a few times, even submitting it to the db, and it has been working. If anyone sees a flaw/vulnerability, I'd sure love to know about it. @mfink, thank you for looking into it for me!