0

Al hacer click en el botón agregar carrito (llamo a una función de javascript que me agregaría el idLibro que esta en el input type="hidden" al array de la función de javascript) después pasaría ese array de javascript al controladorpara hacer algo (pero eso seria otro tema). el input lo tengo así:

<input type="hidden" name="inputText" id="inputText" value="@item.IdLibro" />

El problema que tengo es que cuando hago click en el botón agregar a carrito en cualquier fila de mi tabla, siempre me agrega el mismo idLibro a el arrayde javascript. Por ejemplo: tengo una tabla con 5 filas, en c/u de las filas tengo el botón agregar carrito y los datos del registro. Entonces si en la fila 1 hago click en agregar a carrito, en el array me guarda el idLibro 25, pero si hago click en agregar a carrito en la fila 4 también me vuelve a cargar el idLibro 25.

Aca el .cshtml

@model List<Librery_MVC.Models.Libro>

<p id="pText">hola</p>

<div class="table-responsive">
    <table class="table table-striped table-primary mt-5 table-bordered" id="myTable">
        <thead>
            <tr>
                <th></th>
                <th>Id</th>
                <th>Nombre</th>
                <th>Autor</th>
                <th>Categoria</th>
                <th>Descripcion</th>
                <th>Precio</th>
                <th>Imagen</th>
            </tr>
        </thead>
        <tbody>

            @if (Model.Count() == 0)
            {
                <tr>
                    <td colspan="6" style="color:red">
                        No Match any document
                    </td>
                </tr>
            }

            else
            {
                foreach (Libro item in Model)
                {

                    autor = sa.getAutor(item.IdAutor);
                    editorial = es.GetEditorial(item.IdEditorial);
                    category = cs.getCategoria(item.IdCategoria);

                <tr>
                    <th>
                        <input type="hidden" name="inputText" id="inputText" value="@item.IdLibro" />
                        @Html.ActionLink("Mostrar", "MostrarLibro", "Usser", new { idLibro = item.IdLibro }, new { @class = "btn btn-info" })
                        <button onclick="pushData();" class="btn btn-info">Agregar a carrito</button>
                    </th>
                    <th>@item.IdLibro</th>
                    <th class="col-md-2">@item.Nombre</th>
                    <th>@autor.Nombre</th>
                    <th>@category.Nombre</th>
                    <th class="col-md-3"><textarea rows="4" cols="40" readonly>@item.Descripcion</textarea></th>
                    <th>@item.Precio</th>
                    <th><img src="/@item.UrlImagen.Replace("\\", "/")" width="80" height="100" /></th>
                </tr>
                }
            }
        </tbody>
    </table>
</div>

Y aca la función de javascript

<script type="text/javascript">
    //creo el array
    var myArr = [];

    function pushData() {
        //obtengo valores del input hidden "inputText"
        var inputText = document.getElementById('inputText').value;
        //añado los elementos al array
        myArr.push(inputText);

        var pval = "";

        for (i = 0; i < myArr.length; i++) {
            pval = pval + myArr[i] + "<br/>";
        }

        //muestro el array
        document.getElementById('pText').innerHTML = pval;
    }
</script>

1 respuesta 1

0

estás creando el hidden dentro de un bucle, luego lo que está ocurriendo es que se están creando varios hidden todos con el mismo id (inputText). Cuando haces

var inputText = document.getElementById('inputText').value;

Te devuelve el primer elemento que encuentra con ése id, independientemente del botón que hayas pulsado.

Podrías modificar tu función pushData para que reciba directamente el idLibro, algo así:

<button onclick="pushData('@item.IdLibro');" class="btn btn-info">Agregar a carrito</button>

y el script así:

<script type="text/javascript">
    //creo el array
    var myArr = [];

    function pushData(idLibro) {

        myArr.push(idLibro);

        var pval = "";

        for (i = 0; i < myArr.length; i++) {
            pval = pval + myArr[i] + "<br/>";
        }

        //muestro el array
        document.getElementById('pText').innerHTML = pval;
    }
</script>
1
  • Gracias @S. Bonet! funciona perfecto!
    – Claudio
    Commented el 21 feb. 2020 a las 15:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.