I currently have a button that when clicked it will show to 2 form links. When you click on one of the form links a different form should show. But for some reason I can't get the second form to show; when I click on the second form link it either closes the first form or opens the first form.
Why isn't my form working?.Here is the sample code.
$("#formButton1").click(function () {
$("#form1").toggle();
$("#form2").toggle();
}); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-primary" id="formButton1" style="background-color:#EEEEEE; border-color:darkgrey; color:black;"></button>
<form id="form1" method="post" style="display:none;">
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="font-size:15px;">
Vault Status
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-block">
<div class="form-group">
<div class="form-group">
<p> This script returns status of vault servers for the chosen environment. It is used to determine if any servers overlap in order to detect a split brain.</p>
</div>
<label for="exampleFormControlSelect2">Select Environment</label>
<select multiple class="form-control" id="test1">
<option>RTP Prod</option>
<option>OMA Prod</option>
<option>BGI</option>
<option>BG2</option>
<option>Cloud</option>
<option>Workstation</option>
<option>QA</option>
<option></option>
</select><br />
<button type="submit">Submit</button>
</div>
</div>
</div>
</div>
</form>
<form id="form2" method="post" style="display:none;">
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="font-size:15px;">
Form 2
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-block">
<div class="form-group">
<div class="form-group">
<p> This script returns status of vault servers for the chosen environment. It is used to determine if any servers overlap in order to detect a split brain.</p>
</div>
<label for="exampleFormControlSelect2">Select Environment</label>
<select multiple class="form-control" id="test2">
<option>Test</option>
<option>OMA Prod</option>
<option>BGI</option>
<option>BG2</option>
<option>Cloud</option>
<option>Workstation</option>
<option>QA</option>
<option></option>
</select><br />
<button type="submit">Submit</button>
</div>
</div>
</div>
</div>
</form>You miss a reference to Bootstrap library in your code. Make sure that you include it for both bootstap css and javascript:
You need to change the id of the div for form1 I renamed it to collapseOne
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
$("#formButton1").click(function () {
$("#form1").toggle();
$("#form2").toggle();
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary" id="formButton1"
style="background-color:#EEEEEE; border-color:darkgrey; color:black;">
</button>
<form id="form1" method="post" style="display:none;">
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" style="font-size:15px;">
Vault Status
</a>
</h5>
</div>
<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-block">
<div class="form-group">
<div class="form-group">
<p> This script returns status of vault servers for the chosen environment. It is used to determine if any servers overlap in order to detect a split brain.</p>
</div>
<label for="exampleFormControlSelect2">Select Environment</label>
<select multiple class="form-control" id="test1">
<option>RTP Prod</option>
<option>OMA Prod</option>
<option>BGI</option>
<option>BG2</option>
<option>Cloud</option>
<option>Workstation</option>
<option>QA</option>
<option></option>
</select><br />
<button type="submit">Submit</button>
</div>
</div>
</div>
</div>
</form>
<form id="form2" method="post" style="display:none;">
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="font-size:15px;">
Form 2
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-block">
<div class="form-group">
<div class="form-group">
<p> This script returns status of vault servers for the chosen environment. It is used to determine if any servers overlap in order to detect a split brain.</p>
</div>
<label for="exampleFormControlSelect2">Select Environment</label>
<select multiple class="form-control" id="test2">
<option>Test</option>
<option>OMA Prod</option>
<option>BGI</option>
<option>BG2</option>
<option>Cloud</option>
<option>Workstation</option>
<option>QA</option>
<option></option>
</select><br />
<button type="submit">Submit</button>
</div>
</div>
</div>
</div>
</form>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments