CODEWITHSUNDEEP
javascriptjqueryhtml
batuman
batuman

Reputation: 7304

Using multiple forms in HTML

I have four forms (MainForm, Landed, Apartment, Condominium) in one HTML page.

<body>

        <form name="MainForm" method="post">
            <input type="radio" name="type" value="Landed">Landed
            <input type="radio" name="type" value="Apartment">Apartment
            <input type="radio" name="type" value="Condominium">Condominium
        </form>

        <form name="Landed" method="post"> </form>

        <form name="Apartment" method="post"></form>

        <form name="Condominium" method="post"></form>
</body>

MainForm has three radio buttons. If Landed radio button is pressed, the Landed form will be loaded together with MainForm. Or other radio buttons are selected, their respective forms are loaded. Before any selection is made, all forms are hidden. Then display only once a radio button is pressed. What could be the best approach for this? I tried and all forms are loaded altogether.

Thanks

Upvotes: 0

Views: 153

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

If all you are doing is showing/hiding the form based on the chosen radio button, you can use show and hide based on the id attributes of the form elements, like this:

<form id="mainform" name="mainform" method="post">
    <input type="radio" name="type" value="landed">Landed
    <input type="radio" name="type" value="apartment">Apartment
    <input type="radio" name="type" value="condominium">Condominium
</form>

<form id="landed" name="landed" method="post">
    Landed form
</form>

<form id="apartment" name="apartment" method="post">
    Apartment form
</form>

<form id="condominium" name="condominium" method="post">
    Condominium form
</form>

$('#mainform input[type="radio"]').change(function() {
    $('form:not(#mainform)').hide();
    $('#' + this.value).show();
});

Example fiddle

Upvotes: 2

Related Questions