Extract a value from an input that is inside a foreach with javascript

Question

Extract a value from an input that is inside a foreach with javascript

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have some data that I bring from a foreach and I show them in a table, and each record has a field called quantity, what happens is that this field when I send it through javascript takes the first value from the first record. who follows him, he takes it as if he were the first.

This is the registration list brought by the foreach :

<?php foreach ($articulos as $articulo): ?>

                <tr>     
                    <td><?= $this->Number->format($articulo->idart) ?></td>
                    <td><?= h($codigo = $articulo->codigo_orion)?></td>
                    <td><?= h($nombre = $articulo->nombre)?></td>

                     <?php if($articulo->tipo_item_id == 1){
                     echo '<td>ELECTRICA</td>';    
                         }elseif($articulo->tipo_item_id == 2){
                     echo '<td>ELECTRONICA</td>';    
                         }elseif($articulo->tipo_item_id == 3){
                     echo '<td>FERRETERIA</td>';    
                         }elseif($articulo->tipo_item_id == 4){
                     echo '<td>INSTRUMENTACIÓN</td>';   
                         }elseif($articulo->tipo_item_id == 5){
                     echo '<td>COMUN Y REDES</td>';    
                         }elseif($articulo->tipo_item_id == 6){
                     echo '<td>SALUD Y ALTURAS</td>';    
                         }elseif($articulo->tipo_item_id == 7){
                     echo '<td>PAPELERÍA</td>';    
                         }else{
                     echo '<td>PENDIENTE.</td>';
                         }
                    ?>
                    <td><?= $this->Number->format($articulo->valor_u)?></td>
                    <td><?= $this->Html->link(__(''), ['controller'=>'Articulos','action' => 'view', $articulo->idart], array('class' => 'teal-text text-darken-1 fa fa-eye fa-lg')) ?>&nbsp;</td> 
                    <td><input  type="text" name="cant[]" class='validate' style='text-align:center' placeholder="Ejemplo: 1" id="cantidad" required/></td>
                    <td><button class="btn waves-effect waves-light teal fa fa-shopping-cart" refid="<?php echo $articulo->idart; ?>" onClick="getAjax(this)" ></button></td>

                  </tr>


              <?php  endforeach;  ?>

This is the one I received through javascript :

<script>
     function getAjax(object){


     var cantidad = document.getElementById("cantidad").value;

       alert(cantidad);     

     var id = object.getAttribute("refid"); 


     }
</script>

When I run the alert to see what value it sends me it shows me that it only takes the first value, when I send another record it takes the first amount of the first record.

javascript php

asked by Sebastian Lopez 07.12.2016 в 18:19

source

2 answers

1

That's because all the elements have the same id, you would have to get the list of elements and iterate them with:

document.getElementsByName("cant[]");
document.querySelectorAll("#cantidad");

Alternatively, you could add an attribute with the index in the php cycle and use it as part of the selector:

document.querySelector("#cantidad[data-index=1]");

answered by 07.12.2016 в 19:36

How do I type the symbol "¿" in Python 2.7? Consultation about ionic and bd without internet

score 0 · Accepted Answer

I will suggest the following modifications:

Add the ID of the article ( idart ) to id of input
In the function getAjax , add a second parameter that is the ID of the article.

The code could be the following:

<?php foreach ($articulos as $articulo): ?>
<tr>     
    <td><?= $this->Number->format($articulo->idart) ?></td>
    <td><?= h($codigo = $articulo->codigo_orion)?></td>
    <td><?= h($nombre = $articulo->nombre)?></td>
    <td><?php
    if ($articulo->tipo_item_id == 1) {
        echo 'ELECTRICA';
    } elseif ($articulo->tipo_item_id == 2) {
        echo 'ELECTRONICA';
    } elseif ($articulo->tipo_item_id == 3) {
        echo 'FERRETERIA';
    } elseif ($articulo->tipo_item_id == 4) {
        echo 'INSTRUMENTACIÓN';
    } elseif ($articulo->tipo_item_id == 5) {
        echo 'COMUN Y REDES';
    } elseif ($articulo->tipo_item_id == 6) {
        echo 'SALUD Y ALTURAS';
    } elseif ($articulo->tipo_item_id == 7) {
        echo 'PAPELERÍA';
    } else {
        echo 'PENDIENTE.';
    }
    ?></td>
    <td><?= $this->Number->format($articulo->valor_u)?></td>
    <td><?= $this->Html->link(__(''), ['controller'=>'Articulos', 'action' => 'view', $articulo->idart], array('class' => 'teal-text text-darken-1 fa fa-eye fa-lg')) ?>&nbsp;</td> 
    <!-- AQUI: El id del input tiene concatenado el idart -->
    <td><input type="text" name="cant[]" class='validate' style='text-align:center' placeholder="Ejemplo: 1" id="cantidad<?php echo $articulo->idart; ?>" required/></td>
    <!-- AQUI: Pasamos el idart como segundo parametro -->
    <td><button class="btn waves-effect waves-light teal fa fa-shopping-cart" onClick="getAjax(this, '<?php echo $articulo->idart; ?>')" ></button></td>
</tr>
<?php  endforeach;  ?>

And the javascript :

<script>
function getAjax(object, idart){
   var cantidad = document.getElementById("cantidad" + idart).value;
   alert(cantidad);
   // Mas codigo
}
</script>