0

I hope you can help me, I have a button which adds a new row with a select option for each row, the idea is to select the invoices of each row in the different inputs, the problem is that only the first row works, in the others rows no longer allows me to insert different records

  <tbody>
                            <tr id="venta0">
                                <td>
                                    <select name="products[]" class="form-control" id="opciones"
                                        onchange='cambioOpciones();'>
                                        @foreach ($ventas1 as $ventas)
                                        <option
                                            value="{{$ventas->FECHA}}_{{$ventas->MONEDA}}_{{$ventas->NUMCTA}}_{{$ventas->FAMILIA}}_{{$ventas->CONCEPTO}}_{{$ventas->FACTURA}}_{{$ventas->DENOMINACION_SOCIAL}}_{{$ventas->VENDEDOR}}">
                                            {{ $ventas->FACTURA }}---{{$ventas->CONCEPTO }}
                                        </option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <div class="form-group col-xs-2">
                                        <input type="text" class="form-control" id="fecha" placeholder="fecha" readonly>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group col-xs-2">
                                        <input type="text" class="form-control" id="moneda" placeholder="fecha"
                                            readonly>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group col-xs-2">
                                        <input type="text" class="form-control" id="numcta" placeholder="numcta"
                                            readonly>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group col-xs-7">
                                        <input type="text" class="form-control" id="familia" placeholder="familia"
                                            readonly>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group col-xs-2">
                                        <input type="text" class="form-control" id="Concepto" placeholder="concepto"
                                            readonly>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group col-xs-2">
                                        <input type="text" class="form-control" id="showId" placeholder="factura"
                                            readonly>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group col-xs-2">
                                        <input type="text" class="form-control" id="denominacion"
                                            placeholder="denominacion" readonly>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group col-xs-4">
                                        <input type="text" class="form-control" id="vendedor" placeholder="vendedor"
                                            readonly>
                                    </div>
                                </td>
                            </tr>
                            <tr id="venta1">
                        </tbody>

My code in JavaScript

<script>
    function cambioOpciones(e) {
  const combo = document.getElementById('opciones'),
    [FECHA,MONEDA,NUMCTA,FAMILIA,CONCEPTO,FACTURA,DENOMINACION_SOCIAL,VENDEDOR] = document.getElementById('opciones').value.split('_');
    document.getElementById('fecha').value = FECHA;
    document.getElementById('moneda').value = MONEDA;
    document.getElementById('numcta').value = NUMCTA;
    document.getElementById('familia').value = FAMILIA;
  document.getElementById('Concepto').value = CONCEPTO;
  document.getElementById('showId').value = FACTURA;
  document.getElementById('denominacion').value = DENOMINACION_SOCIAL;
  document.getElementById('vendedor').value = VENDEDOR;
}
</script>
<script>
    $(document).ready(function() {
        let row_number = 1;
        $("#add_row").click(function(e) {
            e.preventDefault();
            let new_row_number = row_number - 1;
            $('#venta' + row_number).html($('#venta' + new_row_number).html()).find('td:first-child');
            $('#ventas_table').append('<tr id="venta' + (row_number + 1) + '"></tr>');
            row_number++;
        });
        $("#delete_row").click(function(e) {
            e.preventDefault();
            if (row_number > 1) {
                $("#venta" + (row_number - 1)).html('');
                row_number--;
            }
        });
    });
</script>

enter image description here

ADyson
  • 57,178
  • 14
  • 51
  • 63
Brayan Galvan
  • 3
  • 4
  • "no longer allows"...what does that actually mean? Explain the problem more precisely. Does it create the extra HTML row? Is the problem occurring when you try to submit the data? Or there's something you can't do within the row first? It's unclear. Try to narrow down the issue / describe it more specifically, please. If you get error messages, or unexpected behaviour, please mention exactly what it is. See also [ask] and how to create a [mre] of your issue. Thanks. – ADyson Sep 20 '22 at 15:05
  • It is a form in which you can add rows in a table with a button, and when each row is added it contains a select to select the invoice and insert the data in the corresponding row, the problem is that it only works for me in the first row , in the others no, leave a link of the example – Brayan Galvan Sep 20 '22 at 15:09
  • `it only works for me in the first row`... _what_ only works in the first row? That's what I was asking you. It's unclear what specifically is going wrong. Your screenshot just shows lots of rows, there's no obvious visible problem in that picture. Or at least it's not obvious to everyone who has never seen your application or your code before. – ADyson Sep 20 '22 at 15:12
  • ahh ok, if you look at the image you can see how the inputs of the first row are filled in, in the other rows I have selected another invoice number to insert the data in the inputs of that row, but it does not insert them, – Brayan Galvan Sep 20 '22 at 15:16
  • Ok i understand now, thankyou. Well if you look at `function cambioOpciones` it uses `document.getElementById` throughout, to find specific elements. Clearly an ID can only represent one specific field. If you copy that field, and it has the same ID, then JavaScript cannot tell the difference between them, so it just uses the first one it finds. All others are considered invalid because the ID is not unique. – ADyson Sep 20 '22 at 15:23
  • Instead you need to use Javascript / jQuery to find the elements within the row containing the `select` which was changed, and update those ones specifically. – ADyson Sep 20 '22 at 15:24
  • Exactly, that's what they told me and to use name[] but I don't know how to use it – Brayan Galvan Sep 20 '22 at 15:26
  • I don't think it has much to do with the name, I'm not sure who told you that or in what context. Start from the select which was changed (the `e` event object can tell you this). Then find the parent tr, and then find the elements within it. jQuery is good at that kind of thing (as you can see from the code you've already written to copy the row). – ADyson Sep 20 '22 at 15:29
  • As already pointed out, [IDs must be unique](https://stackoverflow.com/questions/11114622/jquery-id-selector-works-only-for-the-first-element), that's the first part of your problem. Once you've fixed that, you'll have a set of similar elements in table rows and you want to target just those in the row that was clicked. You can traverse up and down the DOM from the clicked element, using eg `.closest()` and `.find()`: https://stackoverflow.com/questions/73788840/enter-multiple-data-from-mysql-into-multiple-inputs-with-select-option – Don't Panic Sep 21 '22 at 07:40

0 Answers0