javascript - How to set the data from server into this dynamic form? -
i using this bootsnipp bootstrap.js create dynamic fields , capture data form.
after save, lets data json server key value pairs, how can construct dynamic form user can update again.
any sample snippet helpful.
all have write data propagating method, rather easy, here's quickie (data server stored in variable requestdata, removed unnecessary code):
var requestdata = [{"name":"phone0", "value":"890890809"},{"name":"fax1", "value":"1111"},{"name":"skype2", "value":"anonononono"},{"name":"email3", "value":"huhuhuhu@huhuhu.pl"}]; function capitalize(string) { return string.charat(0).touppercase() + string.slice(1); } (function ($) { $(function () { var addformgroup = function (event) { [...] }; var removeformgroup = function (event) { [...] }; var selectformgroup = function (event) { [...] } var countformgroup = function ($form) { [...] }; var collectdata = function(ele) { [...] } var propagatedata = function(data){ var $formgroup = $('body').find('.form-group'); $.each(data, function(k,v){ var $formgroupclone = $formgroup.clone(); $formgroupclone.find('.btn-add').toggleclass('btn-success btn-add btn-danger btn-remove').html('–'); $formgroupclone.find('input').val(v.value); $formgroupclone.find('.concept').text(capitalize(v.name.replace(/[0-9]/g, ''))); $formgroupclone.find('.input-group-select-val').val(v.name.replace(/[0-9]/g, '')); $formgroupclone.insertbefore($formgroup); }); } $(document).on('click', '.btn-add', addformgroup); $(document).on('click', '.btn-remove', removeformgroup); $(document).on('click', '.dropdown-menu a', selectformgroup); propagatedata(requestdata); $('#data').click(function(e){ collectdata('.cache'); e.preventdefault(); }); }); })(jquery); edit
well, code reset form hidden inside propagate data, have reverse it, in html should add <a href="#" class="btn btn-warning form-reset" style="margin: 10px;">reset</a> , complete js here:
var requestdata = [{"name":"phone0", "value":"890890809"},{"name":"fax1", "value":"1111"},{"name":"skype2", "value":"anonononono"},{"name":"email3", "value":"huhuhuhu@huhuhu.pl"}]; function capitalize(string) { return string.charat(0).touppercase() + string.slice(1); } (function ($) { $(function () { var addformgroup = function (event) { event.preventdefault(); var $formgroup = $(this).closest('.form-group'); var $multipleformgroup = $formgroup.closest('.multiple-form-group'); var $formgroupclone = $formgroup.clone(); $(this) .toggleclass('btn-success btn-add btn-danger btn-remove') .html('–'); $formgroupclone.find('input').val(''); $formgroupclone.find('.concept').text('phone'); $formgroupclone.insertafter($formgroup); var $lastformgrouplast = $multipleformgroup.find('.form-group:last'); if ($multipleformgroup.data('max') <= countformgroup($multipleformgroup)) { $lastformgrouplast.find('.btn-add').attr('disabled', true); } }; var removeformgroup = function (event) { event.preventdefault(); var $formgroup = $(this).closest('.form-group'); var $multipleformgroup = $formgroup.closest('.multiple-form-group'); var $lastformgrouplast = $multipleformgroup.find('.form-group:last'); if ($multipleformgroup.data('max') >= countformgroup($multipleformgroup)) { $lastformgrouplast.find('.btn-add').attr('disabled', false); } $formgroup.remove(); }; var selectformgroup = function (event) { event.preventdefault(); var $selectgroup = $(this).closest('.input-group-select'); var param = $(this).attr("href").replace("#",""); var concept = $(this).text(); $selectgroup.find('.concept').text(concept); $selectgroup.find('.input-group-select-val').val(param); } var countformgroup = function ($form) { return $form.find('.form-group').length; }; /* collectdata function~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~/ function given group of elements (in classic selector format) assign each element values of closest fields unique name , user entered value (if any.) use console see gather data. */ var collectdata = function(ele) { var $tgt = $(ele); $tgt.each(function(index) { // $tgt == $(this) var $fieldnames = $(this).next('.input-group-select-val').val(); var $fieldvalues = $(this).closest('.form-group').find('.form-control').val(); // including index each $fieldname in order make each key/value pair unique. $(this).attr('name', $fieldnames+index); console.log('name: '+$(this).attr('name')); $(this).val($fieldvalues); console.log('value: '+$(this).val()); }); } var propagatedata = function(data){ var $formgroup = $('body').find('.form-group'); $.each(data, function(k,v){ var $formgroupclone = $formgroup.clone(); $formgroupclone.find('.btn-add').toggleclass('btn-success btn-add btn-danger btn-remove').html('–'); $formgroupclone.find('input').val(v.value); $formgroupclone.find('.concept').text(capitalize(v.name.replace(/[0-9]/g, ''))); $formgroupclone.find('.input-group-select-val').val(v.name.replace(/[0-9]/g, '')); $formgroupclone.insertbefore($formgroup); }); } var cleardata = function(elms){ $(elms).not(':last').remove(); var $el = $(elms); $el.find('input').val(''); $el.find('.concept').text('phone'); $el.find('.input-group-select-val').val('phone'); } $(document).on('click', '.btn-add', addformgroup); $(document).on('click', '.btn-remove', removeformgroup); $(document).on('click', '.dropdown-menu a', selectformgroup); propagatedata(requestdata); // clicking #data button call collectdata('.cache') function. $('#data').click(function(e){ collectdata('.cache'); e.preventdefault(); }); $('.form-reset').click(function(e){ cleardata('.multiple-form-group'); e.preventdefault(); }); }); })(jquery); 
Comments
Post a Comment