I have input on the page where the default value is set to 1. When I click on the button, I pass the value via ajax, the value of this field should be passed to the handler. Spelled in handler

 $amount_units = $_POST['amount_units'];

but $amount_units = null

How to write in data ? Here is my field and js code

 function AjaxCountTotalPriceProduct(amount, total_price_product, total_price_products) { $.ajax({ url: 'http://practice//CountTotalPriceProduct', type: "POST", data: { "amount_units=": amount.value, "total_price_product": total_price_product, "total_price_products": total_price_products }, dataType: "json", cache: false, success: function(response) { $('#amount').val(response[0]); document.getElementById(total_price_product).innerHTML = response[1]; document.getElementById(total_price_products).innerHTML = response[2]; } }); } 
 <div class="col-4 p-0"> <input type="text" class="form-control text-center" id="amount" aria-describedby="emailHelp" oninput="this.value = this.value.replace(/\D/g,'').substr(0,2)" disabled value="1"> </div> <div class="col-3 p-0 text-right"> <button type="button" class="btn btn-secondary" data-toggle="tooltip" title="Увеличить" onclick="AjaxCountTotalPriceProduct('amount', 'total_price_product', 'total_price_products')">+</button> </div>

  • What is the amount argument to a function? What is transferred there? data is a standard javascript object, the name of the field is simply "amount_units" , without = . You can even without quotes. - u_mulder
  • Fixed a bug, wrote amount_units. Still not working. How correctly to register here {"amount_units =": ​​amount.value - Sergey Sushko
  • one
    Give the code to call the function AjaxCount... - u_mulder

2 answers 2

I don’t really understand why you use onclick if you already have jquery and you can just hang the handler through on , but ok, this is up to you. Let's return to the call to the AjaxCountTotalPriceProduct function.

You pass there 3 arguments, each of which is a string :

 AjaxCountTotalPriceProduct('amount', 'total_price_product', 'total_price_products')

The amount argument with a value of 'amount' is just a string. The string has no value property, so amount.value returns nothing. Open the developer console in a browser and check for errors.

What is the conclusion - it is necessary to transfer either the value of the field. The field value is usually taken via the val() function. Thus, the function call can be written as:

 AjaxCountTotalPriceProduct( $('#amount').val(), // выбираем `#amount`, берем его значение 'total_price_product', 'total_price_products' );

Alternatively, you can still pass the string 'amount' and in the function itself get the value of the field:

 function AjaxCountTotalPriceProduct(amount, total_price_product, total_price_products) { $.ajax({ url: 'http://practice//CountTotalPriceProduct', type: "POST", data: {"amount_units" : $('#' + amount).val(), "total_price_product" : total_price_product, "total_price_products" : total_price_products}, dataType: "json", cache: false, success: function(response) { $('#amount').val(response[0]); document.getElementById(total_price_product).innerHTML = response[1]; document.getElementById(total_price_products).innerHTML = response[2]; } }); }

Please note that the keys of the data object contain only the name you need, no = .

Also, debug your code more often , use console.log / console.dir to display the values ​​in the console.

  • It turned out, thanks. What did you write about 'on'? Instead of onclick writing on? - Sergey Sushko
  • api.jquery.com/on - u_mulder

 function addToCartAjax(message) { var myProductFilt = document.getElementById('productFilt').value; var mySelQuantity = document.getElementById('inpAvNum').value; var myFilterGroup = document.getElementById('filterGroup').value; $.ajax({ type: "POST", url: "<?php echo 'http://'.$_SERVER['SERVER_NAME'].'/'.$_SESSION['USER_LANGUAGE'].'/cart/addAjax/';?>", data: { productCode: '<?php echo $productByCode[0][' code ']; ?>', productFilt: myProductFilt, selQuantity: mySelQuantity, filterGroup: myFilterGroup }, success: function(jsondata) { var jstotal = JSON.parse(jsondata); document.getElementById('topCartPrice').innerHTML = jstotal.totalPrice; document.getElementById('topCartPriceItem').style.display = 'block'; document.getElementById('topCartQuantity').innerHTML = jstotal.totalQuantity; document.getElementById('topCartQuantityItem').style.display = 'block'; // console.log(jstotal.totalPrice); swal(message, { icon: "success", buttons: false, timer: 1700 }); } }); return false; } 
 <button type="submit" class="toch-button toch-add-cart" name="cartAdd" id="cartAdd" onclick="addToCartAjax('<?php echo product_added_to_cart; ?>');"><?php echo product_button_add_to_cart; ?></button>

Here is an example of your implementation.