Es justo como dices, si observas la función que estás llamando desde el elemento:
onchange="updateCartItem(this, '<?php echo $item["rowid"]; ?>')"
Se están pasando dos parámetros, this
que sería el elemento actual, y el valor que tendría $item["rowid"]
.
Ahora bien, estás observando una mala práctica al programar de este modo. En el apartado titulado Separation of structure and behaviour - Separación de estructura y comportamiento, w3.org recomienda que no se usen funciones in-line, como tu onchange
, escrito in-line dentro del mismo elemento HTML. Esto hace el contenido HTML dependiente del código Javascript, dificultando el mantenimiento. Imagina una aplicación con cientos o miles de funciones in-line y que esa función debe evolucionar, necesitando manejar otros parámetros. Te quiero ver hurgando entre todos los HTML para encontrar en qué archivos declaraste esa función in-line.
Para evitar eso, se recomienda programar en base a eventos. Y colocar en el elemento aquellos valores que necesites. Para este caso, vamos a usar el atributo id
del elemento para poner en él el valor que tendría $item["rowid"]
, y usaremos ese mismo atributo (el id
) para escuchar los cambios de ese input y llamar a la función. Y, si necesitaras pasar más datos aparte del id, puedes recurrir a los atributos data-
, o ponerlos en otro elemento.
Verás que ahora la función recibe un parámetro e
que sería el evento, y a partir de él puedes obtener cualquier valor que haya en ese elemento al momento de haber cambiado: su id
, su value
, o cualquier otro dato que ese elemento tuviese y que te pueda ser útil en ese contexto.
Aquí implementamos una escucha por el id
del elemento, pero puedes escuchar eventos por otro tipo de selectores: clases, tipo de elemento, etc.
Intenta cambiar el valor del input
y verás en consola un objeto mData
que sería lo que enviarías al servidor. Los valores de ese objeto se construyen usando e.target
que sería el objeto desde el cual se lanzó el evento (sería parecido a this
, pero más preciso).
/*Se recomienda verificar siempre la carga del DOM*/
document.addEventListener("DOMContentLoaded", function(e) {
var elInput = document.getElementById("valorID");
elInput.addEventListener("change", updateCartItem, false);
function updateCartItem(e) {
var mData = {
action: "updateCartItem",
id: e.target.id,
qty: e.target.value
};
console.log(mData);
/*Omito el get para fines de prueba*/
/*
$.get("cartAction.php", {
action: "updateCartItem",
id: id,
qty: obj.value
}, function(data) {
if (data == 'ok') {
location.reload();
} else {
alert('Cart update failed, please try again.');
}
});
*/
}
});
<input type="number" class="form-control text-center" id="valorID" value="999" />