hide/show div without submitting the form using javascript

Question

THis Is the code

        <div id="divFirst">
            <div class="col-md-6">
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic-addon1"><i class="fa fa-h-square "></i></span>
                        @Html.TextBoxFor(m => m.Name, new { @class = "form-control", placeholder = "Name" })
                    </div>
                    @Html.ValidationMessageFor(m => m.Name, null, new { @class = "text-danger" })
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic-addon1"> <i class="fa fa-map-marker "></i></span>
                        @Html.TextBoxFor(m => m.Address, new { @class = "form-control", placeholder = "Address" })
                    </div>
                    @Html.ValidationMessageFor(m => m.Address, null, new { @class = "text-danger" })
                </div>
                <div class="form-group ">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic_addon1"><i class="fa fa-phone"></i> </span>
                        @Html.TextBoxFor(m => m.Contact, new { @class = "form-control", placeholder = "Contact" })
                    </div>
                    @Html.ValidationMessageFor(m => m.Contact, null, new { @class = "text-danger" })
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic_addon1"><i class="fa fa-calendar"></i> </span>
                        @Html.TextBoxFor(m => m.Established, new { @class = "form-control", placeholder = "Year of Establishment" })
                    </div>
                    @Html.ValidationMessageFor(m => m.Established, null, new { @class = "text-danger" })
                </div>
                <div class="form-group ">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic_addon1"><i class="fa fa-envelope"></i></span>
                        @Html.TextBoxFor(m => m.Email, new { @class = "form-control", placeholder = "Email" })
                    </div>
                    @Html.ValidationMessageFor(m => m.Email, null, new { @class = "text-danger" })
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic_addon1"><i class="fa fa-globe"></i></span>
                        @Html.TextBoxFor(m => m.Websites, new { @class = "form-control", placeholder = "Websites" })
                    </div>
                    @Html.ValidationMessageFor(m => m.Websites, null, new { @class = "text-danger" })
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic_addon1"><i class="fa fa-registered"></i></span>
                        @Html.TextBoxFor(m => m.Registration_NO, new { @class = "form-control", placeholder = "Registration Number" })
                    </div>
                    @Html.ValidationMessageFor(m => m.Registration_NO, null, new { @class = "text-danger" })
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic_addon1">V</span>
                        @Html.TextBoxFor(m => m.PAN_VAT_NO, new { @class = "form-control", placeholder = "PAN/VAT Number" })
                    </div>
                    @Html.ValidationMessageFor(m => m.PAN_VAT_NO, null, new { @class = "text-danger" })
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic_addon1">C</span>
                        @Html.TextBoxFor(m => m.HospitalCapacity, new { @class = "form-control", placeholder = "Hospital Capacity" })
                    </div>
                    @Html.ValidationMessageFor(m => m.HospitalCapacity, null, new { @class = "text-danger" })
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic_addon1">D</span>
                        @Html.TextBoxFor(m => m.DepartmentCapacity, new { @class = "form-control", placeholder = "Department Capacity" })
                    </div>
                    @Html.ValidationMessageFor(m => m.DepartmentCapacity, null, new { @class = "text-danger" })
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic_addon1">S</span>
                        @Html.TextBoxFor(m => m.SuperSpeciality, new { @class = "form-control", placeholder = "Super Speciality (If Any)" })
                    </div>
                    @Html.ValidationMessageFor(m => m.SuperSpeciality, null, new { @class = "text-danger" })
                </div>

            </div>               
        </div>             
        <button id="createHospitalContinuebtn" onclick="showHide()" class="fa fa-angle-right btn btn-default">Continue</button>
        <div id="divSecond">             
            <div class="form-group">
                <div class="input-group">
                    @Html.TextAreaFor(m => m.Description, new { @class = "form-control DescriptionArea", placeholder = "Description" })
                </div>
                @Html.ValidationMessageFor(m => m.Description, null, new { @class = "text-danger" })
            </div>
        </div>
    }
    </div>

check the following link.. http://stackoverflow.com/questions/4528085/toggle-show-hide-div-with-button — Rica, Jun 14 '16 at 10:57
I did sir, before posting here , plz have some sense before writing something — Chandan, Jun 14 '16 at 11:57
Your HTML sample shows a closing `}` character at the end, but you've now shown us what is before the corresponding `{`. Also, you have not shown us your `showHide()` method. We can't help you without more information about what you have tried. — Richard Ev, Jun 14 '16 at 12:11

score 1 · Answer 1 · answered Jun 14 '16 at 11:17

1

$('#yourbuttonid').click(function () {
    $('#dividtohide').hide();
    $('#dividtoshow').show();
    return false;
});

answered Jun 14 '16 at 11:17

NnN

463
2
11

I already have done this but its not working , the form is going is submitting which I don't want , I want it to just show and hide but not submit the form – Chandan Jun 14 '16 at 11:31
it does posts the form sir, – Chandan Jun 14 '16 at 12:06
You don't need to have a `form`, just a `button` element will do, as shown in the [jQuery docs](http://api.jquery.com/show/). – Richard Ev Jun 14 '16 at 12:09
Provide **showHide()** code, you have answers which is more than enough, need to see what is wrong with your javascript function! – NnN Jun 14 '16 at 12:17

score 1 · Accepted Answer · answered Jun 14 '16 at 12:31

Try it this way:

Html:

<div id="div1">Text1</div>
<div id="div2">Text2</div>
<button>toggle</button>

script:

function Togglediv() {
    if ($("#div1").is(":visible")) {
        $("#div2").hide();
    } else {
        $("#div1").show();
    }
}

Togglediv();
$("button").click(function () {
    $("#div1").toggle();
    $("#div2").toggle();
});

score 1 · Answer 3 · answered Jun 14 '16 at 12:40

Since your are using <button> element you need to be aware of this ,

Always specify the type attribute for the element. Different browsers may use different default types for the element.

The default in your case may be submit , which is causing form submit , add a type attribute like below , it should work

<button type="button" id="createHospitalContinuebtn" onclick="showHide()" class="fa fa-angle-right btn btn-default">Continue</button>

hide/show div without submitting the form using javascript

3 Answers3