user3526766 user3526766 - 5 months ago 42
jQuery Question

form open onclick button

I have a form. In which I have fields SCHOLARSHIP FORM, PAYMENT, REGISTRATION NO. and ADMIT CARD. If i click on SCHOLARSHIP FORM, its fieldset should be open. If I click PAYMENT, its fieldset should be replace existing and payment's fieldset should be open inplace of existing.

It is opening, but below old one. It is not replacing.

<form id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li class="active"><a href = "#" onclick = "showForm1()">Scholarship Form</a></li>
<li class="active"><a href = "#" onclick = "showForm()">Paymen</a>t</li>
<li class="active">Registration No.</li>
<li class="active">Admit Card</li>
</ul>
<!-- fieldsets -->
<fieldset id = "theform1" style="display:none">
<h2 class="fs-title">Scholarship Form</h2>
<h3 class="fs-subtitle">Fill Your Details</h3>
<input type="text" name="email" placeholder="Email" />
<input type="password" name="pass" placeholder="Password" />
<input type="password" name="cpass" placeholder="Confirm Password" />

</fieldset>
<script type = "text/javascript">
function showForm1() {
document.getElementById("theform1").style.display = "block";
}
</script>



<fieldset id = "theform" style="display:none">
<h2 class="fs-title">Payment</h2>
<h3 class="fs-subtitle">Pay scholarship fee</h3>
<input type="text" name="twitter" placeholder="Twitter" />
<input type="text" name="facebook" placeholder="Facebook" />
<input type="text" name="gplus" placeholder="Google Plus" />

</fieldset>
<script type = "text/javascript">
function showForm() {
document.getElementById("theform").style.display = "block";
}
</script>





<fieldset>
<h2 class="fs-title">Registration Number</h2>
<h3 class="fs-subtitle">Download or Print your Registration Number</h3>
<input type="text" name="fname" placeholder="First Name" />
<input type="text" name="lname" placeholder="Last Name" />
<input type="text" name="phone" placeholder="Phone" />
<textarea name="address" placeholder="Address"></textarea>

</fieldset>




<fieldset>
<h2 class="fs-title">Admit Card</h2>
<h3 class="fs-subtitle">Download or Print Your Admit Card</h3>

<input type="text" name="phone" placeholder="Phone" />
<textarea name="address" placeholder="Address"></textarea>

</fieldset>
</form>

Answer

Sounds like you need to hide any open form first.

function showForm1() {
    document.getElementById("theform1").style.display = "block";
    document.getElementById("theform").style.display = "none";
}

If you do this for both forms you should be all set.