Currently wrapping up a project involving gradient swatches and moving on to the final stage of the republish function. I have two name forms: one is utilized in the initial creation of the swatch on keypress, while the other is intended for the edit function, triggered by a button click. However, the name is still being collected on enter as well. My goal is to hide the first form (which should not be used) and display the second form instead. The structure of the form is as follows:
<b-form-input
id="name"
size="lg"
type="text"
class="search-bar-2"
placeholder="Name Your Swatch, Enter Hit the Save Edit Button"
v-model="value3"
@keypress="republishSwatch"
>
</b-form-input>
The republishSwatch method is also assigned to the click event of the save button. However, I am facing an issue where the code does not seem to recognize the class of the element "search-box-2". The objective is to display the edit button, which is functioning correctly, and toggle between hiding/showing the alternative forms. The first form has the same structure as above but with the class search-box-1. Even though they may need different ids due to the names.
let oldForm = document.querySelector('.search-box-1');
let newForm = document.querySelector('.search-box-2');
let saveEditBtn = document.getElementById('saveBtn');
saveEditBtn.style.display = 'block';
oldForm.style.display = 'none';
newForm.style.display = 'block';
In CSS, the second form is initially hidden using "display: none!important" since it requires important to ensure it hides properly. This is within Bootstrap Vue. If I manage to resolve this issue, I will likely consolidate the name collection into a single function and trigger it through the republish function via the button click.
Any advice or suggestions are greatly appreciated!
Thank you