I am working on a Vue.js form component with multiple input fields, but now I need to split it into two separate forms that will collect different user input.
Form 1 includes:
Name
Surname
Email
with a form name attribute value of form_1
Form 2 includes:
Username
Password
with a form name attribute value of form_2
The following code snippet is used:
created: function (formNameAttribute, inputNameAttribute) {
var getForms = document.getElementsByTagName('form');
var inputElement = document.querySelectorAll('input');
for (var i = 0; i < getForms.length; i++) {
formNameAttribute = getForms[i].name;
switch (getForms[i].name) {
case 'Account Details':
console.log('Form Name: ', getForms[i].name);
break;
case 'Account Login':
console.log('Form Name: ', getForms[i].name);
break;
default:
}
for (var j = i; j < inputElement.length; j++) {
inputNameAttribute = inputElement[j].name;
console.log('Input name attribute: ', inputNameAttribute);
}
}
}
I would like to know how to instruct the form component to display only the necessary fields for form_1 and form_2
Link to the external code: Form Component