post data to controller using ajax

Question

I want to pass data from <input> value and corresponding recordID to controller method for each cart item in my shopping cart. My for loop generate input field for each cart item like this

<table>
    @for (int i = 0; i < Model.CartItems.Count; i++)
      {
     <tr>
       <td>
            <input data-id="@Model.CartItems[i].RecordID" type="text" value="@Model.CartItems[i].CartCount"/>
      </td>
    </tr>
    }
    <tr>
      <td>
           <button class="UpdateQuantity">Save Changes</button>
      </td>
    </tr>
</table>

This is my try hard script.I don't know how to get that data-id and value of input so i can pass both to controller method. I want to send pair of id and input value for each cart item in shopping cart so method can update quantity changes for every product in cart.

    $(".UpdateQuantity").click(function(){
        $("input[data-id][value]").each(function(i){
            $.ajax({
                type:"POST",
                url:"/ShopingCart/UpdateCartQuantity",
                data:{"id":input[data-id],"cartCount":input[value]},
                dataType:'json',
                cache:false,
                contenttype:"application/jsonrequest; charset=utf-8"
            }
                )
        })})

Generate you view correctly using the strongly typed `HtmlHelper` methods (`@Html.TextBoxFor(m => m.CartItems[i].CartCount)` etc) and then you can just use `$('form').serialize()`. (why in the world would you want to make a separate ajax call for each item in the shopping cart — , Aug 06 '16 at 02:34
But this seems related to your [previous question](http://stackoverflow.com/questions/38779587/how-to-iterate-through-values-of-text-boxes-and-send-them-to-controller-using-a), so again, why use ajax instead of submitting the form, updating everything at once and redirecting to the final checkout/confirmation page. — , Aug 06 '16 at 02:36
I am new to this so its confusing a a lot. Many of you say use form , but i don't know how,i have already made functionalities for remove cart items and update using ajax and all data is shown through table ,and i cant insert form into table so if i just delete all and do over with forms first i need than to modify my controller methods cos it returns json object so than i find a way to present cartitem properties. second how to make remove/update item functionalities if i use separate methods for remove and update and form accept one action .So that way i have got even more problems — Aleksandar Jeftic, Aug 06 '16 at 15:45
You need to at least show the model and the controller method that your posting to. — , Aug 10 '16 at 02:24

score 0 · Answer 1 · answered Aug 06 '16 at 02:23

You can use jquery:

$("input").each(function(){
  var id = $(this).data("id");
  var value = $(this).val();
  alert("My id is: " + id + " with this value: " + value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input data-id="myRecordID1" type="text" value="myValue1"/>
<input data-id="myRecordID2" type="text" value="myValue2"/>

score 0 · Answer 2 · answered Aug 06 '16 at 02:23

You can use jQuery's attr function.

$(".UpdateQuantity").click(function(){
    // in jQuery's .each, the second parameter is the element
    $("input[data-id][value]").each(function(i, input){
        var id = input.attr('data-id');
        var cardCount = input.attr('value');

        $.ajax({
            type:"POST",
            url:"/ShopingCart/UpdateCartQuantity",
            data:{"id":id,"cartCount":cardCount},
            dataType:'json',
            cache:false,
            contenttype:"application/jsonrequest; charset=utf-8"
        });
    });
});

score 0 · Answer 3 · answered Aug 06 '16 at 02:52

Just incase you want to just reduce to one ajax call...

Wraps the inputs with a form and change data-id to name:

<table>
   <form id="frm_cart">
    @for (int i = 0; i < Model.CartItems.Count; i++)
      {
     <tr>
       <td>
            <input name="@Model.CartItems[i].RecordID" type="text" value="@Model.CartItems[i].CartCount"/>
      </td>
    </tr>
    }
   </form>
    <tr>
      <td>
           <button class="UpdateQuantity">Save Changes</button>
      </td>
    </tr>
</table>

Then:

$(".UpdateQuantity").click(function(){
    //get frm inputs into array
    var frm_data = $("#frm_cart").serializeArray();

    $.ajax({
         type:"POST",
         url:"/ShopingCart/UpdateCartQuantity",
         data: frm_data,
         dataType:'json',
         cache:false,
         contenttype:"application/jsonrequest; charset=utf-8",
         error: function (jqXHR, textStatus) {
           //do on error
         },
         success: function (data){
            //do on success
         }
    });
});

//expect an array on server side with record_id as key and cart_count as value

post data to controller using ajax

3 Answers3