Save values of dynamic generated HTML using javascript

Question

I m generating dynamic html with its id. You can see the below link for the dynamic generated HTML.

Dymanic Generated HTML

So for saving this, I need some suggestion on how to save it in javascript. I tried the other fields of the HTML..

 function SaveNPEDetails() { var DashboardFields = {}; if ($('#ddlFiberised').val() == '--Select--' || $('#ddlFiberised').val() == null) { alert('Please select FIBERISED'); return false; } else { DashboardFields.NPEFiberised = $('#ddlFiberised').val(); } if ($('#txtNoFDPSite').val() == '' || $('#txtNoFDPSite').val() == null) { alert('Please add NO. OF FDP AT SITE'); return false; } else { DashboardFields.NoOfFDPatSite = $('#txtNoFDPSite').val(); } if ($('#txtNoOfRoutesTerAtFDP').val() == '' || $('#txtNoOfRoutesTerAtFDP').val() == null) { alert('Please add NO. OF ROUTES TERMINATED AT FDP'); return false; } else { DashboardFields.NoOfRoutesTermAtFDP = $('#txtNoOfRoutesTerAtFDP').val(); } // Need to write saving logic for dynamic generated html here. $.ajax({ type: "POST", url: "DashboardData.aspx/UpdateNPEData", data: JSON.stringify({ DashboardFields: DashboardFields }), contentType: "application/json; charset=utf-8", dataType: "json", success: function (response) { alert(response.d); }, error: function (response) { alert('Something went wrong..!!'); } }); } 

Answer 1

As per our discussion you can try something like

function SaveNPEDetails() { 
        var data = []; 
        var DashboardFields = {}; 

        if ($('#ddlFiberised').val() == '--Select--' || $('#ddlFiberised').val() == null) { 
        alert('Please select FIBERISED'); 
        return false; 
        } 
        else { 
        DashboardFields.NPEFiberised = $('#ddlFiberised').val(); 
        } 

        if ($('#txtNoFDPSite').val() == '' || $('#txtNoFDPSite').val() == null) { 
        alert('Please add NO. OF FDP AT SITE'); 
        return false; 
        } 
        else { 
        DashboardFields.NoOfFDPatSite = $('#txtNoFDPSite').val(); 
        } 

        if ($('#txtNoOfRoutesTerAtFDP').val() == '' || $('#txtNoOfRoutesTerAtFDP').val() == null) { 
        alert('Please add NO. OF ROUTES TERMINATED AT FDP'); 
        return false; 
        } 
        else { 
        DashboardFields.NoOfRoutesTermAtFDP = $('#txtNoOfRoutesTerAtFDP').val(); 
        } 



        var chs = $("#dvNPEAddData").children(".addNPEData") 

        for (var i = 0; i < chs.length; i++) { 
            var d = {}; 
            var ch = chs[i]; 
            var val = $(ch).find("input[name='TerRouteName']").val(); 
            d[$(ch).find("input[name='TerRouteName']").attr("name")] = val; 

            val = $(ch).find("select[name='CableType']").val(); 
            d[$(ch).find("select[name='CableType']").attr("name")] = val; 

            val = $(ch).find("select[name='CableSize']").val(); 
            d[$(ch).find("select[name='CableSize']").attr("name")] = val; 


            val = $(ch).find("input[name='NoLiveFibre']").val(); 
            d[$(ch).find("input[name='NoLiveFibre']").attr("name")] = val; 

            data.push(d); 
        } 

        var d = JSON.stringify(data);

        $.ajax({ 

             type: "POST", 
            url: "DashboardData.aspx/UpdateNPEData", 
            data: JSON.stringify({ DashboardFields: DashboardFields , myJsonXML : d}), 
            contentType: "application/json; charset=utf-8", 
            dataType: "json", 
            success: function (response) { 
            alert(response.d); 
            }, 
            error: function (response) { 
            alert('Something went wrong..!!'); 
            } 
        }); 

}

Answer 2

Using your example in the fiddle I've done the following

$('#submit').click(function() {
   var DashboardFields = {},
   status = true;

   $.each($('input[type="text"]'), function(i, v) {
       var id = $(v).attr('id');
       if ($(v).val() == '') {
          alert(id + ' field is empty');
          status = false;
       } else {
          DashboardFields[id] = $(v).val();
       }
   });

   $.each($('select'), function(i, v) {
       var id = $(v).attr('id');
       if ($(v).val() == '--Select--' || $(v).val() == null) {
            alert(id + ' select is empty');
            status = false;
       } else {
            DashboardFields[id] = $(v).val();
       }
   });
   if(!status){
      alert('you have empty fields');
   } else {
      console.log(DashboardFields); //Here should be your Ajax Call
   }  
});

JsFiddle

I've used your example with ID's and created a filter in order to take dynamically the fields not by ID's, I used the ID's to map the DashboardFields object but I strongly encourage to use name or other data- param and change the jQuery code after (the line with var id=$(v).attr('id') )

Hope this helps you