i have dynamic number of checkboxes and a button to post the checked elements to another page .. here is the code:
<div class="overSelect"></div>
<div id="checkboxes<?php echo $aa['id']; ?>">
<?php
$pid = select::property($aa['name']);
$arr2 = select::properties($pid);
$cc = 1;
foreach ($arr2 as $aa2) { ?>
<div style="padding-right: 20px" class="row"><label>
<input type="checkbox" value="<?php echo $aa2['name'] ?>" name="checks<?php echo $aa['id'] ?>[]"id="check<?php echo $aa['id']; ?>"><?php echo $aa2['name'] ?>
</label></div>
<?php } ?>
</div>
<a class="btn btn-primary btn-sm" name="update-all"onclick="update_all('prop_id<?php echo $aa['id']; ?><?php $counter; ?>','checks<?php echo $aa['id'] ?>')"id="btn-all<?php echo $aa['id']; ?><?php $counter; ?><?php echo $p['id']; ?>">save</a>
i tried this code but it is not working
<script type="text/javascript">
function update_all(a, b) {
var aa = document.getElementById(a).value;
var values = new Array();
$("input:checkbox[name=b]").each(function () {
if ($(this).is(":checked")){
values.push($(this).val());
}
});
alert(aa);
alert(values.length);
alert(values);
}
</script>
if the checkboxes checked .. it's value will be added to the array and posted to php page
any help please .. thanks in advance
Related
I need some help to apply js code for all elements, but for now works only for first on each page.
On page are items with buy buttons, that is created by script, so all buttons have same id but is more than one of them - and I can't apply script that disable button if some condition, only work for first button.
<?php $elem = getElement('button_basket'); ?>
<button disabled = "true" onclick = "checkInput(event)" id="b1" class="btn btn-warning btn-lg btn-block tobasket <?php echo $elem['content_tr'] ?>" product_id="<?php echo $v['id']; ?>" name="<?php echo $prdata['full_name'] ?>" nametr="<?php echo $prdata['name1_tr'] ?>" url="<?php echo $cur_url; ?>catalog/<?php echo $v['img_url']; ?>" price="<?php echo $v['price']; ?>" <?php if($v['sold']==1) echo 'sold="true"'; ?>><?php echo $elem['content'] ?></button>
<?php $elem = getElement('button_oneclick'); ?>
<p class="prod-oneclick <?php echo $elem['content_tr'] ?>" <?php if($v['sold']==1) echo 'sold="true"'; ?>><?php echo $elem['content'] ?></p>
<script type="text/javascript">
function checkInput(event){
<?php
$cookie_basket = $_COOKIE['basket'];
$tempo = urlencode($cookie_basket);
$countChars = mb_strlen($tempo);
//echo $countChars;
?>
let test = '<?php echo $countChars;?>';
let btncheck = document.querySelectorAll('[disabled]');
// var step;
// for (step = 0; step < 5; step++) {
if (test > 80){
document.getElementById("b1").disabled = true;
}else{
document.getElementById("b1").disabled = false;
}
}
// window.onload = checkInput(event);
// }
</script>
if will need can provide full page script.
You should use data attributes and delegation
Also your script can be vastly simplified
let test = '<?php echo $countChars;?>';
window.addEventListener("load", function() {
[...document.querySelectorAll('[disabled]')].forEach(btn => btn.disabled = test > 80)
});
<?php
$cookie_basket = $_COOKIE['basket'];
$tempo = urlencode($cookie_basket);
$countChars = mb_strlen($tempo);
?>
<button disabled class="btn btn-warning btn-lg btn-block tobasket <?php echo $elem['content_tr'] ?>" data-product_id="<?php echo $v['id']; ?>" name="<?php echo $prdata['full_name'] ?>" data-nametr="<?php echo $prdata['name1_tr'] ?>" data-url="<?php echo $cur_url; ?>catalog/<?php echo $v['img_url']; ?>"
data-price="<?php echo $v['price']; ?>" <?php if($v[ 'sold']==1) echo 'data-sold="true"'; ?>><?php echo $elem['content'] ?></button>
<p class="prod-oneclick <?php echo $elem['content_tr'] ?>" <?php if($v[ 'sold']==1) echo 'data-sold="true"'; ?>>
<?php echo $elem['content'] ?>
</p>
Final code, fully working for me was:
<script>
function beCheerful() {
<?php
$cookie_basket = $_COOKIE['basket'];
$tempo = urlencode($cookie_basket);
$countChars = mb_strlen($tempo);
?>
let test = '<?php echo $countChars;?>';
window.addEventListener("DOMContentLoaded", function() {
[...document.querySelectorAll('[disabled]')].forEach(btn => btn.disabled = test > 80)
});
}
for (var i = 0; i < 1; i++) {
beCheerful();
}
window.onload = beCheerful;
</script>
I want to build filtering sidebar and search box . My problem is, I can't make it run searching box and filtering items together at the same time. I hope any of u can help me?
I think,the main problem is in my script "var s" php parameter where I'm getting cities from
Let's see what I've done so for,
Here's my script;
<script>
$(function(){
$('.item_filter').change(function(){
var p = multiple_values('p');
var s ='<?php echo $_POST["search"]; ?>';
var url ="product.php?product=<?php echo
htmlentities($_GET['product']) ?>&s="+s+"&b="+b+"&p="+p;
window.location=url;
});
});
function multiple_values(inputclass){
var val = new Array();
$("."+inputclass+":checked").each(function() {
val.push($(this).val());
});
return val.join('-');
}
</script>
Search Box
<form class="search" name="search" method="POST"
action="product.php?product=<?php echo
''.htmlentities($_GET['product']).''; ?>" >
<a href="javascript:void(0);"><input id="small_search"
name="searchTerm" class="item_filter s" <?php { echo "checked"; } ?>
list="local" /></a>
<?php
while($row = mysqli_fetch_assoc($result)){
$local = ($row['local']); ?>
<a href="javascript:void(0);" target="_blank"><input type="submit"
id="small_search_btn" value="Search"></a >
<datalist id="local">
<option value="<?php echo ''.htmlentities($row['local']).''; ?
>"></option>
<?php } ?>
</form >
**Filtering **
<div class="list-group" style="font-size:14px;">
<h4 style="font-size:16px; font-weight: bold; color:black;">
</h4>
<?php
some sql statement..
?>
<a href="javascript:void(0);" class="list-group-item"
id="left_filtering" >
<label >
<input type="checkbox" class="item_filter b" value="<?php echo
htmlentities($row['brand']); ?>" <?php if(in_array($row['brand'],$b
{echo "checked"; } ?> > <?php echo ucfirst($row['brand']);
?></a>
</label>
<?php } ?>
</div>
HTML + PHP
<?php
for($i=0;$i<5;$i++){
?>
<input readonly class="copyTarget" id="copyTarget<?php echo $i; ?>" value="val<?php echo $i; ?>">
<span>
val<?php echo $i; ?>
</span>
<button class="btn btn-primary" id="copyButton<?php echo $i; ?>" onClick="reply_click(this.id, $('.copyTarget').attr('id'));">Copy</button>
<?php
}
?>
JS
<script>
function reply_click(clicked_id, target_id) {
alert(clicked_id);
alert(target_id);
}
</script>
What i want
I want to get the both values for copyTarget and copyButton as per loop cycle. It means
If current value of $i = 3
then I want alert values like,
clicked_id = copyTarget3
target_id = copyButton3
What i am currently getting is,
If current value of
$i = 3
then I want alert values like,
clicked_id = copyTarget0
target_id = copyButton3
Its taking first value of ID(copyTarget) stored initially. I want current loop cycle value.
Any help would do
Thanks
Why use JS in handler?
Try:
onClick="reply_click('copyButton<?php echo $i; ?>', 'copyTarget<?php echo $i; ?>')"
Also you should store id names (copyButton and copyTarget) in php variable, so you can change them in one place.
You could try something like below. However, I would go by Maxx's answer .. It really depends on what you plan to do with the rest of code etc.
<?php
for($i=0;$i<5;$i++){
?>
<div>
<input readonly class="copyTarget" id="copyTarget<?php echo $i; ?>" value="val<?php echo $i; ?>">
<span>
val<?php echo $i; ?>
</span>
<button class="btn btn-primary" id="copyButton<?php echo $i; ?>" onClick="reply_click(this)">Copy</button>
</div>
<?php
}
?>
<script>
function reply_click(btn) {
var clicked_id = $(btn).attr('id');
var target_id=$(btn).parent().find('span').html();
alert(clicked_id);
alert(target_id);
}
</script>
Try This
<?php
for($i=0;$i<5;$i++){
?>
<input readonly class="copyTarget" id="copyTarget<?php echo $i; ?>" value="val<?php echo $i; ?>">
<span>
val<?php echo $i; ?>
</span>
<button class="btn btn-primary" id="copyButton<?php echo $i; ?>" onClick="reply_click(this.id);">Copy</button>
<?php
}
?>
JS
<script>
function reply_click(clicked_id) {
alert(clicked_id); //clicked id
alert(clicked_id.split('copyButton').join('copyTarget')); // target id
}
</script>
I'm not too experienced in PHP but my goal here is to have related product swatches not display on the page if they are out of stock.(highlighted in screenshot)
Related product swatches are highlighted
Here is the PHP code:
<ol class="mini-products-list" id="block-related">
<?php foreach($this->getItems() as $_item): ?>
<li class="item">
<?php if(!$_item->isComposite() && $_item->isSaleable()): ?>
<?php if (!$_item->getRequiredOptions()): ?>
<input type="checkbox" class="checkbox related-checkbox" id="related-checkbox<?php echo $_item->getId() ?>" name="related_products[]" value="<?php echo $_item->getId() ?>" />
<?php endif; ?>
<?php endif; ?>
<div class="product">
<img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->resize(50) ?>" width="50" height="50" alt="<?php echo $this->escapeHtml($_item->getName()) ?>" />
<div class="product-details">
<p class="product-name"><?php echo $this->escapeHtml($_item->getName()) ?></p>
<?php echo $this->getPriceHtml($_item, true, '-related') ?>
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<?php echo $this->__('Add to Wishlist') ?>
<?php endif; ?>
</div>
</div>
</li>
<?php endforeach ?>
</ol>
And here is the related jQuery/JS:
<script type="text/javascript">
//<![CDATA[
$$('.related-checkbox').each(function(elem){
Event.observe(elem, 'click', addRelatedToProduct)
});
var relatedProductsCheckFlag = false;
function selectAllRelated(txt){
if (relatedProductsCheckFlag == false) {
$$('.related-checkbox').each(function(elem){
elem.checked = true;
});
relatedProductsCheckFlag = true;
txt.innerHTML="<?php echo $this->__('unselect all') ?>";
} else {
$$('.related-checkbox').each(function(elem){
elem.checked = false;
});
relatedProductsCheckFlag = false;
txt.innerHTML="<?php echo $this->__('select all') ?>";
}
addRelatedToProduct();
}
function addRelatedToProduct(){
var checkboxes = $$('.related-checkbox');
var values = [];
for(var i=0;i<checkboxes.length;i++){
if(checkboxes[i].checked) values.push(checkboxes[i].value);
}
if($('related-products-field')){
$('related-products-field').value = values.join(',');
}
}
//]]>
</script>
Any help would be appreciated, thank you!
Are you sure that you have the option Display out of stock products set to No? (System -> Configuration -> Inventory)
You can also try to add $_item->isAvailable() to if statement.
The Solution I ended up going with: adding $_item->isAvailable() to if statement gives the desired effect of related products that are out of stock will not display as a related product swatch on the product page.
I've been trying to get JQuery to check a radio for me when I assign a value 'Z' to it.
My current code:
<?php if ($option['type'] == 'radio') { ?>
<div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
<label class="control-label"><?php echo $option['name']; ?></label>
<div id="input-option<?php echo $option['product_option_id']; ?>">
<?php if (isset($option_values)) foreach ($option_values as $option_value) { ?>
<div class="radio">
<label>
<input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
<?php echo $option_value['name']; ?>
<?php if ($option_value['price']) { ?>
<?php if ($option_value['price_prefix'] == 'z') {?>
<script>
$(".radio").prop("checked", true)
</script>
<?php echo 'Im Active!!'; ?><?php }
else { ?> <?php echo ' ';?> (<?php echo $option_value['price_prefix'];?>
<?php echo $option_value['price']; ?>) <?PHP }?>
<?php } ?>
</label>
</div>
<?php } ?>
</div>
</div>
<?php } ?>
<?php } ?>
As for now, my option 'Z' only shows 'I'm Active!!' in the list. The radio is still unchecked though.
What am I doing wrong?
I'm planning on releasing a free OpenCart module where people can activate an option by standard by assigning the value Z in product properties.
Thanks!