No Description Available
1
This is a multiple-input fields generator that can generate or add or create multiple input fields dynamically at a time.
These kinds of input fields is mostly used in Creating and Removing Input field dynamically.
onex
Tesseract js demo scan text over the image by just doing small amounts of code.
Calculate your Basal Metabolic Rate (BMR) with this calculator tool. Your BMR is the amount of energy you expend each day when at rest. This calculator also works out your daily calorie requirements.
This is simple javascript Todos App made for fun and beginner of javascript.
Health calculator is a collection of BMR calculator,Body Shape Calculator,Body Fat percentage calculator and Ideal weight calculator.
Add and remove input feilds dynamically using javascript.
let input_str = { title: "Slides", forms: [ { type: "text", name: "name", class: "form-control mb-2", placeholder: "Enter Data..." }, { type: "file", name: "image", class: "btn btn-light btn-sm mb-2 btn-block" }, { type: "number", name: "mobile", class: "form-control mb-2", placeholder: "Enter Data..." } ], exportTo:$('#getData') }; $(document).ready(() => { $(".addInput").click(function() { build_inputs($(this), input_str); }); }); let randId = 1; function build_inputs(e, configs=false) { if(!configs){ configs = {title:"Slides",forms:[{type:"text",name:"name",class:"form-control mb-2",placeholder:"Enter Data..."}],exportTo:false}; } let ind = $(".adp-slides").length > 0 ? $(".adp-slides").length + 1 : 1; let str = `<div id="${configs.title + "-" + ind}" class="row adp-slides"><div class="col-md-10"><div class="form-group"><label><b>${ configs.title } ${ind}</b></label>`; configs.forms.forEach(config => { str += `<input type="${config.type}" name="${config.name}" id="adpElem${randId}" class="adpInputs ${config.class}" data-rel="${configs.title+"-"+ind}" placeholder="${config.placeholder}">`; let currentVal = e .parent() .siblings() .val(); $("#adpElem" + randId) .val(currentVal) .focus(); e.parent() .siblings() .val(""); randId++; }); str += `</div></div><div class="col-md-2"><span class="badge badge-danger removeSlide" data-target="${configs.title + "-" + ind}"><i class="fas fa-trash-alt"></i></span></div></div>`; $(".inputWrapper").append(str); $(".removeSlide").click(function() { $("#" + $(this).attr("data-target")).remove(); }); if(configs.exportTo){ $('.adpInputs').blur(()=>{ let data = [] $.each($('.adp-slides'),(i,e)=>{ let obj = {},parentObj={}; $.each($(e).children().find('input'),(i,e)=>{ obj[$(e).attr('name')] = $(e).val(); }); parentObj[$(e).attr('id')]=obj; data.push(parentObj) }) $(configs.exportTo).val(JSON.stringify(data,null,2)) }) } }
<h1 class="heading mt-4"> Add and Remove Input fields dynamically </h1> <div class="adp-box"> <div class="inputWrapper"> </div> <button class="btn btn-success addInput"><i class="fa fa-plus"></i> Create New Feilds</button> </div> <div class="adp-box"> <h4>Export to JSON</h4> <div class="form-group"> <textarea class="form-control" rows="10" id="getData"></textarea> </div> </div>