How to insert data into table while Clicking Add Button in MVC4 using JavaScript or jQuery?

Question

I am trying to add a record into table by using jQuery. The sample code is below.

@section scripts

{
    
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 
 type="text/css" />
    <script>
        //Date Picker
        $(function ()
        {
            $('#orderDate').datepicker({ dateFormat: 'mm-dd-yy' })
        });

        $(document).ready(function () {
            var orderItems = [];
            // Add Button Click Function
            $('#add').click(function () {

                //Check Validation Of OrderItems
                var isValidItem =false;
                if ($('#itemName').val().trim()=='')
                {
                    $('#itemName').siblings('span.error').css('visibility','visible');
                    isValidItem=false;
                }
                else
                {
                    $('#itemName').siblings('span.error').css('visibility','hidden');                
                }

                if(! ($('#quantity').val().trim() != '' && ! isNaN($('#quantity').val().trim())))
                {
                    $('#quantity').siblings('span.error').css('visibility','visible');
                    isValidItem=false;
                }
                else {
                    $('#quantity').siblings('span.error').css('visibility','hidden');
                }

                if(! ($('#rate').val().trim() != '' && ! isNaN($('#rate').val().trim())))
                {
                    $('#rate').siblings('span.error').css('visibility','visible');
                    isValidItem=false;
                }
                else {
                    $('#rate').siblings('span.error').css('visibility','hidden');
                }



        //add Item To List If Valid
                 If(isValidItem)
                 {
                     OrderItems.push(
                         {
                             ItemName: $('#itemName').val().trim(),
                             Quantity: parseInt($('#quantity').val().trim()),
                             Rate    : parseFloat($('rate').val().trim()),
                             Total   : parseInt($('#quantity').val().trim()) *  parseFloat($('rate').val().trim())
                         });
                     $('#itemName').val('').focus();
                     $('#quantity').val('');
                     $('#rate').val('');

                 }
                 GenratedItemTable();

});

            // Save Button Click Function 
            $('#submit').click(function() {
                //Validation of  Order 

                var IsAllValid=true;
                if (OrderItems.length == 0)
                {
                    $ ('#orderItems').html('<span type="color:red;"> please add order items </span>');
                    isAllVaild=false;
                }

                if( $('#orderNo').val().trim() == '')
                {
                    $('#orderNo').siblings('span.error').css('Visibility','visible');
                    isAllVaild=false;
                }
                else
                {
                    $('#orderDate').siblings('span.error').css('Visibility','hidden');
                }

                if( $('#orderDate').val().trim() == '')
                {
                    $('#orderDate').siblings('span.error').css('Visibility','visible');
                    isAllVaild=false;
                }
                else
                {
                    $('#orderDate').siblings('span.error').css('Visibility','hidden');
                }

                // Save If Valid

                if (isAllVaild)
                {
                    var data={ OrderNo  : $('#orderNo').val().trim(),
                        OrderDate: $('#orderDate').val().trim(),
                        Description :$('#description').val().trim(),
                        OrderItems : orderItems
                    }
                }
                $(this).val('Please Wait....');
                $.ajax({

                    url :' /Home/SaveOrder/',
                    type:"POST",
                    data:JSON.stringify(data),
                    datatype:"JSON",
                    ContentType:"application/json",
                    success :function (d)
                    {
                        //check is successfully save to database 
                        if (d.status == true) 
                        {
                            alert('SuccessFully Done');
                            // Clear Form
                            orderItems=[];
                            $('# orderNo').val('');
                            $('# orderDate').val('');
                            $('# orderItems').empty();
    
                        }
                        else
                        {
                            alert('Failed to Save Data');
                        }
    
                    },
                    error :function()
                    {
                        alert('Error. Please Try Again');
                    }
                });
            
                 
                 
           
                     
                 });

            // Function For Show Added Items in Table
            function GenratedItemTable()
            {
                If(orderItems.length > 0)
                {
                    var $table = $('<table/>');
                    $table.append('<thead><tr><th>Item</th><th>Quantity</th><th>Rate</th><th>Total</th></tr></thead>');
                    var $tbody = $('<tbody/>');
                    $each(orderItems,function(i,val)
                    {
                        var $row=$('<tr/>');
                        $row.append($('<td/>').html(val.ItemName));
                        $row.append($('<td/>').html(val.Quantity));
                        $row.append($('<td/>').html(val.Rate));
                        $row.append($('<td/>').html(val.Total));
                        $tbody.append($row);
                        
                    });
                    $table.append($tbody);
                    $('#OrderItems').html($table);

                }
            }



        });

    </script>

<style>
        /* Adding some Css For good Looks*/
        span.error
        {
            display:block;
            visibility:hidden;
            color:red;
            font-size:90%;
        }

        /* Css For Table*/
        .container td 
        {
            vertical-align:top;
        }

        .tablecontainer table
        {
            width:100%;
            border-collapse:collapse;
            border-top:1px solid red;
            border-right:1px solid  red;
        }

        .tablecontainer th 
        {
            border-bottom:2px solid red ! important;
        }

        .tablecontainer th, .tablecontainer td 
        {
            text-align:left;
            border-left:1px solid  red;
            padding : 5px;
            border-bottom: 1px solid red;

        }
        .ui.widget 
        {
            font-size: 12px !important;    
        }
    </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>Master Details Entry</h2>

<div class ="container" style ="max-width:600px">
   
    <div class ="master">
        <h4>Order Details</h4>
    </div>  
    <table>
        <tr>
            <td> Order No </td>
            <td> 
                <input type="text" id="orderNo" />
                <span class="error">Order No Required</span>
            </td>
            <td>Order Date</td>
            <td>
                <input type="text" id="orderDate" />
                <span class="error">Order Valid OrderDate Required(Ex: MM-DD-YY)</span>
            </td>
        </tr>
        <tr>
            <td>Description</td>
            <td colspan="3">
                <textarea id="description" style="width:100%"></textarea>
            </td>
        </tr>
    </table>

    <div class="Details">
        <h4>Order Items</h4>
        <table width="100%">
            <tr>
                <td>ItemName</td>
                <td>Quantity</td>
                <td>Rate</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>
                    <input type="text" id="itemName" />
                    <span class="error">ItemName Required</span>
                </td>
                <td>
                    <input type="text" id="quantity" />
                    <span class ="error ">Valid quantity required</span>
                </td>
                <td>
                    <input type="text" id="rate" />
                    <span class="error">Valid Rate Required</span>
                </td>
                <td>
                    <input type="button" id="add" value="add" />
                </td>
            </tr>
        </table>
 <div id="OrderItems" class="tablecontainer"> 

 </div>
        <div style="padding:10px 0px";text-align="right">
            <input type="submit" type="button" value="save" style="padding:10px 20px" />
        </div>
 </div>
</div>

In my order form I have two categories Order Details and Order Items. which is mentioned in the above image.

Under Order Details i have fields like Order No, OrderDate, Description

Under Order Items i have fields like Item Name Quantity Rate And Finally I have Add Button in the Form

If I click the Add button it can't save the data into table in DB. Now what I want is if I click the add button it want to add the data into table and also it want to show in Form as like Grid View . For that which technology I have to use jQuery, JavaScript or any other technology?

I tried using jQuery:

@section scripts

{
    
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <


    <script>
        //Date Picker
        $(function ()
        {
            $('#orderDate').datepicker({ dateFormat: 'mm-dd-yy' })
        });

        $(document).ready(function () {
            var orderItems = [];
            // Add Button Click Function
            $('#add').click(function () {

                //Check Validation Of OrderItems
                var isValidItem =false;
                if ($('#itemName').val().trim()=='')
                {
                    $('#itemName').siblings('span.error').css('visibility','visible');
                    isValidItem=false;
                }
                else
                {
                    $('#itemName').siblings('span.error').css('visibility','hidden');                
                }

                if(! ($('#quantity').val().trim() != '' && ! isNaN($('#quantity').val().trim())))
                {
                    $('#quantity').siblings('span.error').css('visibility','visible');
                    isValidItem=false;
                }
                else {
                    $('#quantity').siblings('span.error').css('visibility','hidden');
                }

                if(! ($('#rate').val().trim() != '' && ! isNaN($('#rate').val().trim())))
                {
                    $('#rate').siblings('span.error').css('visibility','visible');
                    isValidItem=false;
                }
                else {
                    $('#rate').siblings('span.error').css('visibility','hidden');
                }



        //add Item To List If Valid
                 If(isValidItem)
                 {
                     OrderItems.push(
                         {
                             ItemName: $('#itemName').val().trim(),
                             Quantity: parseInt($('#quantity').val().trim()),
                             Rate    : parseFloat($('rate').val().trim()),
                             Total   : parseInt($('#quantity').val().trim()) *  parseFloat($('rate').val().trim())
                         });
                     $('#itemName').val('').focus();
                     $('#quantity').val('');
                     $('#rate').val('');

                 }
                 GenratedItemTable(); });// Save Button Click Function 
            $('#submit').click(function() {
                //Validation of  Order 

                var IsAllValid=true;
                if (OrderItems.length == 0)
                {
                    $ ('#orderItems').html('<span type="color:red;"> please add order items </span>');
                    isAllVaild=false;
                }

                if( $('#orderNo').val().trim() == '')
                {
                    $('#orderNo').siblings('span.error').css('Visibility','visible');
                    isAllVaild=false;
                }
                else
                {
                    $('#orderDate').siblings('span.error').css('Visibility','hidden');
                }

                if( $('#orderDate').val().trim() == '')
                {
                    $('#orderDate').siblings('span.error').css('Visibility','visible');
                    isAllVaild=false;
                }
                else
                {
                    $('#orderDate').siblings('span.error').css('Visibility','hidden');
                }

                // Save If Valid

                if (isAllVaild)
                {
                    var data={ OrderNo  : $('#orderNo').val().trim(),
                        OrderDate: $('#orderDate').val().trim(),
                        Description :$('#description').val().trim(),
                        OrderItems : orderItems
                    }
                }
                $(this).val('Please Wait....');
                $.ajax({

                    url :' /Home/SaveOrder/',
                    type:"POST",
                    data:JSON.stringify(data),
                    datatype:"JSON",
                    ContentType:"application/json",
                    success :function (d)
                    {
                        //check is successfully save to database 
                        if (d.status == true) 
                        {
                            alert('SuccessFully Done');
                            // Clear Form
                            orderItems=[];
                            $('# orderNo').val('');
                            $('# orderDate').val('');
                            $('# orderItems').empty();
    
                        }strong text
                        else
                        {
                            alert('Failed to Save Data');
                        }
    
                    },
                    error :function()
                    {
                        alert('Error. Please Try Again');
                    }
                });
            
                 
                 
           
                     
                 });

            // Function For Show Added Items in Table
            function GenratedItemTable()
            {
                If(orderItems.length > 0)
                {
                    var $table = $('<table/>');
                    $table.append('<thead><tr><th>Item</th><th>Quantity</th><th>Rate</th><th>Total</th></tr></thead>');
                    var $tbody = $('<tbody/>');
                    $each(orderItems,function(i,val)
                    {
                        var $row=$('<tr/>');
                        $row.append($('<td/>').html(val.ItemName));
                        $row.append($('<td/>').html(val.Quantity));
                        $row.append($('<td/>').html(val.Rate));
                        $row.append($('<td/>').html(val.Total));
                        $tbody.append($row);
                        
                    });
                    $table.append($tbody);
                    $('#OrderItems').html($table);

                }
            }



        });

    </script>

Some options [here](http://stackoverflow.com/questions/29161481/post-a-form-array-without-successful/29161796#29161796) and [here](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) — , Nov 04 '15 at 05:25
` $each(orderItems,function(i,val)` correct ` $.each(orderItems,function(i,val)` — madalinivascu, Nov 04 '15 at 05:28
I think you should use mvc model binding or any javascript library like angualrjs, reactjs, knockoutjs.. which will you help you to add record into table easily. — Shohel, Nov 04 '15 at 05:33
yes, u are right , but i newbie to MVC , so only asking from here for your valuable suggestion , which technology i choose Shohel — Felish Anand, Nov 04 '15 at 05:39
AngularJs is better for you, To learn angualrjs you can see my first article http://www.codeproject.com/Articles/832288/CRUD-with-SPA-ASP-NET-Web-API-and-Angular-js — Shohel, Nov 04 '15 at 05:53
I am Already tried my best , but there is no error in my code and also no output for my code @StephenMuecke — Felish Anand, Nov 04 '15 at 06:00
@FelishAnand, I don't understand what your asking. Do you look at the links I gave you to show how to do this? — , Nov 04 '15 at 06:05

madalinivascu · Accepted Answer · 2015-11-04T06:45:25.713

You have serious issues with you logic

           $(document).ready(function () {
      var itm = [];
      // Add Button Click Function
      $('#add').click(function () {

          var i = 0;
          if ($('#itemName').val() == '') {
              $('#itemName').siblings('span.error').css('visibility', 'visible');
          } else {
              $('#itemName').siblings('span.error').css('visibility', 'hidden');
              i++;
          }

          if ($('#quantity').val() == '' || isNaN($('#quantity').val())) {
              $('#quantity').siblings('span.error').css('visibility', 'visible');

          } else {
              $('#quantity').siblings('span.error').css('visibility', 'hidden');
              i++;
          }

          if ($('#rate').val() == '' || isNaN($('#rate').val())) {
              $('#rate').siblings('span.error').css('visibility', 'visible');
          } else {
              $('#rate').siblings('span.error').css('visibility', 'hidden');
              i++;
          }
          if (i == 3) {
              itm.push({
                  ItemName: $('#itemName').val(),
                  Quantity: parseInt($('#quantity').val()),
                  Rate: parseFloat($('#rate').val()),
                  Total: parseInt($('#quantity').val()) * parseFloat($('#rate').val())
              });
              $('#itemName').val('').focus();
              $('#quantity').val('');
              $('#rate').val('');

          }
          GenratedItemTable(itm);
      });
      $('input[value="save"]').click(function () {
          $.ajax({

              url: ' /Home/SaveOrder/',
              type: "POST",
              data: JSON.stringify(itm),
              datatype: "JSON",
              ContentType: "application/json",
              success: function (d) {
                  //check is successfully save to database 
                  if (d.status == true) {
                      alert('SuccessFully Done');
                  }
                  else {
                      alert('Failed to Save Data');
                  }

              },
              error: function () {
                  alert('Error. Please Try Again');
              }
          });
      });
      // Function For Show Added Items in Table
      function GenratedItemTable(itm) {
          if (itm.length > 0) {
              var $table = $('<table/>');
              $table.append('<thead><tr><th>Item</th><th>Quantity</th><th>Rate</th><th>Total</th></tr></thead>');
              var $tbody = $('<tbody/>');
              $.each(itm, function (i, val) {
                  var $row = $('<tr/>');
                  $row.append($('<td/>').html(val.ItemName));
                  $row.append($('<td/>').html(val.Quantity));
                  $row.append($('<td/>').html(val.Rate));
                  $row.append($('<td/>').html(val.Total));
                  $tbody.append($row);

              });
              $table.append($tbody);
              $('#OrderItems').html($table);
          }
      }



  });

jsfiddle: https://jsfiddle.net/0zwo70os/4/

I got Output.. Kinldy Help Me How to Remove the row in table while click remove Button @madlin Ivascu — Felish Anand, Nov 04 '15 at 06:44

Shohel · Answer 2 · 2015-11-04T06:24:16.817

Your code is working now. You have missed lots of functionality and have not used properly variable or array. All of code i have fixed, now it is running..

//Date Picker
$(function() {
  $('#orderDate').datepicker({
    dateFormat: 'mm-dd-yy'
  });
});

$(document).ready(function() {
  var orderItems = [];

  // Add Button Click Function
  $('#add').click(function() {

    //Check Validation Of OrderItems
    var isValidItem = true;
    if ($('#itemName').val().trim() == '') {
      $('#itemName').siblings('span.error').css('visibility', 'visible');
      isValidItem = false;
    } else {
      $('#itemName').siblings('span.error').css('visibility', 'hidden');
    }

    if (!($('#quantity').val().trim() != '' && !isNaN($('#quantity').val().trim()))) {
      $('#quantity').siblings('span.error').css('visibility', 'visible');
      isValidItem = false;
    } else {
      $('#quantity').siblings('span.error').css('visibility', 'hidden');
    }

    if (!($('#rate').val().trim() != '' && !isNaN($('#rate').val().trim()))) {
      $('#rate').siblings('span.error').css('visibility', 'visible');
      isValidItem = false;
    } else {
      $('#rate').siblings('span.error').css('visibility', 'hidden');
    }

    //add Item To List If Valid
    if (isValidItem) {
      var itemName = $('#itemName').val().trim();
      var quantity = parseInt($('#quantity').val());
      var rate = parseInt($('#rate').val());
      var total = parseFloat(quantity * rate).toFixed(2);

      orderItems.push({
        ItemName: itemName,
        Quantity: quantity,
        Rate: rate,
        Total: total
      });

      $('#itemName').val('').focus();
      $('#quantity').val('');
      $('#rate').val('');
    }
    GenratedItemTable();
  });

  // Save Button Click Function 
  $('#submit').click(function() {
    //Validation of  Order 

    var IsAllValid = true;
    if (OrderItems.length == 0) {
      $('#orderItems').html('<span type="color:red;"> please add order items </span>');
      isAllVaild = false;
    }

    if ($('#orderNo').val().trim() == '') {
      $('#orderNo').siblings('span.error').css('Visibility', 'visible');
      isAllVaild = false;
    } else {
      $('#orderDate').siblings('span.error').css('Visibility', 'hidden');
    }

    if ($('#orderDate').val().trim() == '') {
      $('#orderDate').siblings('span.error').css('Visibility', 'visible');
      isAllVaild = false;
    } else {
      $('#orderDate').siblings('span.error').css('Visibility', 'hidden');
    }

    // Save If Valid

    if (isAllVaild) {
      var data = {
        OrderNo: $('#orderNo').val().trim(),
        OrderDate: $('#orderDate').val().trim(),
        Description: $('#description').val().trim(),
        OrderItems: orderItems
      }
    }

    $(this).val('Please Wait....');
    $.ajax({
      url: ' /Home/SaveOrder/',
      type: "POST",
      data: JSON.stringify(data),
      datatype: "JSON",
      ContentType: "application/json",
      success: function(d) {
        //check is successfully save to database 
        if (d.status == true) {
          alert('SuccessFully Done');
          // Clear Form
          orderItems = [];
          $('# orderNo').val('');
          $('# orderDate').val('');
          $('# orderItems').empty();

        } else {
          alert('Failed to Save Data');
        }
      },
      error: function() {
        alert('Error. Please Try Again');
      }
    });
  });

  // Function For Show Added Items in Table
  function GenratedItemTable() {
    if (orderItems.length > 0) {
      var $table = $('<table/>');
      $table.append('<thead><tr><th>Item</th><th>Quantity</th><th>Rate</th><th>Total</th></tr></thead>');
      var $tbody = $('<tbody/>');
      $.each(orderItems, function(i, val) {
        var $row = $('<tr/>');
        $row.append($('<td/>').html(val.ItemName));
        $row.append($('<td/>').html(val.Quantity));
        $row.append($('<td/>').html(val.Rate));
        $row.append($('<td/>').html(val.Total));
        $tbody.append($row);
      });
      $table.append($tbody);
      $('#OrderItems').html($table);
    }
  }
});

/* Adding some Css For good Looks*/

span.error {
  display: block;
  visibility: hidden;
  color: red;
  font-size: 90%;
}
/* Css For Table*/

.container td {
  vertical-align: top;
}
.tablecontainer table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid red;
  border-right: 1px solid red;
}
.tablecontainer th {
  border-bottom: 2px solid red ! important;
}
.tablecontainer th,
.tablecontainer td {
  text-align: left;
  border-left: 1px solid red;
  padding: 5px;
  border-bottom: 1px solid red;
}
.ui.widget {
  font-size: 12px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/i18n/jquery-ui-i18n.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<h2>Master Details Entry</h2>
<div class="container" style="max-width: 600px">
  <div class="master">
    <h4>Order Details</h4>

  </div>
  <table>
    <tr>
      <td>Order No</td>
      <td>
        <input type="text" id="orderNo" />
        <span class="error">Order No Required</span>

      </td>
      <td>Order Date</td>
      <td>
        <input type="text" id="orderDate" />
        <span class="error">Order Valid OrderDate Required(Ex: MM-DD-YY)</span>

      </td>
    </tr>
    <tr>
      <td>Description</td>
      <td colspan="3">
        <textarea id="description" style="width: 100%"></textarea>
      </td>
    </tr>
  </table>
  <div class="Details">
    <h4>Order Items</h4>
    <table width="100%">
      <tr>
        <td>ItemName</td>
        <td>Quantity</td>
        <td>Rate</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>
          <input type="text" id="itemName" />
          <span class="error">ItemName Required</span>
        </td>
        <td>
          <input type="text" id="quantity" />
          <span class="error ">Valid quantity required</span>
        </td>
        <td>
          <input type="text" id="rate" />
          <span class="error">Valid Rate Required</span>
        </td>
        <td>
          <input type="button" id="add" value="add" />
        </td>
      </tr>
    </table>
    <div id="OrderItems" class="tablecontainer"></div>
    <div style="padding: 10px 0px; text-align: right">
      <input type="button" value="save" style="padding: 10px 20px" />
    </div>
  </div>
</div>

I did not replace your html, see page down i am seeing a save. I think this is your submit button. — Shohel, Nov 04 '15 at 06:35
if 'save' is the ajax submit button than your code is wrong because it will save only what is currently in the text inputs — madalinivascu, Nov 04 '15 at 06:40
i got out put, i need one more help, while i am clicking remove button row has to remove from Table , how to do that?? @Shohel — Felish Anand, Nov 04 '15 at 06:45

How to insert data into table while Clicking Add Button in MVC4 using JavaScript or jQuery?

2 Answers2