jquery - On form submit add form values to table -
i have following form in 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 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 form submitted, want add values form (first name, last name, email, etc) table. should able that?
controller method
[httppost] public void addattendeeinternaladdressbook(createappointmentselectpersons internaladdressbookperson) { _attendeerepository.addinternaladdressbookattendee( internaladdressbookperson.selectedaddressbookperson.appointmentid, internaladdressbookperson.selectedaddressbookperson.firstname, internaladdressbookperson.selectedaddressbookperson.lastname, internaladdressbookperson.selectedaddressbookperson.email); } i add function returns form value json data table mean going database , loading data, table should updated each time user submits form or values added database performance problem? think having jquery function push form values table better idea, don't have knowledge jquery(just beginner)
public actionresult attendeetabledata(guid appointmentid) { var attendees = _attendeerepository.getattendees(appointmentid); return json(attendees); } edit1: tried
<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 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> }
here goes 1 more answer 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 template want fill details -
<script id="personstmpl" type="text/x-jquery-tmpl"> <tr> <th>${firstname}</th> <th>${lastname}</th> <th>${email}</th> </tr> </script> as next step define 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 submit button on page -
<input type="submit" value="click" id="click" /> finally handle jquery click event of submit button -
<script> $(function () { $('#click').click(function (e) { var model = new object(); // here need values using $('#id').val() , fill model model.firstname = "rami"; model.lastname = "vemula"; model.email = "email@e.com"; $("#personstmpl").tmpl(model).appendto("#tableattendees"); }); }); </script> now when run application, , click on submit button, see values getting appending table below -
Comments
Post a Comment