Может посмотреть в сторону легких MVVM?
https://codepen.io/sup3rz3n/pen/jJJzyY
const { h, app } = hyperapp;
/** @jsx h */
const state = {
form: 0,
fields: {
username: '',
password: '',
email: ''
}
};
const actions = {
changeForm: id => state => ({ form: id }),
changeField: e => state => ({
fields: {
...state.fields,
[e.target.name]: e.target.value
}
}),
submit: e => state => {
e.preventDefault();
alert(
`submit ${state.fields.username} ${state.fields.password} ${state.fields.email}`
)
}
};
const view = (state, actions) => {
if (state.form === 0) {
console.log(state.fields.username)
return <div>
<input type="text" name="username" oninput={actions.changeField} value={state.fields.username} />
<input type="password" name="password" oninput={actions.changeField} value={state.fields.password} />
<input type="email" name="email" oninput={actions.changeField} value={state.fields.email} />
<button onclick={() => actions.changeForm(1)} disabled={
state.fields.username === '' ||
state.fields.password === '' ||
state.fields.email === ''
}>next</button>
</div>
} else if (state.form === 1) {
return <div>form2 {state.fields.username}
<button onclick={actions.submit}>complete</button>
</div>
}
};
const main = app(state, actions, view, document.getElementById('app'));