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

Answer 1

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

Using multiple forms in HTML

Question

1 answers

solution1
2 ACCPTED 2015-12-26 15:19:28

Using multiple forms in HTML

Question

1 answers

solution1 2 ACCPTED 2015-12-26 15:19:28

solution1
2 ACCPTED 2015-12-26 15:19:28