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.
Advertisement
Answer
Personaly I would use change in stead of input in the .on() function for detecting a change like:
$('.linPed').on('change', function() {
alert( this.value );
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='linPed'>
<option value="1"><li>One</li></option>
<option value="2">Two</option>
</select>For getting al the value I would use the .each() function like:
var arr = [];
$('.linPed').each(function(){
arr.push($(this).val())
})
If I’m correct this gives you al the selected values in the array arr.
Edit:
I executed echo myself and lookt at it. It is there where lays the problem. Your class is’t linPed it’s "linPed".
In your code replece al the with nothing.
Edit 2:
Having a look at your snippet and saw it instantly. You js ran before the html is loaded. Put your JavaScript at the end of your code. Or put an ready function around your code like
$(function () {
//Code ..
});