JSFiddle - React, Tailwind, and code Playground
by Znuff
HTML
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="col-md-12 ">
<form method="post" action="/cart.php?a=confdomains" id="frmConfigureDomains">
<input type="hidden" name="token" value="7b04f0a03ca075d9eb17daacb8906b11611079c0" />
<input type="hidden" name="update" value="true" />
<p>Vă rugăm să revizuiți domenile alese și opțiunile suplimentare disponibile.</p>
<hr>
<h4>pipiunu.ro</h4>
<p>Perioada de înregistrare 1 An(i) Hosting
<a href="cart.php" class="text-danger">[Fără găzduire! Adaugă aici]</a></p>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>CNPFiscalCode
<input type="text" name="domainfield[0][0]" value="" size="20" class="form-control input-250" id="inputDomainfield[0][0]" />
</label>
</div>
<div class="form-group">
<label>Registration Number
<input type="text" name="domainfield[0][1]" value="" size="20" class="form-control input-250" id="inputDomainfield[0][1]" />
</label>
</div>
<div class="form-group">
<label>Registrant Type
<select name="domainfield[0][2]" class="form-control select-inline"><option value="p">Private Person</option><option value="ap">Authorized Person</option><option value="nc">Non-Commercial Organization</option><option value="c">Commercial</option><option value="gi">Government Institute</option><option value="pi">Public Institute</option><option value="o">Other Juridicial</option></select>
</label>
</div>
<div class="form-group">
<label>Nume detinator
<input type="text"...
CSS
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
JavaScript
function copyDataToForm(data) {
let $target = data.data('copyto');
let name = function(i, target) {
return "[name^='" + target + "[" + i + "]']";
}
for (var i = 0; i <= 10; i++) {
$(name(i, $target)).val($(name(i, 'domainfield[0]')).val());
}
}
function doConfigFormStuff(configForm, l) {
/* find all .ro domains forms */
let roForms = [];
configForm.find('select').find('option[value="p"]').parent().each(function() {
roForms.push(($(this).attr('name').match(/domainfield\[\d\]/g)))
});
/* change language strings
*/
var changeLabel = function($targetInput, newText) {
$targetInput.parent().contents().filter(function() {
return this.nodeType == 3;
}).first().replaceWith(newText)
};
$('select option[value="p"]').text(l.tip.p);
$('select option[value="ap"]').text(l.tip.ap);
$('select option[value="nc"]').text(l.tip.nc);
$('select option[value="c"]').text(l.tip.c);
$('select option[value="gi"]').text(l.tip.gi);
$('select option[value="pi"]').text(l.tip.pi);
$('select option[value="o"]').text(l.tip.o);
/* stuff to do when we change person type */
$.each(roForms, function(key, value) {
let idOfField = value[0].replace(/\D/g, '');
let cnpField = $('input[name="' + value + '[0]"]');
let regComField = $('input[name="' + value + '[1]"]');
let selectField = $('select[name="' + value + '[2]"]');
let ownerField = $('input[name="' + value + '[3]"]');
let address1Field = $('input[name="' + value + '[4]"]');
let address2Field = $('input[name="' + value + '[5]"]');
let countryField = $('select[name="' + value + '[6]"]');
let stateField = $('input[name="' + value + '[7]"]');
let cityField = $('input[name="' + value + '[8]"]');
let phoneField = $('input[name="' + value + '[9]"]');
let mailField = $('input[name="' + value + '[10]"]');
let eppField = $('input[name="epp[' + idOfField + ']"]');
if (key > 0) {
let $domainName =...