js-form-dialog/js/js-form-dialog.min.js

A simple vanilla js library to generate custom form on the go.

!function(window){var modal,options={};const _init=function(opts){return options=opts,opts&&opts.container?container=document.getElementById(opts.container):container=document.getElementsByTagName("body")[0],HTMLCollection.prototype.forEach=Array.prototype.forEach,this},_show=function(){var dialog=getDialog();container.appendChild(dialog),modal.style.display="block",options.backdrop&&"dismiss"==options.backdrop&&modal.addEventListener("click",function(e){e.currentTarget==e.target&&(JSDialog.hide(),options.closeCallback())},!0)},_hide=function(){modal.style.display="none",container.removeChild(modal)};getDialog=function(){return(modal=document.createElement("div")).setAttribute("id","jsModal"),modal.setAttribute("class","modal"),modalContent=document.createElement("div"),modalContent.setAttribute("class","modal-content"),modal.appendChild(modalContent),options.width&&(modalContent.style.width=options.width),addTitle(options.title),addCloseButton(options.showClose),modalBody=document.createElement("div"),modalBody.setAttribute("class","modal-body"),modalContent.appendChild(modalBody),modalBody.appendChild(generateForm()),addSubmitButton(),modal},addTitle=function(t){t&&(title=document.createElement("span"),title.setAttribute("class","title"),options.titleCenter&&title.setAttribute("class",title.className+" center"),title.innerHTML=t,modalContent.appendChild(title))},addCloseButton=function(showClose){showClose&&(close=document.createElement("span"),close.setAttribute("class","close"),close.innerHTML="×",modalContent.appendChild(close),close.onclick=function(){JSDialog.hide(),options.closeCallback()})},addSubmitButton=function(){submit=document.createElement("input"),submit.setAttribute("type","button"),submit.value="Submit",form.appendChild(submit),submit.onclick=function(){try{form.reportValidity()&&submitValidForm()}catch(e){legacyValidationCheck()}}},legacyValidationCheck=function(){if(form.checkValidity())submitValidForm();else{var tmpSubmit=document.createElement("button");form.appendChild(tmpSubmit),tmpSubmit.click(),form.removeChild(tmpSubmit)}},submitValidForm=function(){var inputs=modalContent.getElementsByTagName("input"),val={};inputs.forEach(function(item){"button"!=item.type&&(val[item.dataset.key]=item.value,item.checkValidity())}),options.submitCallback(val),JSDialog.hide(),options.closeCallback()},generateForm=function(){if(options.fields)for(field of(form=document.createElement("form"),form.setAttribute("id","form_body"),options.fields))form.appendChild(getField(field));return form},getField=function(field){var el;return(el=document.createElement("input")).setAttribute("type",field.type),el.setAttribute("placeholder",field.placeholder),el.style.width=field.expand,el.setAttribute("data-key",field.key),field.required&&el.setAttribute("required","required"),el},window.JSDialog={init:_init,show:_show,hide:_hide}}(window);