Передать значение input обработчику

117
04 августа 2019, 21:20

У меня есть input на странице в котором по умолчанию value задано 1. При клике на кнопку я передаю значение через ajax, значение этого поля должно передаться обработчику. В обработчике прописано

$amount_units = $_POST['amount_units'];

но $amount_units = null

Как правильно записать в data? Вот моё поле и код js

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>

Answer 1

Я не очень понимаю зачем вы используете onclick если у вас уже есть jquery и можно просто навесить обработчик через on, но ладно, это ваше дело. Вернемся к вызову функции AjaxCountTotalPriceProduct.

Вы передаете туда 3 аргумента, каждый из которых строка:

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

Аргумент amount со значением 'amount' - это просто строка. У строки нет никакого свойства value, поэтому amount.value не возвращает ничего. Откройте консоль разработчика в браузере и проверьте на наличие ошибок.

Какой вывод - надо передавать либо значение поля. Значение поля обычно берется через функцию val(). Таким образом, вызов функции можно записать как:

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

Либо можно по прежнему передавать строку 'amount' и в самой функции уже получать значение поля:

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

Обратите внимание, что ключи объекта data содержат только нужное вам название, никаких =.

Также почаще дебагайте свой код, для вывода значений в консоль используйте console.log/console.dir.

Answer 2

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>

Вот Вам пример реализации.

READ ALSO
Модальное диалоговое окно

Модальное диалоговое окно

Как создать модальное диалоговое окно(как окно папки) на html странице, которое можно перемещать свободно по странице? С чего стоит начать?

106
Опустить ниже на несколько пикселей labels в Google Chart

Опустить ниже на несколько пикселей labels в Google Chart

Необходимо опустить на несколько пикселей label по оси X, для отрисовки linel chart использую библиотеку Google Chart (использую Vue фреймворк и Google Chart)Возможно...

101
Вывести полученные простые числа в &lt;body&gt; html

Вывести полученные простые числа в <body> html

Ниже скрипт js, определяющий все простые числа от 2 до 500

107
Не выполняется код JavaScript (JSON)

Не выполняется код JavaScript (JSON)

Имею вот такой код:

121