No Description Available
0
Add and remove input feilds dynamically using javascript.
This is a multiple-input fields generator that can generate or add or create multiple input fields dynamically at a time.
onex
Tesseract js demo scan text over the image by just doing small amounts of code.
Cropperjs is a feature-rich pure javascript library for cropping image. using this you can able to able to provide image cropping to the client-side.
Health calculator is a collection of BMR calculator,Body Shape Calculator,Body Fat percentage calculator and Ideal weight calculator.
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.
These kinds of input fields is mostly used in Creating and Removing Input field dynamically.
$(document).ready(() => { $(".addInput").click(function() { $("#addDietModal").modal("show"); }); }); let facts = []; let ref = Date.now(); function generateList(e = false) { if (e) { facts.push({ title: $("#dfTime").val(), diet: $("#dfDes").val() }); // populateFacts(facts); $("#addDietModal").modal("hide"); } $("#dfTime,#dfDes").val(""); let struct = ""; console.log(facts); if (facts.length == 0) { struct = '<div class="alert alert-danger">No Todos Present</div>'; } else { $.each(facts, (e, i) => { struct += `<tr><td><b>${e + 1}</b></td><td> ${i.title .replace(/_/g, " ") .capitalize()} </td><td>${ i.diet }</td><td><span class="float-right badge badge-danger removeFact" data-target="${e}">×</span></td></tr>`; }); } $(".showLists").html( '<table class="table table-hover mt-4"><thead><tr><th>S.I</th><th>Time</th><th>Diet</th><th>Action</th></tr></thead><tbody>' + struct + "</tbody></table>" ); $(".removeFact").click(function() { facts.splice($(this).attr("data-target"), 1); generateList(); }); } String.prototype.capitalize = function() { return this.charAt(0).toUpperCase() + this.slice(1); };
<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 showLists"> <p>List will shown there ....</p> </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> <div class="modal fade" id="addDietModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal body --> <div class="modal-body"> <div class="form-group"> <label>Time</label> <select id="dfTime" class="form-control"> <option value="early_morning">Early Morning</option> <option value="breakfast">Breakfast</option> <option value="mid_morning">Mid Morning</option> <option value="lunch">Lunch</option> <option value="evening_snack">Evening Snack</option> <option value="dinner">Dinner</option> </select> </div> <div class="form-group"> <label>Diet Details</label> <textarea id="dfDes" class="form-control"></textarea> </div> <div class="float-right"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> <button type="button" class="btn btn-success" onclick="generateList(true)">Submit</button> </div> </div> </div> </div> </div>