while designing the following application I am facing an issue. I am trying to generate an additional field 'Product Detail' just below the Protocol Type (which is only active when i select 'RAID' in controller type). It can be a part of the 'Additional Details' or it can be just on top of it. Attaching the working code below, any help would be much appreciated. Thanks for your time
document.addEventListener('DOMContentLoaded',function(){
const extra={};
const oForm=document.forms.myForm;
const oSave=document.querySelector('input[name="save"]');
const oSub=document.querySelector('input[name="submit"]');
const oCtrl=document.querySelector('select[name="controller"]');
const oTest=document.querySelector('select[name="test"]');
const oProto=document.querySelector('select[name="protocol"]');
const oTmp=document.querySelector('template');
const changehandler=function(e){
let option=this.options[ this.options.selectedIndex ];
if( option.hasAttribute( 'data-extra' ) ) extra[ this.name ]=this.value;
else{
if( extra.hasOwnProperty( this.name ) )delete extra[ this.name ];
}
if( Object.keys( extra ).length==2 ){
let fieldset=oTmp.content.cloneNode( true );
oForm.insertBefore( fieldset, oProto.parentNode.nextSibling )
} else {
if( document.getElementById('extra') ){
fieldset=document.getElementById('extra')
fieldset.parentNode.removeChild( fieldset );
}
}
if( option.hasAttribute( 'data-extra' ) ) extra[ this.name ]=this.value;
else{
if( extra.hasOwnProperty( this.name ) )delete extra[ this.name ];
}
if( this.name=='controller' ){
if( this.value=='RAID' )oProto.disabled=false
else oProto.disabled=true
}
}
const dialog=function( msg ){
alert( msg );
return false;
}
const savehandler=function(e){
e.preventDefault();
let valid=true;
/*[ 'name','email','test','controller','ip','chassis' ].forEach( n => {
oForm[ n ].classList.remove('invalid');
if( oForm[ n ].value=='' ){
oForm[ n ].classList.add('invalid');
valid=false;
}
});*/
if( !valid ) return dialog('Please fill all the fields!');
const ipformat = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
if ( ipformat.test( oForm.ip.value ) == false ) {
return dialog('Invalid IP Address');
}
let data={
'Test type':oForm.test.value,'IP Address':oForm.ip.value,'Product Type':oForm.controller.value,'Protocol Type':oForm.protocol.value, 'Chasis Inputs':oForm.chassis.value
};
if( Object.keys( extra ).length==2 ){
data['HBA_Ports']=oForm['hba-ports'].value;
data['MC_IP']=oForm['extra-ip'].value;
data['MC_Netmask']=oForm['netmask-ip'].value;
data['MC_Gateway']=oForm['gateway-ip'].value;
data['MC']=oForm['rbod-mc'].value;
data['SC']=oForm['rbod-sc'].value;
data['FU']=oForm['rbod-fu'].value;
data['EC']=oForm['rbod-ec'].value;
data['Controller_ID']=oForm['Controller-ID'].value;
}
let payload=Object.keys( data ).map( key=>{
return [ key, data[ key ] ].join(': ')
}).join( String.fromCharCode( 10 ) );
const blob = new Blob( [ payload ], { type: 'text/plain' });
const file = 'formData.yaml';
let link = document.createElement('a');
link.download = file;
if( window.webkitURL != null ) {
link.href = window.webkitURL.createObjectURL(blob);
} else {
link.href = window.URL.createObjectURL(blob);
link.style.display = "none";
document.body.appendChild(link);
}
link.click();
}
oCtrl.addEventListener('change',changehandler);
oTest.addEventListener('change',changehandler);
oSave.addEventListener('click',savehandler);
})<!DOCTYPE html><html><head><title>Save form Data in a Text File using JavaScript</title><h1>User Information </h1><style>
html, html * {
box-sizing:border-box;
border-color: teal;
font-family:calibri;
}
html{
background : radial-gradient(rgba(48, 97, 97, 0.5),rgba(255,255,255,0.5))
}
input[type=button],
input[type=submit]{
padding:1rem;
}
input[type=text],
textarea,
select {
font: 17px Calibri;
width: 100%;
padding: 12px;
border: 1px solid rgb(19, 18, 18);
border-radius: 4px;
color:teal
}
fieldset{
border:none;
padding: 10px;
overflow: hidden;
color: rgb(16, 8, 32);
font-size: 25px;
font-style: initial;
font-family: 'Times New Roman', Times, serif;
}
#extra{border:2px solid black; background:whitesmoke; border-radius:1rem;box-shadow:0 0 5px black;width:calc(100% - 24px);margin:auto;float:none;clear:both}
#extra h6{margin:0}
.invalid{border:2px solid red!important;background:rgba(255,0,0,0.1)}</style><script src="script.js"></script></head><body><template><fieldset id='extra'><h6>Additional Details Required</h6><label for='Controller_ID'>Controller_ID:</label><select name='Controller-ID' required><option value=""> - Select the Controller ID - </option><option value='A'>A </select><label for='HBA_Ports'>HBA_Ports:</label><input type='text' name='hba-ports' placeholder='Enter the HBA Ports' /> <label for='MC_IP'>MC_IP:</label><input type='text' name='extra-ip' placeholder='Enter the MC_IP' /> <label for='MC_Netmask'>MC_Netmask:</label><input type='text' name='netmask-ip' placeholder='Enter the MC_Netmask' /> <label for='MC_Gateway'>MC_Gateway:</label><input type='text' name='gateway-ip' placeholder='Enter the MC_Gateway' /> <label for='MC'>MC:</label><input type='text' name='rbod-mc' placeholder='Enter the MC Port' /> <label for='SC'>SC:</label><input type='text' name='rbod-sc' placeholder='Enter the SC Port' /> <label for='FU'>FU:</label><input type='text' name='rbod-fu' placeholder='Enter the FU Port' /> <label for='EC'>EC:</label><input type='text' name='rbod-ec' placeholder='Enter the EC Port' /> <label for='Controller_ID'>Controller_ID:</label><select name='Controller-ID' required><option value=""> - Select the Controller ID - </option><option value='B'>B </select><label for='HBA_Ports'>HBA_Ports:</label><input type='text' name='hba-ports' placeholder='Enter the HBA Ports' /> <label for='MC_IP'>MC_IP:</label><input type='text' name='extra-ip' placeholder='Enter the MC_IP' /> <label for='MC_Netmask'>MC_Netmask:</label><input type='text' name='netmask-ip' placeholder='Enter the MC_Netmask' /> <label for='MC_Gateway'>MC_Gateway:</label><input type='text' name='gateway-ip' placeholder='Enter the MC_Gateway' /> <label for='MC'>MC:</label><input type='text' name='rbod-mc' placeholder='Enter the MC Port' /> <label for='SC'>SC:</label><input type='text' name='rbod-sc' placeholder='Enter the SC Port' /> <label for='FU'>FU:</label><input type='text' name='rbod-fu' placeholder='Enter the FU Port' /> <label for='EC'>EC:</label><input type='text' name='rbod-ec' placeholder='Enter the EC Port' /> </fieldset></template><form name='myForm' method='POST'><fieldset><label for='Controller Type'>Controller Type</label><select name='controller' required><option value=""> - Select the Controller - </option><option data-extra=true value='RAID'>RAID<option value='JBOD'>JBOD<option value='AP'>AP</select></fieldset><fieldset><label for='Test Type'>Test Type</label><select name='test' required><option value=""> - Select The Test - </option><option data-extra=true value='BFT'>BFT<option data-extra=true value='CTO'>CTO<option data-extra=true value='RAID Generic'>RAID Generic<option data-extra=true value='Port Check'>Port Check<option data-extra=true value='FW Generic'>FW Generic<option data-extra=true value='JBOD Generic'>JBOD Generic</select></fieldset><!-- insert templated additional details here --><fieldset><label for='Protocol Type'>Protocol Type</label><select name='protocol' disabled><option selected hidden disabled> - Select The Protocol - <option data-extra=true value='SAS'>SAS<option data-extra=true value='iSCSI'>iSCSI<option data-extra=true value='FC'>FC</select></fieldset><fieldset><label for='IP Address'>IP Address:</label><input type='text' name='ip' placeholder='Enter your IP address' required /></fieldset><fieldset><label for='Chasis Input'>Number of Chasis Input:</label><input type='number' name='chassis' placeholder='Enter Number of Chasis' required /></fieldset><fieldset><input type='button' name='save' value='Save data to file' /></fieldset></form></body></html>
