My idea is to store in a PHP array the selected <option>
from different html <select>
' s.
In a form I generate using a php function called from a Jquery function a <ul>
containing each list element text and a <select>
Like so:
Part of the form where the list elements are added:
<div>
<label for="lineasP" id="asignarBdto" hidden>Productos de este pedido:</label>
</div>
<div>
<ul id="lineaPedidos" hidden>
<!-- Added here -->
</ul>
</div>
JQuery function that calls the PHP function:
$("#pedidos").on("input", function() {
$.get("cambio_cliente.php", { idPedido: $("#pedidos").val()}, function (data) {
$("#lineaPedidos").empty();
$("#lineaPedidos").append(data);
$("#asignarBdto").show();
$("#lineaPedidos").show();
});
});
PHP function:
// Si llegamos a este script por haber seleccionado un pedido
if(isset($_GET["idPedido"])){
// Abrimos una conexión con la BD y consultamos la lista de productos dado un pedido
$conexion = crearConexionBD();
$resultado = listarProductos($conexion, $_GET["idPedido"]);
if($resultado != NULL){
// Para cada producto del listado devuelto
foreach($resultado as $lineaPedido) {
//Listamos los productos de cada pedido
echo "<li>" . $lineaPedido["NUM_LINEA_P"] .": cantidad= ". $lineaPedido["CANTIDAD"] .", importe= ". $lineaPedido["IMPORTE"] ." <br><label>Base de dto: </label><select class=\"linPed\" required><option value=\"\" hidden disabled selected>% DTO</option> <option value=\"21\">21%</option> <option value=\"16\">16%</option> <option value=\"8\">8%</option></select></li>";
}
}
// Cerramos la conexión y borramos de la sesión la variable "idPedido"
cerrarConexionBD($conexion);
unset($_GET["idPedido"]);
}
So far so good.
The form display this fields without problems:
The problem starts here
I need to store each selected <option>
into the array I mentioned in the very begining. I don't know how many <select>
' s will be created, so I can't create id's for each of them. I decided to create a class (linPed) for this selects, and tried this JS function:
$(".linPed").on("input", function(){
alert("all good");
});
I first tried do some 'logging' to see if the function executes correctly, but doesn't show the alert.
Despite of that, even if the function executed correctly, how do I add in the array the selected .linPed
value? Or maybe there is an easier way to do it?
EDIT 1:
alert("hello");
$("select.linPed").on("change", function(){
alert("this works");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<div>
<li>
Hello
</li>
<select class="linPed">
<option value="21">
21%
</option>
<option value="16">
16%
</option>
<option value="8">
8%
</option>
</select>
</div>
<div>
<li>
bye
</li>
<select class="linPed">
<option value="21">
21%
</option>
<option value="16">
16%
</option>
<option value="8">
8%
</option>
</select>
</div>
</ul>
<select class="linPed">
<option value="21">
21%
</option>
<option value="16">
16%
</option>
<option value="8">
8%
</option>
</select>
I have created an snippet testing if the problem was that the <select>
's were inside the <li>
.
EDIT 2:
I still don't know why, but if I try to acces the <option>
's value from a separated script, doesn't work. I tried adding an onchange
field to the <select>
's and finally works.