Using multiple forms in HTML

Question

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

What do you mean by 'loaded'? Do you mean that you want to get the HTML for them via AJAX, or just that they will be shown/hidden based on the selected option in #MainForm? Also note that your HTML is invalid - you cannot have elements outside of the <body> — Rory McCrossan
– Rory McCrossan, Commented Dec 26, 2015 at 15:16
@RoryMcCrossan I just want forms are shown/hidden based on the selected option of radio buttons in #MainForm. Yes I know, I just want to show for example. — batuman
– batuman, Commented Dec 26, 2015 at 15:17
@batuman: If you use a lot of html for a web-application you max be interested in AngularJS. — Nico
– Nico, Commented Dec 26, 2015 at 15:22

Rory McCrossan · Accepted Answer · 2015-12-26 15:21:39Z

2

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

edited Dec 26, 2015 at 15:21

answered Dec 26, 2015 at 15:19

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using multiple forms in HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related