I have a <select> tag and when I choose an option it rederects to a new page that shows a form. I was asked for the forms to be displayed just below the <select> tag.
What I tried is to call the selected one with an iframe, but couldn't do it successfully.
I'm unable to hide them all and only show on top of the window the selected one.
Like this:
Like you can see, I have 2 forms, I hide them with visibility: hidden;, but then I'm unable to show the selected one with the <select> and position it just below the <select> (as you can see from the first form)
I'm using Bootstrap 5, so, any help is welcome.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<div class="container mt-5 mb-5">
<form action="~/Home/FinishedForm" method="POST" class="row">
<div class="col-6">
<label class="form-label" for="first_name">Name: </label>
<input class="form-control" id="first_name" maxlength="40" name="first_name" required size="20" type="text" />
</div>
<div class="col-6">
<label class="form-label" for="last_name">Last name: </label>
<input class="form-control" id="last_name" maxlength="80" name="last_name" required size="20" type="text" />
</div>
<div class="col-6">
<label class="form-label" for="mobile"> Phone Number: </label>
<input class="form-control" id="mobile" maxlength="40" name="mobile" required size="20" type="text" />
</div>
<div class="col-6">
<label class="form-label" for="email">Email: </label>
<input class="form-control" id="email" maxlength="80" name="email" required size="20" type="text" />
</div>
<div class="col-6">
<label class="form-label" for="company">Company: </label>
<input class="form-control" id="company" maxlength="40" name="company" required size="20" type="text" />
</div>
<div class="col-6">
<label class="form-label" for="select1">Category: </label>
<select class="form-select" id="select1" name="select1" title="LFD Category" required="required">
<option value=""></option>
<option value="End Customer">End Customer</option>
<option value="Build">Build</option>
<option value="Distributor">Distributor</option>
</select>
</div>
<div class="col-6">
<label class="form-label" for="street">Address: </label>
<textarea class="form-control" name="street" required></textarea>
</div>
<div class="col-6">
<label class="form-label" for="city">Location: </label>
<input class="form-control" id="city" maxlength="40" name="city" size="20" type="text" />
</div>
<div class="col-6">
<label class="form-label" for="select2">I am interested in: </label>
<select class="form-select" id="select2" multiple="multiple" name="select2" title="LFD Product of Interest">
<option value="Audio and Video">Audio and Video</option>
<option value="LFD">LFD</option>
<option value="Interactive LFD">Interactive LFD</option>
<option value="LFD Software">LFD Software</option>
</select>
</div>
<div class="col-12">
<label class="form-label" for="textarea">Message:</label>
<textarea class="form-control" id="textarea" name="textarea" type="text" wrap="soft"></textarea><br>
</div>
<div class="col-12 buttonSubmit">
<input class="btn btn-primary" type="submit" name="submit">
</div>
</form>
</div>
<div class="container mb-5 mt-5">
<form action="~/Home/FinishedForm" method="POST" class="row">
<div class="col-6">
<label class="form-label" for="first_name">Name: </label>
<input class="form-control" id="first_name" maxlength="40" name="first_name" required size="20" type="text" />
</div>
<div class="col-6">
<label class="form-label" for="last_name">Last name: </label>
<input class="form-control" id="last_name" maxlength="80" name="last_name" required size="20" type="text" />
</div>
<div class="col-6">
<label class="form-label" for="mobile"> Phone Number: </label>
<input class="form-control" id="mobile" maxlength="40" name="mobile" required size="20" type="text" />
</div>
<div class="col-6">
<label class="form-label" for="email">Email: </label>
<input class="form-control" id="email" maxlength="80" name="email" required size="20" type="text" />
</div>
<div class="col-6">
<label class="form-label" for="company">Company: </label>
<input class="form-control" id="company" maxlength="40" name="company" required size="20" type="text" />
</div>
<div class="col-6">
<label class="form-label" for="select1">Category: </label>
<select class="form-select" id="select1" name="select1" title="SAC Category" required="required">
<option value=""></option>
<option value="Builder">Builder</option>
<option value="Developer">Developer</option>
</select>
</div>
<div class="col-6">
<label class="form-label" for="street">Address: </label>
<textarea class="form-control" name="street" required></textarea>
</div>
<div class="col-6">
<label class="form-label" for="city">Location: </label>
<input class="form-control" id="city" maxlength="40" name="city" size="20" type="text" />
</div>
<div class="col-6">
<label class="form-label" for="select2">I am interested in:</label>
<select class="form-select" id="select2" multiple="multiple" name="select2" title="SAC Product of Interest">
<option value="CAC">CAC</option>
<option value="DVM">DVM</option>
</select>
</div>
<div class="col-12">
<label class="form-label">Message:</label>
<textarea class="form-control" id="xxxxx" name="xxxxx" type="text" wrap="soft"></textarea><br>
</div>
<div class="col-12 buttonSubmit">
<input class="btn btn-primary" type="submit" name="submit">
</div>
</form>
</div>Now with Javascript I want to change the Display: none to Display: block but when I try this Error:
Uncaught TypeError: Cannot set properties of undefined (setting 'display')
function displayForm(value) {
/*console.log(value);*/
let form = document.getElementsByClassName(value);
console.log(form)
form.style.display = "block";
}
but form is HTMLCollection [div.container.mt-5.mb-5.dec.d-none]