0

Well, I have a <Select> and when I select an option I need to show a <form>, and if I change the option I need to hide the fist one and then show the new one. How can I do it?

I changed my last post, where I tried to acces to the element by class name and now I'm trying with by Id. Now I can show the selected one but when I show the second form I can´t hide the first one

function displayForm(value) {
     let form = document.getElementById(value);
     console.log(form)
     form.style.display= "block";
}
.lfd, .dec{
display: none;
}
<div class="container">
        <div class="row">
            <div class="col">
                <form action="/Home/Opcion" method="post" id="form" class="form">
                    <div class="col-6 mx-auto mb-4 mt-5">
                        <label class="form-label" for="Form">Choos a form:</label>
                            <select id="Form" class="form-select" name="Form" title="Formulario" onchange="displayForm(this.value)" required>
                            <option value="">Choose an option:</option>
                            <option value="dec">DEC</option>
                            <option value="lfd">LFD</option>
                        </select>
                    </div>
                </form>
            </div>

        </div>
        
        <div class="container mt-5 mb-5 dec d-none" id="dec">
        <form action="~/Home/FinishForm" 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-12 buttonSubmit">
                <input class="btn btn-primary" type="submit" name="submit">
            </div>
        </form>
        
        <div class="container mt-5 mb-5 lfd d-none" id="lfd">
        <form action="~/Home/FinishForm" 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-12 buttonSubmit">
                <input class="btn btn-primary" type="submit" name="submit">
            </div>
        </form>

I'm using Bootstrap 5, maybe I can use it form this

popo
  • 71
  • 6
  • When you're using getElementsByClassName you dont get Single value you get HTMLcollection you can access your element in collection via index like form[0] or so, hope it helps !! – Abbas Shaikh Sep 13 '22 at 15:52
  • You are trying to access `form` with either value (class) you pass: 'dec' or 'lfd', but you have assigned those classes to the `div` just above of the forms. Result is that in your JS `form` is undefined, and as such its `style` too... Why not give your forms an `id` of 'dec' and 'lfd' and use `getElementById(value)` in your JS? – Rene van der Lende Sep 13 '22 at 15:56

0 Answers0