<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<!--
Styles are in the <head> in the following order:
External stylesheets.....<link href='https://...>
Inline style block.......<style>...</style>
Closing head tag.........</head>
-->
<!--<link href="style.css" rel="stylesheet">-->
<style>
</style>
</head>
<body>
<form id='ui'>
<fieldset id='set'>
<legend>Create Form</legend>
<select id='sel'>
<option>Pick a Field</option>
<option value='0'>Text Box</option>
<option value='1'>Text Area</option>
<option value='2'>Checkbox</option>
<option value='3'>Radio Group</option>
<option value='4'>Select</option>
</select>
<input id='r0' name='rad' class='rad' type='radio' value='0' checked>
<label for='r0'>0</label>
<input id='r1' name='rad' class='rad' type='radio' value='1'>
<label for='r1'>1</label>
<input id='r2' name='rad' class='rad' type='radio' value='2'>
<label for='r2'>2</label>
<input id='r3' name='rad' class='rad' type='radio' value='3'>
<label for='r3'>3</label>
<button id='addSet' type='button'>Add Fieldset</button>
</fieldset>
</form>
<form id='base'>
<fieldset id='s0'>
<legend>0</legend>
</fieldset>
<fieldset id='s1'>
<legend>1</legend>
</fieldset>
<fieldset id='s2'>
<legend>2</legend>
</fieldset>
<fieldset id='s3'>
<legend>3</legend>
</fieldset>
</form>
<!--
Script is best loaded last in this order:
jQuery..................See below
External script.........<script src='https://...'></script>
Inline script block.....<script>...</script>
Closing body tag........</body>
-->
<!--
There is no jQuery used in this demo, but should there ever be a need for it,
uncomment the proceeding line. Do not place any script before jQuery, it must
always load first.
-->
<!--<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>-->
<script>
var formA = document.forms[0];
var formB = document.forms[1];
var ui = formA.elements;
var base = formB.elements;
formA.addEventListener('change', selectTag);
formA.addEventListener('click', addFieldset);
function selectTag(e) {
var rad = `s${document.querySelector('.rad:checked').value}`;
var fst = base[rad];
var qty;
var ask;
var idx = -1;
if (e.target.id === "sel") {
idx = parseInt(e.target.value, 10);
}
switch (idx) {
case 0:
var ID0 = Math.round(new Date().valueOf() / 3000000 + performance.now());
var input = `<input id="t${ID0}" name="t${ID0} type="text">`;
fst.insertAdjacentHTML('beforeend', input);
break;
case 1:
var ID1 = Math.round(new Date().valueOf() / 3000000 + performance.now());
var textArea = `<textarea id="ta${ID1}" name="ta${ID1}"></textarea>`;
fst.insertAdjacentHTML('beforeend', textArea);
break;
case 2:
var ID2 = Math.round(new Date().valueOf() / 3000000 + performance.now());
var check = `<input id="ch${ID2}" name="ch${ID2}" type='checkbox' value=''>`;
fst.insertAdjacentHTML('beforeend', check);
break;
case 3:
var ID3 = Math.round(new Date().valueOf() / 3000000 + performance.now());
ask = prompt('Enter the number of radio buttons needed');
var rads = [];
qty = parseInt(ask, 10);
var name = ID3 + Math.floor(Math.random() * 11) + 10;
for (let i = 0; i < qty; i++) {
var radio = `<input id="r${ID3+i}" name="r${name}" type='checkbox' value=''>`;
rads.push(radio);
fst.insertAdjacentHTML('beforeend', radio);
}
break;
case 4:
var ID4 = Math.round(new Date().valueOf() / 3000000 + performance.now());
var select = `<select id="s${ID4}" name="s${ID4}"></select>`;
ask = prompt('Enter the number of options needed');
qty = parseInt(ask, 10);
fst.insertAdjacentHTML('beforeend', select);
var sel = document.getElementById('s' + ID4);
for (let i = 0; i < qty; i++) {
var opt = document.createElement('option');
sel.add(opt);
}
break;
default:
break;
}
}
function addFieldset(e) {
if (e.target.id === 'addSet') {
var sets = formB.querySelectorAll('fieldset').length;
var fs = `
<fieldset id='s${sets}'>
<legend>${sets}</legend>
</fieldset>`;
formB.insertAdjacentHTML('beforeend', fs);
var rad = `
<input id='r${sets}' name='rad' class='rad' type='radio' value='${sets}'>
<label for='r${sets}'>${sets}</label>`;
ui.addSet.insertAdjacentHTML('beforebegin', rad);
}
}
</script>
</body>
</html>
/* Styles go here */