I have a website, however the +/- buttons don't seem to work. I've not changed any of the code from the theme (Zorka), but I can't figure out how to fix the issue. Can someone please help?
Here's the website page: Webiste
The product.tpi looks like this:
<div class="quantity-form form-group">
<?php if (!$kuler->getSkinOption('show_number_quantity')) { ?>
<button type="button" id="qty-dec" class="quantity__button">-</button>
<input type="text" name="quantity" size="2" value="<?php echo $minimum; ?>" />
<button type="button" id="qty-inc" class="quantity__button">+</button>
<?php } else { ?>
<button type="button" id="qty-dec" class="quantity__button">-</button>
<input type="text" name="quantity" size="2" class="dynamic-number" value="<?php echo $minimum; ?>" data-min="<?php echo $minimum; ?>"/>
<button type="button" id="qty-inc" class="quantity__button">+</button>
<?php } ?>
<input type="hidden" name="product_id" size="2" value="<?php echo $product_id; ?>" />
</div>
and the product.js looks like this:
// Quantity
$('.dynamic-number').each(function () {
var $input = $(this),
$dec = $($input.data('dec')),
$inc = $($input.data('inc')),
min = $input.data('min');
$dec.on('click', function () {
var val = parseInt($input.val());
if (val > min) {
$input.val(val - 1);
}
});
$inc.on('click', function () {
$input.val(parseInt($input.val()) + 1);
});
If you need more information, please let me know!
Related
I'm trying to create a script that calculates data from a form loaded using jQuery post but my script is not working as expected.
This is my code:
//main file
function updateForm(monthsunpaid, unpaiddue, nodelay, tpenalty, idpostsave, code) {
$.post("updatedata.php", {
monthsunpaid: monthsunpaid,
unpaiddue: unpaiddue,
nodelay: nodelay,
tpenalty: tpenalty,
idpostsave: idpostsave,
code: code
})
.done(function(data) {
$(".table1").empty().append(data);
$('#myModaledit').modal('hide');
});
}
<script >
// want to make this code work
$(document).ready(function() {
$("#nodelay").change(function() {
var unpaiddue = $("#unpaiddue").val();
var nodelay = $("#nodelay").val();
var result = Number(unpaiddue) * Number(nodelay) * 0.05;
var result = Math.round(result * 100) / 100;
$("#tpenalty").val(result);
});
});
</script>
This data is from a php file load using the updateForm() function:
<form method="post">
<div class="form-group">
<label for="usr">UNPAID MONTHS</label>
<input type="text" class="form-control" id="monthsunpaid" value="<?php echo $delayed_months; ?>">
</div>
<div class="form-group">
<label for="pwd">UNPAID MONTHLY DUES</label>
<input type="text" class="form-control" id="unpaiddue" value="<?php echo $unpaid_monthly; ?>">
</div>
<div class="form-group">
<label for="pwd">NO. OF MONTHS DELAYED</label>
<input type="text" class="form-control" id="nodelay" value="<?php echo $months_delayed; ?>">
</div>
<div class="form-group">
<label for="pwd">TOTAL PENALTY CHARGES EQUITY</label>
<input type="text" class="form-control" id="tpenalty" value="<?php echo $totalpenalty; ?>">
</div>
<input type="hidden" id="idpostsave" value="<?php echo $id; ?>">
<input type="hidden" id="code" value="<?php echo $biscode; ?>">
<div class="form-group">
<button type="button" class="btn btn-primary" id="saveButton"
onclick="updateForm($(monthsunpaid).val(), $(unpaiddue).val(), $(nodelay).val(), $(tpenalty).val(), $(idpostsave).val(), $(code).val())">SAVE</button>
</div>
</form>
Bind your event as delegate. Change your code to this and hope so it will help you.
$(document).ready(function() {
$("document").on("#nodelay", "change", function() {
var unpaiddue = $("#unpaiddue").val();
var nodelay = $("#nodelay").val();
var result = Number(unpaiddue) * Number(nodelay) * 0.05;
var result = Math.round(result * 100) / 100;
$("#tpenalty").val(result);
});
});
I would suggest the following changes to your code to avoid issues that can be caused by mixing inline javascript and jquery. Consider delegating all event binding logic to jquery (rather than using on onclick in your forms HTML) by doing the following:
//main file
function updateForm(monthsunpaid, unpaiddue, nodelay, tpenalty, idpostsave, code){
$.post( "updatedata.php", {
monthsunpaid:monthsunpaid,
unpaiddue:unpaiddue,
nodelay:nodelay,
tpenalty:tpenalty,
idpostsave:idpostsave,
code:code
})
.done(function( data ) {
$( ".table1" ).empty().append( data );
$('#myModaledit').modal('hide');
});
}
// Shorthand for JQuery is now ready
$(function(){
$(document).on('change', "#nodelay", function(){
var unpaiddue = $("#unpaiddue").val();
var nodelay = $("#nodelay").val();
var result = Number(unpaiddue) * Number(nodelay) * 0.05;
var result = Math.round(result * 100) / 100;
$("#tpenalty").val(result);
});
// Attach a submit handler to your form, which is called
// when the user submits the form
$(document).on('submit', 'form', function() {
updateForm(
$('#monthsunpaid').val(),
$('#unpaiddue').val(),
$('#nodelay').val(),
$('#tpenalty').val(),
$('#idpostsave').val(),
$('#code').val()
);
// Prevent default form submit behaviour
return false;
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form method="post">
<div class="form-group">
<label for="usr">UNPAID MONTHS</label>
<input type="text" class="form-control" id="monthsunpaid" value="<?php echo $delayed_months; ?>">
</div>
<div class="form-group">
<label for="pwd">UNPAID MONTHLY DUES</label>
<input type="text" class="form-control" id="unpaiddue" value="<?php echo $unpaid_monthly; ?>">
</div>
<div class="form-group">
<label for="pwd">NO. OF MONTHS DELAYED</label>
<input type="text" class="form-control" id="nodelay" value="<?php echo $months_delayed; ?>">
</div>
<div class="form-group">
<label for="pwd">TOTAL PENALTY CHARGES EQUITY</label>
<input type="text" class="form-control" id="tpenalty" value="<?php echo $totalpenalty; ?>">
</div>
<input type="hidden" id="idpostsave" value="<?php echo $id; ?>">
<input type="hidden" id="code" value="<?php echo $biscode; ?>">
<div class="form-group">
<!-- replace button with input, leave event binding to jquery -->
<input type="submit" value="SAVE" class="btn btn-primary" id="saveButton" />
</div>
</form>
I am getting "Uncaught ReferenceError is not defined" error when I am going to call the updateinventory() function from the appended update button. I don't know what is the problem.
<script type="text/javascript">
$("i").click(function() {
var id = this.id;
var product_code = $('#pr_code'+id).val();
var user_id = $('#user_id'+id).val();
var qty = $('#qtyspan_'+id).text();
$('#qtyspan_'+id).css('display', 'none');
$('#'+id).css('display', 'none');
$('#simplyupdate'+id).append('<div id="updateinventorydiv'+id+'" class="input-group" style="width: 227px;"><div class="form-group"><input type="hidden" id="pr_coding" value="'+id+'"/><input value="'+qty+'" type="text" class="form-control input-sm"></div><span class="input-group-btn"><button onclick="updateinventory('+product_code+','+user_id+','+id+')" class="btn btn-success btn-sm" type="button">Update</button><button id="canceldiv_'+id+'" class="btn btn-danger btn-sm" type="button">cancel</button></span></div>');
});
function updateinventory(product_code,user_id,outlet_id) {
alert(product_code);
}
</script>
PHP file: This is the PHP code where I have created 3 hidden inputs to get the ids in JavaScript.
for ($t = 0; $t < count($outletData); ++$t) {
$outlet_id = $outletData[$t]->id;
$outlet_name = $outletData[$t]->name;
?>
<div class="row" style="padding-top: 5px; padding-bottom: 5px;">
<div class="col-md-3">
<?php echo $outlet_name; ?>
</div>
<div class="col-md-9" id="simplyupdate<?php echo $t; ?>">
<?php
$invQty = 0;
$invQtyData = $this->Constant_model->getDataTwoColumn('inventory', 'product_code', $code, 'outlet_id', $outlet_id);
if (count($invQtyData) > 0) {
$invQty = $invQtyData[0]->qty;
}
?>
<span id="qtyspan_<?php echo $t; ?>"><?php echo $invQty; ?></span>
<input type="hidden" id="pr_code<?php echo $t; ?>" value="<?php echo $code; ?>" />
<input type="hidden" id="user_id<?php echo $t; ?>" value="<?php echo $user_role; ?>" />
<input type="hidden" id="outlet_id<?php echo $t; ?>" value="<?php echo $outlet_id; ?>" />
<i class="fa fa-pencil" id="<?php echo $t; ?>"></i>
</div>
</div>
<?php
}
?>
The issue is the updateinventory arguments not beeing quoted.
It should be:
<button onclick="updateinventory(\''+product_code+'\',\''+user_id+'\',\''+id+'\')" class="btn btn-success btn-sm" type="button">Update</button>
Notice the backslashes \ to escape them... Pretty complicated. So beyond that, here is a better way to achieve the same. You use jQuery... So do not use the inline onclick=....
Give your button a class... Say update. Then use delegation on it, since it is appended (dynamically created).
About the product_code, user_id and id, first store it in some data attributes and on button click, retreive the values using .data().
I made the changes below... Untested ;) Try it.
$("i").click(function() {
var id = this.id;
var product_code = $('#pr_code'+id).val();
var user_id = $('#user_id'+id).val();
var qty = $('#qtyspan_'+id).text();
$('#qtyspan_'+id).css('display', 'none');
$('#'+id).css('display', 'none');
$('#simplyupdate'+id).append('<div id="updateinventorydiv'+id+'" class="input-group" style="width: 227px;"><div class="form-group"><input type="hidden" id="pr_coding" value="'+id+'"/><input value="'+qty+'" type="text" class="form-control input-sm"></div><span class="input-group-btn"><button data-productcode="'+product_code+'" data-userid="'+user_id+'" data-id="'+id+'" class="btn btn-success btn-sm update" type="button">Update</button><button id="canceldiv_'+id+'" class="btn btn-danger btn-sm" type="button">cancel</button></span></div>');
});
$(document).on("click",".update",function(){
var product_code = $(this).data("productcode");
console.log(product_code);
});
Here's a div which represents cart item qty field:
<div class="cart_quantity_div">
<form action="cart.php" method="post">
<button class="cart_qty_controls" onclick="minusOne(qty_field_<?php echo $item_id; ?>)">-</button>
<input type="text" name="cart_item_qty" value="<?php echo $each_item['quantity']; ?>" size="1" maxlength="3" id="qty_field_<?php echo $item_id; ?>"/>
<input type="submit" name="qty_adjust_cart<?php echo $item_id; ?>" value="change" class="cart_qty_adjust_btn"/>
<input type="hidden" name="cart_item_to_adjust_qty" value="<?php echo $item_id; ?>"/>
</form>
</div>
It is a draft version so don't pay attention to submit and hidden inputs
And JS code:
function minusOne (input_id){
var subtracted_qty = document.getElementById(qty_field_id).value = document.getElementById(qty_field_id).value - 1;
document.getElementById(qty_field_id).value = subtracted_qty;
}
I want to change value of input text field by clicking minus button by -1. But for some reason it's not working.
Can you, please, review my code and find whats wrong with it. Or maybe there is some better ways to do such qty change..
Your code does not set the variable qty_field_id, nor does it use the variable input_id. If input_id is referring to the same value as PHP’s $item_id, then try adding the following line to the top of the JavaScript function:
var qty_field_id = "qty_field_" + input_id;
You shouldn't use inline javascript and you aren't referencing the correct element. Try this instead:
HTML:
<div class="cart_quantity_div">
<form action="cart.php" method="post">
<button class="cart_qty_controls" data-productId="<?php echo $item_id; ?>">-</button>
<input type="text" name="cart_item_qty" value="<?php echo $each_item['quantity']; ?>" size="1" maxlength="3" id="qty_field_<?php echo $item_id; ?>"/>
<input type="submit" name="qty_adjust_cart<?php echo $item_id; ?>" value="change" class="cart_qty_adjust_btn"/>
<input type="hidden" name="cart_item_to_adjust_qty" value="<?php echo $item_id; ?>"/>
</form>
</div>
JS:
[].slice.call(document.getElementsByClassName('cart_qty_controls')).forEach(function(el){
el.addEventListener('click', function(e) {
var id = e.target.getAttribute('data-productId');
document.getElementById('qty_field_' + id).value -= 1;
})
})
How can I change the following code to work off of a name selector instead of the id?
<div id="light" class="change_group_popup">
<a class="close" href="javascript:void(0)">Close</a>
JavaScript
$('.change_group').on('click',function(){
$("#light,.white_overlay").fadeIn("slow");
});
$('.close').on('click',function(){
$("#light,.white_overlay").fadeOut("slow");
});
UPDATE:
I added more of my code to show the loop to help explain what I am doing in more detail.
$runUsers2 = mysqli_query($con,"SELECT * FROM users ORDER BY id DESC");
$numrows2 = mysqli_num_rows($run2);
if( $numrows2 ) {
while($row2 = mysqli_fetch_assoc($run2)){
if($row2['status'] == "Approved"){
//var_dump ($row2);
$approved_id = $row2['user_id'];
$approved_firstname = $row2['firstname'];
$approved_lastname = $row2['lastname'];
$approved_username = $row2['username'];
$approved_email = $row2['email'];
if ($approved_firstname == true) {
echo "Name - ". $approved_firstname . " " . $approved_lastname . "</br>" .
"Username - ". $approved_username . "</br></br>"
?>
<div class="change_group_button">
<a class="change_group" href="javascript:void(0)">Change User Permission</a>
</div><br>
<div class="change_group_popup light">
<a class="close" href="javascript:void(0)">Close</a>
<div class="group_success" style="color: red;"></div><br>
<form class="update_group" action="" method="POST">
<div class="field">
<label for="group">Group</label>
<input type="hidden" value="<?php echo $approved_id; ?>" name="approved_id" />
<input type="hidden" value="<?php echo $approved_firstname; ?>" name="approved_firstname" />
<input type="hidden" value="<?php echo $approved_lastname; ?>" name="approved_lastname" />
<input type="hidden" value="<?php echo $approved_username; ?>" name="approved_username" />
<input type="hidden" value="<?php echo $approved_email; ?>" name="approved_email" />
<select name='group_id' required>
You can get any element by name attribute by:
$('[name="someName"]')
Use DOM traversal functions to find the related element.
$(".change_group").click(function() {
var light = $(this).closest(".change_group_button").nextAll(".light").first(); // Find the next .light DIV after the button
light.add($(".white_overlay")).fadeIn("slow");
}):
In category.tpl Opencart 1.5.x
I'm trying to add quantity to the add to cart button.
<div class="cart">
<input type="text" name="quantity<?php echo $product['product_id']; ?>" value="1" size="1" />
<input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>', 'document.form.quantity<?php echo $product['product_id']; ?>.value')" class="button" />
</div>
If I just put a number in for the second variable of addToCart like
addToCart('<?php echo $product['product_id']; ?>', 2);
This adds quantity 2 fine. Checking the element name in ff shows me the number is coming back from php correctly "quantity6.value", etc. Apparently, but when I click Add to Cart nothing happens. Can someone point me in the right direction?
Just to make it more succinct I changed the line to:
" onclick="addToCart('', document.getElementById('quantity').value)" class="button" />
But still the button does not appear to do anything on a click. I assume the document.getElementById().. line is not returning the number properly, but I'm not sure of a good way to test it.
Neither does this seem to work:
<div class="cart">
<input type="text" name="quantity<?php echo $product['product_id']; ?>" value="1" size="1" onchange="updateQty(<?php echo $product['product_id']; ?>);" />
<input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>', getQty(<?php echo $product['product_id']; ?>);)" class="button" />
</div>
...
<script type="text/javascript"><!--
function getQty(num) {
getQty = document.getElementById('quantity' & num).value;
}
function updateQty(num) {
var ibox = document.form.quanity[num].value;
quantity[num] = ibox;
}
...
</script>
This seems a little overdone to be honest. You can do this with one function simply by changing the function on the onclick event to addToCartCategory() and changing the name to an ID for the quantity box. Something along the lines of
<div class="cart">
<input type="text" id="quantity<?php echo $product['product_id']; ?>" value="1" size="1" />
<input type="button" value="<?php echo $button_cart; ?>" onclick="addToCartCategory(<?php echo $product['product_id']; ?>)" class="button" />
</div>
...
<script type="text/javascript"><!--
function addToCartCategory(product_id) {
var qty = $('#quantity' + product_id).val();
addToCart(product_id, qty);
}
...
</script>