How to save two inputs with same id

Ericka Sanchez 0
Viewed 53

I have a table which saves two values. I've created table using html, and I'm saving the information using JQuery, by sendidng information to an Action result on my controller. This is my code:

<body>
<button onclick="add()" class="btn btn-default" title="Agregar Bodega Origen" style="height:25px; width:25px;"><img src="~/Content/Imagenes/iconos/mas.png" style="height:12px; width:12px; position:relative; top:-5px; left:-6px"></button>
<button onclick="remove()" class="btn btn-default" title="Eliminar Bodega Origen" style="height:25px; width:25px;"><img src="~/Content/Imagenes/iconos/menos.png" style="height:15px; width:15px; position:relative; top:-5px; left:-7px"></button>
<button class="btn btn-default" id="btnGuardar" title="Guardar Datos" value="Add" style="height:27px; width:27px;"><img src="~/Content/Imagenes/iconos/guardar.png" style="height:15px; width:15px; position:relative; top:-4px; left:-6px"></button>
<div id="new_chq" style="position:relative; left:25px;" class="form-row">
    
    <div class='form-group'>
        <label>Bodega</label>
        <input class='form-control' id='bodega_o' name='bodega_o' style='width:140px' data-toggle="modal" />
    </div>

</div>

<input type="hidden" value="1" id="total_chq">

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script type="text/javascript">

    function add() {
        var new_chq_no = parseInt($('#total_chq').val()) + 1;
        var new_input = "<div class='form-row' style='position:relative; left:15px;' id='new_" + new_chq_no + "'><br/ ><div class='form-group'><label>Bodega</label><input class='form-control' id='bodega_o' name='bodega_o' style='width:140px' /><hr/ ></div><hr />";
        $('#new_chq').append(new_input);
        $('#total_chq').val(new_chq_no)
    }
    function remove() {
        var last_chq_no = $('#total_chq').val();
        if (last_chq_no > 1) {
            $('#new_' + last_chq_no).remove();
            $('#total_chq').val(last_chq_no - 1);
        }
    }

    $("body").on("click", "#btnGuardar", function () {
        var file_ = $("#file_");
        var bodega_o = $("#bodega_o");
        var _bodega = {};
        _bodega.file_ = file_.val();
        _bodega.bodega_o = bodega_o.val();
        $.ajax({
            type: "POST",
            url: "/bodegao/Create",
            data: JSON.stringify(_bodega),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                alert(r + " record(s) inserted.");
            }
        });
    });

</script>

As this is a partial view, I save the file_ value from another view. Currently, this method is saving the information from the first div, which has the id new_chq.

As you can see, I have a function which add a new div with and an input for the bodega_o value, basically, i'm adding a copy of my original input. But my code is just saving the value for my first input.

So, I think, the problem is in the div that I'm adding using my function.

Is it because the id? I'm so lost

jquery javascript html
1 Answers

$("{selector}").val(); returns only the value of the first element that matches the selector.

To get the values for all matching elements you need to iterate the element array. For example:

var values = [];
$("{selector}").each(function() {
    values.push($(this).val());
});

Now as people mentioned in the comments your id's should be unique so instead you can select your inputs based on the name attribute.

$('input[name="bodega_o"]')

So you can do something like this:

$("body").on("click", "#btnGuardar", function () {
    var file_ = $("#file_");
    var bodega_o = $('input[name="bodega_o"]');
    
    bodega_o.each(function() {
        var _bodega = {};
        _bodega.file_ = file_.val();
        _bodega.bodega_o = $(this).val();

        $.ajax({
            type: "POST",
            url: "/bodegao/Create",
            data: JSON.stringify(_bodega),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                alert(r + " record(s) inserted.");
            }
        });
    });
});

This will call /bodegao/Create for each bodega.

Dimitris Maragkos0
Related