Skip to content

Instantly share code, notes, and snippets.

@mrsnax

mrsnax/test.html

Created October 1, 2022 18:39
Show Gist options
  • Save mrsnax/de235e311a565bf82dfc72f28f7f6a65 to your computer and use it in GitHub Desktop.
Save mrsnax/de235e311a565bf82dfc72f28f7f6a65 to your computer and use it in GitHub Desktop.
Download ZIP
JQuery Form Repeater with FormValidation.io
Raw
test.html
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
// jquery.repeater version 1.2.2
// https://github.com/DubFriend/jquery.repeater
// (MIT) 15-04-2022
// Brian Detering <BDeterin@gmail.com> (http://www.briandetering.net/)
!function(a){"use strict";var b=function(a){return a},c=function(b){return a.isArray(b)},d=function(a){return!c(a)&&a instanceof Object},e=function(b,c){return a.inArray(c,b)},f=function(a,b){return-1!==e(a,b)},g=function(a,b){for(var c in a)a.hasOwnProperty(c)&&b(a[c],c,a)},h=function(a){return a[a.length-1]},i=function(a){return Array.prototype.slice.call(a)},j=function(){var a={};return g(i(arguments),function(b){g(b,function(b,c){a[c]=b})}),a},k=function(a,b){var c=[];return g(a,function(a,d,e){c.push(b(a,d,e))}),c},l=function(a,b,c){var d={};return g(a,function(a,e,f){e=c?c(e,a):e,d[e]=b(a,e,f)}),d},m=function(a,b,d){return c(a)?k(a,b):l(a,b,d)},n=function(a,b){return m(a,function(a){return a[b]})},o=function(a,b){var d;return c(a)?(d=[],g(a,function(a,c,e){b(a,c,e)&&d.push(a)})):(d={},g(a,function(a,c,e){b(a,c,e)&&(d[c]=a)})),d},p=function(a,b,c){return m(a,function(a,d){return a[b].apply(a,c||[])})},q=function(a){a=a||{};var b={};return a.publish=function(a,c){g(b[a],function(a){a(c)})},a.subscribe=function(a,c){b[a]=b[a]||[],b[a].push(c)},a.unsubscribe=function(a){g(b,function(b){var c=e(b,a);-1!==c&&b.splice(c,1)})},a};!function(a){var b=function(a,b){var c=q(),d=a.$;return c.getType=function(){throw'implement me (return type. "text", "radio", etc.)'},c.$=function(a){return a?d.find(a):d},c.disable=function(){c.$().prop("disabled",!0),c.publish("isEnabled",!1)},c.enable=function(){c.$().prop("disabled",!1),c.publish("isEnabled",!0)},b.equalTo=function(a,b){return a===b},b.publishChange=function(){var a;return function(d,e){var f=c.get();b.equalTo(f,a)||c.publish("change",{e:d,domElement:e}),a=f}}(),c},i=function(a,c){var d=b(a,c);return d.get=function(){return d.$().val()},d.set=function(a){d.$().val(a)},d.clear=function(){d.set("")},c.buildSetter=function(a){return function(b){a.call(d,b)}},d},j=function(a){var b={},c=i(a,b);return c.getType=function(){return"text"},c.$().on("change keyup keydown",function(a){b.publishChange(a,this)}),c},k=function(a,b){a=c(a)?a:[a],b=c(b)?b:[b];var d=!0;return a.length!==b.length?d=!1:g(a,function(a){f(b,a)||(d=!1)}),d},l=function(a){var b={},c=i(a,b);return c.getType=function(){return"button"},c.$().on("change",function(a){b.publishChange(a,this)}),c},m=function(b){var d={},e=i(b,d);return e.getType=function(){return"checkbox"},e.get=function(){var b=[];return e.$().filter(":checked").each(function(){b.push(a(this).val())}),b},e.set=function(b){b=c(b)?b:[b],e.$().each(function(){a(this).prop("checked",!1)}),g(b,function(a){e.$().filter('[value="'+a+'"]').prop("checked",!0)})},d.equalTo=k,e.$().change(function(a){d.publishChange(a,this)}),e},n=function(a){var b=j(a);return b.getType=function(){return"email"},b},o=function(c){var d={},e=b(c,d);return e.getType=function(){return"file"},e.get=function(){return h(e.$().val().split("\\"))},e.clear=function(){this.$().each(function(){a(this).wrap("<form>").closest("form").get(0).reset(),a(this).unwrap()})},e.$().change(function(a){d.publishChange(a,this)}),e},r=function(a){var b={},c=i(a,b);return c.getType=function(){return"hidden"},c.$().change(function(a){b.publishChange(a,this)}),c},s=function(c){var d={},e=b(c,d);return e.getType=function(){return"file[multiple]"},e.get=function(){var a,b=e.$().get(0).files||[],c=[];for(a=0;a<(b.length||0);a+=1)c.push(b[a].name);return c},e.clear=function(){this.$().each(function(){a(this).wrap("<form>").closest("form").get(0).reset(),a(this).unwrap()})},e.$().change(function(a){d.publishChange(a,this)}),e},t=function(a){var b={},d=i(a,b);return d.getType=function(){return"select[multiple]"},d.get=function(){return d.$().val()||[]},d.set=function(a){d.$().val(""===a?[]:c(a)?a:[a])},b.equalTo=k,d.$().change(function(a){b.publishChange(a,this)}),d},u=function(a){var b=j(a);return b.getType=function(){return"password"},b},v=function(b){var c={},d=i(b,c);return d.getType=function(){return"radio"},d.get=function(){return d.$().filter(":checked").val()||null},d.set=function(b){b?d.$().filter('[value="'+b+'"]').prop("checked",!0):d.$().each(function(){a(this).prop("checked",!1)})},d.$().change(function(a){c.publishChange(a,this)}),d},w=function(a){var b={},c=i(a,b);return c.getType=function(){return"range"},c.$().change(function(a){b.publishChange(a,this)}),c},x=function(a){var b={},c=i(a,b);return c.getType=function(){return"select"},c.$().change(function(a){b.publishChange(a,this)}),c},y=function(a){var b={},c=i(a,b);return c.getType=function(){return"textarea"},c.$().on("change keyup keydown",function(a){b.publishChange(a,this)}),c},z=function(a){var b=j(a);return b.getType=function(){return"url"},b},A=function(a){var b=j(a);return b.getType=function(){return"color"},b},B=function(a){var b=j(a);return b.getType=function(){return"date"},b},C=function(a){var b=j(a);return b.getType=function(){return"datetime-local"},b},D=function(a){var b=j(a);return b.getType=function(){return"month"},b},E=function(a){var b=j(a);return b.getType=function(){return"number"},b},F=function(a){var b=j(a);return b.getType=function(){return"search"},b},G=function(a){var b=j(a);return b.getType=function(){return"tel"},b},H=function(a){var b=j(a);return b.getType=function(){return"time"},b},I=function(a){var b=j(a);return b.getType=function(){return"week"},b},J=function(b){var c={},f=b.$,h=b.constructorOverride||{color:A,date:B,datetimeLocal:C,month:D,number:E,search:F,tel:G,time:H,week:I,button:l,text:j,url:z,email:n,password:u,range:w,textarea:y,select:x,"select[multiple]":t,radio:v,checkbox:m,file:o,"file[multiple]":s,hidden:r},i=function(b,e){(d(e)?e:f.find(e)).each(function(){var d=a(this).attr("name");c[d]=h[b]({$:a(this)})})},k=function(b,i){var j=[],k=d(i)?i:f.find(i);d(i)?c[k.attr("name")]=h[b]({$:k}):(k.each(function(){-1===e(j,a(this).attr("name"))&&j.push(a(this).attr("name"))}),g(j,function(a){c[a]=h[b]({$:f.find('input[name="'+a+'"]')})}))};return f.is("input, select, textarea")?f.is('input[type="button"], button, input[type="submit"]')?i("button",f):f.is("textarea")?i("textarea",f):f.is('input[type="text"]')||f.is("input")&&!f.attr("type")?i("text",f):f.is('input[type="password"]')?i("password",f):f.is('input[type="email"]')?i("email",f):f.is('input[type="url"]')?i("url",f):f.is('input[type="color"]')?i("color",f):f.is('input[type="date"]')?i("date",f):f.is('input[type="datetime-local"]')?i("datetimeLocal",f):f.is('input[type="month"]')?i("month",f):f.is('input[type="number"]')?i("number",f):f.is('input[type="search"]')?i("search",f):f.is('input[type="tel"]')?i("tel",f):f.is('input[type="time"]')?i("time",f):f.is('input[type="week"]')?i("week",f):f.is('input[type="range"]')?i("range",f):f.is("select")?f.is("[multiple]")?i("select[multiple]",f):i("select",f):f.is('input[type="file"]')?f.is("[multiple]")?i("file[multiple]",f):i("file",f):f.is('input[type="hidden"]')?i("hidden",f):f.is('input[type="radio"]')?k("radio",f):f.is('input[type="checkbox"]')?k("checkbox",f):i("text",f):(i("button",'input[type="button"], button, input[type="submit"]'),i("text",'input[type="text"]'),i("color",'input[type="color"]'),i("date",'input[type="date"]'),i("datetimeLocal",'input[type="datetime-local"]'),i("month",'input[type="month"]'),i("number",'input[type="number"]'),i("search",'input[type="search"]'),i("tel",'input[type="tel"]'),i("time",'input[type="time"]'),i("week",'input[type="week"]'),i("password",'input[type="password"]'),i("email",'input[type="email"]'),i("url",'input[type="url"]'),i("range",'input[type="range"]'),i("textarea","textarea"),i("select","select:not([multiple])"),i("select[multiple]","select[multiple]"),i("file",'input[type="file"]:not([multiple])'),i("file[multiple]",'input[type="file"][multiple]'),i("hidden",'input[type="hidden"]'),k("radio",'input[type="radio"]'),k("checkbox",'input[type="checkbox"]')),c};a.fn.inputVal=function(b){var c=a(this),d=J({$:c});return c.is("input, textarea, select")?void 0===b?d[c.attr("name")].get():(d[c.attr("name")].set(b),c):void 0===b?p(d,"get"):(g(b,function(a,b){d[b].set(a)}),c)},a.fn.inputOnChange=function(b){var c=a(this),d=J({$:c});return g(d,function(a){a.subscribe("change",function(a){b.call(a.domElement,a.e)})}),c},a.fn.inputDisable=function(){var b=a(this);return p(J({$:b}),"disable"),b},a.fn.inputEnable=function(){var b=a(this);return p(J({$:b}),"enable"),b},a.fn.inputClear=function(){var b=a(this);return p(J({$:b}),"clear"),b}}(jQuery),a.fn.repeaterVal=function(){var b=function(a){if(1===a.length&&(0===a[0].key.length||1===a[0].key.length&&!a[0].key[0]))return a[0].val;g(a,function(a){a.head=a.key.shift()});var c,d=function(){var b={};return g(a,function(a){b[a.head]||(b[a.head]=[]),b[a.head].push(a)}),b}();return/^[0-9]+$/.test(a[0].head)?(c=[],g(d,function(a){c.push(b(a))})):(c={},g(d,function(a,d){c[d]=b(a)})),c};return b(function(a){var b=[];return g(a,function(a,c){var d=[];"undefined"!==c&&(d.push(c.match(/^[^\[]*/)[0]),d=d.concat(m(c.match(/\[[^\]]*\]/g),function(a){return a.replace(/[\[\]]/g,"")})),b.push({val:a,key:d}))}),b}(a(this).inputVal()))},a.fn.repeater=function(c){c=c||{};var d;return a(this).each(function(){var e=a(this),f=c.show||function(){a(this).show()},i=c.hide||function(a){a()},k=e.find("[data-repeater-list]").first(),l=function(b,c){return b.filter(function(){return!c||0===a(this).closest(n(c,"selector").join(",")).length})},p=function(){return l(k.find("[data-repeater-item]"),c.repeaters)},q=k.find("[data-repeater-item]").first().clone().hide(),r=l(l(a(this).find("[data-repeater-item]"),c.repeaters).first().find("[data-repeater-delete]"),c.repeaters);c.isFirstItemUndeletable&&r&&r.remove();var s=function(){var a=k.data("repeater-list");return c.$parent?c.$parent.data("item-name")+"["+a+"]":a},t=function(b){c.repeaters&&b.each(function(){var b=a(this);g(c.repeaters,function(a){b.find(a.selector).repeater(j(a,{$parent:b}))})})},u=function(a,b,c){a&&g(a,function(a){c.call(b.find(a.selector)[0],a)})},v=function(b,c,d){b.each(function(b){var e=a(this);e.data("item-name",c+"["+b+"]"),l(e.find("[name]"),d).each(function(){var f=a(this),g=f.attr("name").match(/\[[^\]]+\]/g),i=g?h(g).replace(/\[|\]/g,""):f.attr("name"),j=c+"["+b+"]["+i+"]"+(f.is(":checkbox")||f.attr("multiple")?"[]":"");f.attr("name",j),u(d,e,function(d){var e=a(this);v(l(e.find("[data-repeater-item]"),d.repeaters||[]),c+"["+b+"]["+e.find("[data-repeater-list]").first().data("repeater-list")+"]",d.repeaters)})})}),k.find("input[name][checked]").removeAttr("checked").prop("checked",!0)};v(p(),s(),c.repeaters),t(p()),c.initEmpty&&p().remove(),c.ready&&c.ready(function(){v(p(),s(),c.repeaters)});var w=function(){var d=function(e,f,h){if(f||c.defaultValues){var i={};l(e.find("[name]"),h).each(function(){var b=a(this).attr("name").match(/\[([^\]]*)(\]|\]\[\])$/)[1];i[b]=a(this).attr("name")}),e.inputVal(m(o(f||c.defaultValues,function(a,b){return i[b]}),b,function(a){return i[a]}))}u(h,e,function(b){var c=a(this);l(c.find("[data-repeater-item]"),b.repeaters).each(function(){var e=c.find("[data-repeater-list]").data("repeater-list");if(f&&f[e]){var h=a(this).clone();c.find("[data-repeater-item]").remove(),g(f[e],function(a){var e=h.clone();d(e,a,b.repeaters||[]),c.find("[data-repeater-list]").append(e)})}else d(a(this),b.defaultValues,b.repeaters||[])})})};return function(b,e){k.append(b),v(p(),s(),c.repeaters),b.find("[name]").each(function(){a(this).inputClear()}),d(b,e||c.defaultValues,c.repeaters)}}(),x=function(a){var b=q.clone();w(b,a),c.repeaters&&t(b),f.call(b.get(0))};d=function(a){p().remove(),g(a,x)},l(e.find("[data-repeater-create]"),c.repeaters).click(function(){x()}),k.on("click","[data-repeater-delete]",function(){var b=a(this).closest("[data-repeater-item]").get(0);i.call(b,function(){a(b).remove(),v(p(),s(),c.repeaters)})})}),this.setList=d,this}}(jQuery);
</script>
</head>
<body>
<form onSubmit="return false">
<!-- Personal Info -->
<div id="personal-info" class="content">
<div class="content-header mb-3">
<h6 class="mb-0">Pemegang Saham</h6>
<small>Masukan nama pemegang saham berikut dengan jabatan.</small>
</div>
<div class="row g-3">
<div class="form-repeater">
<div data-repeater-list="holder">
<div data-repeater-item>
<div class="row">
<div class="mb-3 col-lg-6 col-xl-3 col-12 mb-0">
<label class="form-label" for="form-repeater-1-1">Nama lengkap</label>
<input type="text" name="c_nama" id="form-repeater-1-1" class="form-control"
placeholder="JOKO WIDODO" />
</div>
<div class="mb-3 col-lg-6 col-xl-3 col-12 mb-0">
<label class="form-label" for="form-repeater-1-2">Password</label>
<input type="password" id="form-repeater-1-2" class="form-control"
placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" />
</div>
<div class="mb-3 col-lg-6 col-xl-2 col-12 mb-0">
<label class="form-label" for="form-repeater-1-3">Gender</label>
<select id="form-repeater-1-3" class="form-select">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="mb-3 col-lg-6 col-xl-2 col-12 mb-0">
<label class="form-label" for="form-repeater-1-4">Profession</label>
<select id="form-repeater-1-4" class="form-select">
<option value="Designer">Designer</option>
<option value="Developer">Developer</option>
<option value="Tester">Tester</option>
<option value="Manager">Manager</option>
</select>
</div>
<div class="mb-3 col-lg-12 col-xl-2 col-12 d-flex align-items-center mb-0">
<button class="btn btn-label-danger mt-4" data-repeater-delete>
<i class="bx bx-x"></i>
<span class="align-middle">Delete</span>
</button>
</div>
</div>
<hr>
</div>
</div>
<div class="mb-0">
<button class="btn btn-primary" data-repeater-create>
<i class="bx bx-plus"></i>
<span class="align-middle">Add</span>
</button>
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-primary btn-prev">
<i class="bx bx-chevron-left bx-sm ms-sm-n2"></i>
<span class="d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next">
<span class="d-sm-inline-block d-none me-sm-1">Next</span>
<i class="bx bx-chevron-right bx-sm me-sm-n2"></i>
</button>
</div>
</div>
</div>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment