On form submit add form values to table

Question

I have the following form in my view:

    @using(Ajax.BeginForm("AddAttendeeInternalAddressBook", "Attendee", new AjaxOptions { HttpMethod = "POST", OnSuccess = "doneInternalAddressBook" }))
    {
         @Html.HiddenFor(m=>m.SelectedAddressBookPerson.FirstName)
         @Html.HiddenFor(m=>m.SelectedAddressBookPerson.LastName)
         @Html.HiddenFor(m=>m.SelectedAddressBookPerson.AppointmentId)
         <div class="form-group">
              @Html.LabelFor(m => m.SelectedAddressBookPerson.Email, new { @class = "col-md-2 control-label" })
              <div class="col-md-8 input-group">
                   @Html.TextBoxFor(m => m.SelectedAddressBookPerson.Email, new { id = "SelectedAddressBookPerson", @class = "form-control", PlaceHolder = "Search in AddressBook..." }) 

                   <input type='submit' id="btnAddressBook" class="btn btn-default" value="Add>>">
              </div>
          </div>               
    }

And this table:

<table class="table table-striped table-hover" id="tableAttendees">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tr>

    </tr>
</table>

Whenever the form is submitted, I want to add the values from the form (first name, last name, email, etc) to the table. What should I do to able to do that?

Controller method

   [HttpPost]
    public void AddAttendeeInternalAddressBook(CreateAppointmentSelectPersons internalAddressbookPerson)
    {
        _attendeeRepository.AddInternalAddressBookAttendee(
            internalAddressbookPerson.SelectedAddressBookPerson.AppointmentId,
            internalAddressbookPerson.SelectedAddressBookPerson.FirstName,
            internalAddressbookPerson.SelectedAddressBookPerson.LastName,
            internalAddressbookPerson.SelectedAddressBookPerson.Email);

    }

I could also add a function that returns form value as json data for the table but that would mean going back to database and loading the data, also the table should be updated each time a user submits a form or some values are added to database could be a performance problem? I think having jquery function to push form values to table would be better idea, but then I don't have much knowledge about jquery(just a beginner)

public ActionResult AttendeeTableData(Guid appointmentId)
{
    var attendees = _attendeeRepository.GetAttendees(appointmentId);
    return Json(attendees);
}

Edit1: this is what i tried to do

<script type="text/javascript">    
    $(function () {

        $("#SelectedAddressBookPerson").autocomplete({
            source: '/Appointment/AddressBookPerson',
            minLength: 1,
            select: function(event,ui) {
                $(@Html.IdFor((m=>m.SelectedAddressBookPerson.FirstName))).val(ui.item.FirstName);
                $(@Html.IdFor(m=>m.SelectedAddressBookPerson.LastName)).val(ui.item.LastName);
            },
        });

    });
    $(function () {
        $("#btnAddressBook").on('click', function () {
            $("#form2").submit(function () {
                var fields = $(":input");
                jquery.each(fields, function (i, field) {
                    $("#tableAttendees").find('tbody tr:last').append("<td>" + field.value + "</td>")
                });
            })
        })
    });

</script>

but this doesn't work

Edit 2:

@using(Ajax.BeginForm("AddAttendeeInternalAddressBook", "Attendee", new AjaxOptions { HttpMethod = "POST", OnSuccess = "doneInternalAddressBook" }))
{
     @Html.HiddenFor(m=>m.SelectedAddressBookPerson.FirstName)
     @Html.HiddenFor(m=>m.SelectedAddressBookPerson.LastName)
     @Html.HiddenFor(m=>m.SelectedAddressBookPerson.AppointmentId)
     <div class="form-group">
          @Html.LabelFor(m => m.SelectedAddressBookPerson.Email, new { @class = "col-md-2 control-label" })
          <div class="col-md-8 input-group">
               @Html.TextBoxFor(m => m.SelectedAddressBookPerson.Email, new { id = "SelectedAddressBookPerson", @class = "form-control", PlaceHolder = "Search in AddressBook..." })                         
               <input type='submit' id="btnAddressBook" class="btn btn-default" value="Add>>">
          </div>
      </div>               
} 

<table class="table table-striped table-hover table-bordered" id="tableAttendees">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>       
@section Scripts{
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/Scripts/jquery-ui-1.10.4.min.js")
    @Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")
    @Scripts.Render("~/bundles/Kendo")
    @Scripts.Render("http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js")

    <script id ="personTmpl" type="text/x-jquery-tmpl">
        <tr>
            <th>${FirstName}</th>
            <th>${LastName}</th>
            <th>${Email}</th>
        </tr>
    </script>

    <script>
        $(function () {
            $("#btnAddressBook").click(function (e) {
                var model = new Object();

                model.FirstName = $(@Html.IdFor(m=>m.SelectedAddressBookPerson.FirstName)).val();
                model.LastName = $(@Html.IdFor(m=>m.SelectedAddressBookPerson.LastName)).val();
                model.Email = $(@Html.IdFor(m=>m.SelectedAddressBookPerson.Email)).val();

                $("#personTmpl").tmpl(model).appendTo("#tableAttendees");
            })
        })
    </script>
    <script type="text/javascript">    
        $(function () {

            $("#SelectedAddressBookPerson").autocomplete({
                source: '/Appointment/AddressBookPerson',
                minLength: 1,
                select: function(event,ui) {
                    $(@Html.IdFor((m=>m.SelectedAddressBookPerson.FirstName))).val(ui.item.FirstName);
                    $(@Html.IdFor(m=>m.SelectedAddressBookPerson.LastName)).val(ui.item.LastName);
                },
            });

        });   
    </script>
}

Answer 1

Ok updating my answer now that I better understood your question :)

First we take the inputs:

var fields = $( ":input" );

Then we iterate over them and add to table.

jQuery.each( fields, function( i, field ) {     

    $("#tableAttendees").find('tbody tr:last') //this appends the data you want to the table
       .append("<td>" + field.value + "</td>");
});

And overall you get:

$("#form2").submit(function() {
     var fields = $( ":input" );
     jQuery.each( fields, function( i, field ) {             
            $("#tableAttendees")
             .find('tbody tr:last') //this appends the data you want   to the table
             .append("<td>" + field.value + "</td>");
     });
});

Here's a link to JS Fiddle:

Answer 2

Here goes one more answer by using JQuery Templates -

First reference following JQuery libraries -

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js" type="text/javascript"></script>

Then create the template which you want to fill up with details -

<script id="personsTmpl" type="text/x-jquery-tmpl">
    <tr>
        <th>${FirstName}</th>
        <th>${LastName}</th>
        <th>${Email}</th>
    </tr>
</script>

As a next step define the Table in html -

<table class="table table-striped table-hover" id="tableAttendees">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tr></tr>
</table>

Have a submit button on the page -

<input type="submit" value="click" id="click" />

Finally handle the JQuery Click event of the Submit button -

<script>
    $(function () {
        $('#click').click(function (e) {
            var model = new Object();

            // Here you need to get the values using $('#id').val() and fill the model
            model.FirstName = "Rami";
            model.LastName = "Vemula";
            model.Email = "Email@E.com";

            $("#personsTmpl").tmpl(model).appendTo("#tableAttendees");
        });
    });
</script>

Now when you run the application, and click on the submit button, you will see the values getting appending to the table as below -