Javascript - change input value on click not working - javascript

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;
})
})

Related

Using a name selector instead of an id

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");
}):

one form two actions with javascript

Trying to first populate fields with one js button and then submit that collect data with a second js button
I can get the fields to poulate, when I click the "Populate" button, but when I try to do the submit none of the values show on the ordertest.php
Thanks
<form action="#" name="data" id="data">
<input type='button' value='Populate' onclick='popContact()' /><BR>
<input type="submit" onclick="document.getElementById('data').action = 'ordertest.php'" value="Payment Submit" /><BR>
Contact Info:<BR>
First Name: <input type='text' readonly="readonly" name='cfname' /><BR>
Last Name: <input type='text' readonly="readonly" name='clname' /><BR>
Email:<input type='text' readonly="readonly" name='cemail' /><BR>
</form>
<script type="text/javascript">
function popContact()
{
var c = window.external.Contact;
data.cfname.value = c.FirstName;
data.clname.value = c.LastName;
data.cemail.value = c.EmailAddr;
}
</script>
---> ordertest.php
<?php
$current_firstname = $_POST["cfname"];
$current_lastname = $_POST["clname"];
$current_email_address = $_POST["cemail"];
echo "current_firstname ".$current_firstname;
echo "<br>";
echo "current_lastname ".$current_lastname;
echo "<br>";
echo "current_email_address ".$current_email_address;
?>
also tried
<input type="submit" onclick="this.form.action='ordertest.php'" value="Payment Submit" />
Oppps.
using this combination works, $_GET
<input type="submit" onclick="this.form.action='order.php'" method="POST" value="Payment Submit" />
---> ordertest.php
<?php
$current_firstname = $_GET["cfname"];
$current_lastname = $_GET["clname"];
$current_email_address = $_GET["cemail"];
echo "current_firstname ".$current_firstname;
echo "<br>";
echo "current_lastname ".$current_lastname;
echo "<br>";
echo "current_email_address ".$current_email_address;
?>

SESSION variable slow to update textfield in php

I have a form, contained 3 fields, which when the submit button in submitted,
it will changes the session variable values according to the fields, in this case there are 3 variables. then i echo back the variable onto the fields.
For the first time submit, it stores the value beautifully and display in the fields correctly, the problem is that, when i submit the second time, the values are still the same. after i refresh the page, then the values in the fields are changed.
this is partially the codes i'm using now.
<?php
session_start();?>
?>
<form name="form1" id="form1" action="">
<input type="text" name="acc1" value="<?php echo $_SESSION['acc_main']" />
<input type="text" name="acc2" value="<?php echo $_SESSION['acc_id']" />
<input type="text" name="acc3" value="<?php echo $_SESSION['acc_cat']" />
<input type="submit" name="submit">
</form>
<?php
if(isset($_POST['submit']) != '')
{
$_SESSION['acc_main'] = $_POST['acc1'];
$_SESSION['acc_id'] = $_POST['acc2'];
$_SESSION['acc_cat'] = $_POST['acc3'];
}
?>
After i refresh(F5), then the value changed. i want it to be, when i clicked the submit button, it will change to the new value.
PHP Code:
<?php
if(isset($_POST['submit']) != '')
{
$_SESSION['acc_main'] = $_POST['acc1'];
$_SESSION['acc_id'] = $_POST['acc2'];
$_SESSION['acc_cat'] = $_POST['acc3'];
echo '<script type="text/javascript">'
, 'jsfunctionToPrintUpdatedValues();'
, '</script>'
;
}
?>
Javascript Sample Code
function jsfunctionToPrintUpdatedValues()
{
/* retrieve the updated session variables in javascript variables */
var acc_main_js = <?php echo $_SESSION['acc_main']?>
var acc_id_js = <?php echo $_SESSION['acc_id']?>
var acc_cat_js = <?php echo $_SESSION['acc_cat']?>
document.getElementById("main").value=acc_main_js;
document.getElementById("id").value=acc_main_js;
document.getElementById("cat").value=acc_main_js;
}
in the input fields you have to write like this
`
Below
`
<input type="text" name="acc1" value="<?php if(isset($_SESSION['acc_main'])) echo $_SESSION['acc_main']" />
Use if(isset($_POST['submit']) != '') before the form. Change your code to this:
<?php
session_start();
if(isset($_POST['submit']) != '')
{
$_SESSION['acc_main'] = $_POST['acc1'];
$_SESSION['acc_id'] = $_POST['acc2'];
$_SESSION['acc_cat'] = $_POST['acc3'];
?>
<form name="form1" id="form1" action="">
<input type="text" name="acc1" value="<?php echo $_SESSION['acc_main']" />
<input type="text" name="acc2" value="<?php echo $_SESSION['acc_id']" />
<input type="text" name="acc3" value="<?php echo $_SESSION['acc_cat']" />
<input type="submit" name="submit">
</form>
<?php
}else{
?>
<form name="form1" id="form1" action="">
<input type="text" name="acc1" value="<?php echo $_SESSION['acc_main']" />
<input type="text" name="acc2" value="<?php echo $_SESSION['acc_id']" />
<input type="text" name="acc3" value="<?php echo $_SESSION['acc_cat']" />
<input type="submit" name="submit">
<?php } ?>

HTML fields are shown empty when they contain value

I have an edit user form. When a user visits this page, details regarding to him are shown in the fields. He can edit the fields if he want to, and then submit the form.
<form id="edit-form"method="post" action="<?php echo $_SERVER['PHP_SELF'] ; ?>">
<input id="txtalias" name="txtalias" type="text" value="<?php echo 1; ?>" >
<input type="text" id="txthour_max" name="txthour_max" value="<?php echo 2; ?>" >chk1
<input type="text" id="txtminute_max" name="txtminute_max" value="<?php echo 3; ?>" >chk2
<input type="text" id="txthour_def" name="txthour_def" value="<?php echo 4; ?>" >chk3
<input type="text" id="txtminute_def" name="txtminute_def" value="<?php echo 5; ?>">chk4
<button id="serv_butn" type="submit">Save settings</button>
</form>
This is the PHP part:
if((isset($_POST['txtalias']))&&(isset($_POST['txthour_max']))&&(isset($_POST['txtminute_max']))&&(isset($_POST['txthour_def']))&&(isset($_POST['txtminute_def'])))
{
$z = $_POST['txtalias'];
$y= $_POST['txthour_max'];
$w=$_POST['txtminute_max'];
$x = $_POST['txthour_def'];
$u = $_POST['txtminute_def'];
}
And if the user, doesn't want to make any changes & he clicks the submit button,
Notice: Undefined variable
is shown, even though the text fields have values stored in them.
How to solve this issue?
<input id="txtalias" name="txtalias" type="text" value="<?php echo $env; ?>" >
If this is a textbox, and when i click submit button, following notice is shown
Notice: Undefined variable: env in C:\wamp\www\project\mypage.php on line 212 Call Stack #TimeMemoryFunctionLocation 10.0010163472{main}( )..\mypage.php:0 ">
your
<input id="txtalias" name="txtalias" type="text" value="<?php echo $env; ?>">
$env has not define;
please check when you declare $env

Why does my javascript not update quantity in Opencart category.tpl

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>

Categories

Resources