I have read all the related posts and used them with no success. Obviously I’m not a javascript expert. I had tried with option, and selectedItem, but don’t know how to extract the select object to use it.
This is a fraction of my code, I hope you can help me.
<div class="card-body"> <table class="table" id="products_table"> <thead> <tr> <th>Descripción</th> <th>Suaje</th> <th>Cantidad/etiq.</th> <th>Importe</th> <th>Sustrato</th> <th>Sustrato $</th> <th>Acabado</th> <th>Acabado $</th> <th>Otros</th> <th>Otro $</th> <th>Colores</th> </tr> </thead> <tbody> <input type="text" id="test" name="test" class="form-control"/> <tr id="product0"> <td> <input type="text" name="descripcion" class="form-control" value=""/> </td> <td> <select id="suajes_lista" name="suajes_lista" class="form-control" style="width: 100px;"> <option value="">-- escoge el suaje --</option> @foreach ($suajes as $suaje) <option value="{{ $suaje->id }}"> {{ $suaje->codificacion . ', Corte '. $suaje->corte->nombre. ', Dientes '. $suaje->dientes . ', M. Eje '. $suaje->medida_eje . ', M. Desarrollo '. $suaje->medida_desarrollo . ', C. Eje '. $suaje->no_cavidades_eje . ', C. Desarrollo '. $suaje->no_cavidades_desarrollo . ', Sep. C. Eje '. $suaje->sep_cavidades_eje. ', Sep. C. Desarrollo '. $suaje->sep_cavidedes_desarrollo . ', P. Dist. '. $suaje->porcentaje_dist . ', Ancho mm '. $suaje->ancho_papel_mm . ', Mult. ' . $suaje->mult_venta_millares }} </option> @endforeach </select> </td> </tr> </tbody> </table> </div>
Javascript at the end of file
//Agrega o elimina renglones, partidas de la cotización
let row_number = 1; $("#add_row").click(function(e){ e.preventDefault(); let new_row_number = row_number - 1; $('#product' + row_number).html($('#product' + new_row_number).html()).find('td:first-child'); $('#products_table').append('<tr id="product' + (row_number + 1) + '"></tr>'); document.getElementById("products_table").rows[row_number + 1].cells[1].addEventListener("change", attachOnChangeToCells); row_number++; }); function attachOnChangeToCells() { $('#test').val(row_number); var array = @json($suajes); alert(document.getElementById("products_table").rows[this.parentNode.rowIndex].cells[1].innerHTML); alert($(this).text()); alert($(this).val()); alert(document.getElementById("products_table").rows[this.parentNode.rowIndex].cells[1].firstChild.value); }
Advertisement
Answer
I see you are already using JQuery
function in the code, and as far as Laravel
use that as well you can manage this with JQuery
. I did some changes so it should work as desired. Here is the example:
$("#add_row").on('click', function(e){ let row_number = $('#products_table tbody tr').length; e.preventDefault(); $('#products_table').append('<tr id="product' + row_number + '"></tr>'); $('#product' + row_number).html($('#product' + (row_number - 1)).html()); }); $("#products_table").on('change', '#suajes_lista', function(e){ $("#test").val(this.value); //get current selected option value alert('Row where the select was triggered has ID: ' + $(this).parent().parent().attr('id')); //get up on 1 level and get parent ID });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card-body"> <input type="text" id="test" name="test" value="" class="form-control"/> <button type="submit" id="add_row">Add new</button> <table class="table" id="products_table"> <thead> <tr> <th>Descripción</th> <th>Suaje</th> </tr> </thead> <tbody> <tr id="product0"> <td> <input type="text" name="descripcion" class="form-control" value=""/> </td> <td> <select id="suajes_lista" name="suajes_lista" class="form-control" style="width: 100px;"> <option value="">-- Select --</option> <option value="1">1</option> <option value="2">2</option> </select> </td> </tr> </tbody> </table> </div>
Hope it will help you understand the concept.