How to add my textbox item in the table? in master detail form - model-view-controller

Question

I am using MVC to create my Master Detail form, i have tried this to add my detail record in the to show my detail record in the form so that when user click Add button detail data itself shows in a table.
JQUERY is not working
This is my View:
#section script{
//date picker
$(function () {
$('#orderDate').datepicker({
datepicker: 'mm-dd-yy'
});
});
$(document).ready(function()
{
var orderItems = [];
//Add Button click function
$('#add').click(function () {
//Chk Validation
var isValidItem = true;
if ($('#itemName').val().trim() == '') {
isValidItem = false;
$('#itemName').siblings('span.error').css('visibility', 'vissible')
}
else {
$('#itemName').siblings('span.error').css('visibility', 'hidden')
}
if (!($('#quantity').val().trim() !== '' && !isNaN($('#dvch_nar').val().trim()))) {
isValidItem = false;
$('#quantity').siblings('span.error').css('visibility', 'vissible')
}
else {
$('#quantity').siblings('span.error').css('visibility', 'hidden')
}
if (!($('#itemName').val().trim() !== '' && !isNaN($('#dvch_cr_amt').val().trim()))) {
isValidItem = false;
$('#itemName').siblings('span.error').css('visibility', 'vissible')
}
else {
$('#itemName').siblings('span.error').css('visibility', 'hidden')
}
if (!($('#rate').val().trim() !== '' && !isNaN($('#dvch_cr_amt').val().trim()))) {
isValidItem = false;
$('#rate').siblings('span.error').css('visibility', 'vissible')
}
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: parseInt$('#rate').val().trim(),
Total: parseInt($('#quantity').val().trim())* parseFloat($('#rate').val().trim())
});
//clear fields
$('#itemName').val('').focus();
$('#quantity').val('');
$('#rate').val('');
}
//populate order item
GeneratedItemsTable();
}
);
//save button click function
$('#submit').click(function () {
//validation order
var isAllValid = true;
if(orderItems.length=0)
{
$('#orderItems').html('<span style="color:red;">Please add another item</span>')
isAllValid = false;
}
if ($('#orderNo').val().trim() == '')
{
$('#orderNo').siblings('span.error').css('visibility', 'visible')
isAllValid = false;
}
else {
$('#orderNo').siblings('span.error').css('visibility', 'hidden')
}
if ($('#orderDate').val().trim() == '') {
$('#orderDate').siblings('span.error').css('visibility', 'visible')
isAllValid = false;
}
else {
$('#orderDate').siblings('span.error').css('visibility', 'hidden')
}
//if ($('')
//save if valid
if (isAllValid){
var data={
Date: $('#orderNo').val().trim(),
Remarks: ('#orderDate').val().trim(),
Description:$('description').val().trim(),
orderDetails:orderItems
}
}
$(this).val("Please Wait...");
$.ajax(
{
url: "/Home/SaveOrder",
type:"post",
data:JSON.stringify(data),
dataType:"application/json",
success:function(d){
//check is successfully save to database
if(d.status==true)
{
//will send status from server side
alert('successfully done.');
//clear form
orderItems=[];
$('#orderNo').val('');
$('#orderDate').val('');
$('#orderItems').empty();
}
else{
alert('Failed');
}
},
error :function(){
alert('Error:Please Try again.');
}
}
);
});
//function for show added item
function GeneratedItemsTable()
{
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 $tboday = $('<tbody/>');
$.each(orderItems,function(i,val)
{
var $row=$('<tr/>');
$row.append($('<tr/>').html(val.ItemName))
$row.append($('<tr/>').html(val.Quantity))
$row.append($('<tr/>').html(val.Rate))
$row.append($('<tr/>').html(val.Total))
$tboday.append($row);
});
$table.append($tboday);
$('#orderItems').html($table);
}
}
}
);
</script>
}
thanks for quick response

Answer 1

Try this
<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 order item
var isValidItem = true;
if ($('#itemName').val().trim() == '') {
isValidItem = false;
$('#itemName').siblings('span.error').css('visibility', 'visible');
}
else {
$('#itemName').siblings('span.error').css('visibility', 'hidden');
}
if (!($('#quantity').val().trim() != '' && !isNaN($('#quantity').val().trim()))) {
isValidItem = false;
$('#quantity').siblings('span.error').css('visibility', 'visible');
}
else {
$('#quantity').siblings('span.error').css('visibility', 'hidden');
}
if (!($('#rate').val().trim() != '' && !isNaN($('#rate').val().trim()))) {
isValidItem = false;
$('#rate').siblings('span.error').css('visibility', 'visible');
}
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()),
TotalAmount: parseInt($('#quantity').val().trim()) * parseFloat($('#rate').val().trim())
});
//Clear fields
$('#itemName').val('').focus();
$('#quantity,#rate').val('');
}
//populate order items
GeneratedItemsTable();
});
//Save button click function
$('#submit').click(function () {
//validation of order
var isAllValid = true;
if (orderItems.length == 0) {
$('#orderItems').html('<span style="color:red;">Please add order items</span>');
isAllValid = false;
}
if ($('#orderNo').val().trim() == '') {
$('#orderNo').siblings('span.error').css('visibility', 'visible');
isAllValid = false;
}
else {
$('#orderNo').siblings('span.error').css('visibility', 'hidden');
}
if ($('#orderDate').val().trim() == '') {
$('#orderDate').siblings('span.error').css('visibility', 'visible');
isAllValid = false;
}
else {
$('#orderDate').siblings('span.error').css('visibility', 'hidden');
}
//Save if valid
if (isAllValid) {
var data = {
OrderNo: $('#orderNo').val().trim(),
OrderDate: $('#orderDate').val().trim(),
//Sorry forgot to add Description Field
Description : $('#description').val().trim(),
OrderDetails : 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) {
//will send status from server side
alert('Successfully done.');
//clear form
orderItems = [];
$('#orderNo').val('');
$('#orderDate').val('');
$('#orderItems').empty();
}
else {
alert('Failed');
}
$('#submit').val('Save');
},
error: function () {
alert('Error. Please try again.');
$('#submit').val('Save');
}
});
}
});
//function for show added items in table
function GeneratedItemsTable() {
if (orderItems.length > 0)
{
var $table = $('<table/>');
$table.append('<thead><tr><th>Item</th><th>Quantity</th><th>Rate</th><th>Total</th><th></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.TotalAmount));
var $remove = $('Remove');
$remove.click(function (e) {
e.preventDefault();
orderItems.splice(i, 1);
GeneratedItemsTable();
});
$row.append($('<td/>').html($remove));
$tbody.append($row);
});
console.log("current", orderItems);
$table.append($tbody);
$('#orderItems').html($table);
}
else {
$('#orderItems').html('');
}
}
});
</script>