.NET MVC 3: Form Doesn't Submit After JQuery Code

Question

I have a simple form with two fields and an optional field which is showed when a checkbox is selected and hidden if the checkbox is not selected - the show/hide is controlled by jQuery. The problem is that when the page is loaded first time the form is submitted as usual but once the checkbox is checked or unchecked the submit button does not submit the form or even more weird it does nothing.

I have a strongly-typed view with model:

@model Metteem.ViewModels.SchedularAccount

And my simple script is:

<script type="text/javascript">
$(document).ready(function () {
    $("#showhide").click(function () {
        $("#alternatingInput").toggle('fast');
    });
});
</script>

Where the code of the form is:

@using (Html.BeginForm(null, null, FormMethod.Post, new { Class = "well form-horizontal" }))
{
    <fieldset>
        <div class="control-group">
            <label class="control-label">Meeting ID</label>
            <div class="controls">
                @Html.TextBoxFor(model => model.MeetingId, new { Class = "input-xlarge" })
                @Html.ValidationMessageFor(model => model.MeetingId, null, new { Class = "help-inline" })
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">Password</label>
            <div class="controls">
                @Html.PasswordFor(model => model.Password, new { Class = "input-xlarge" })
                @Html.ValidationMessageFor(model => model.Password, null, new { Class = "help-inline" })
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">Login as Host?</label>
            <div class="controls">
                @Html.CheckBoxFor(model => model.IsHost, new { Class = "input-xlarge", id = "showhide" })
            </div>
        </div>
        <div class="control-group" id="alternatingInput" style="display: block; ">
            <label class="control-label">Participant ID</label>
            <div class="controls">
                @Html.TextBoxFor(model => model.UserId, new { Class = "input-xlarge", Value = "0" })
            </div>
        </div>

    </fieldset>
    <div class="form-actions">
        @Html.ActionLink("Cancel", "Index", "Home", null, new { Class = "btn" })
        <button class="btn btn-primary">Login</button>
    </div>
}

In my action I have an HttpPost attribute:

[HttpPost]
public ActionResult HostParticipantLogin(SchedularAccount account)
{
   //Rest of my code
}

What can be go wrong?

shouldn't the button be a submit button ? i.e <input type=submit class="btn btn-primary" Value="Login" /> ? — keshav
– keshav, Commented Jun 10, 2012 at 22:09
@gdoron Firebug doesn't give any clues unfortunately, the only change is that display option is block when the checkbox is unchecked and none when it is checked: <div class="control-group" id="alternatingInput" style="display: block; "></div> — Kadir.K
– Kadir.K, Commented Jun 10, 2012 at 22:23
@DarinDimitrov yes, the client side validation is enabled. Though it doesn't matter because it is not because of the empty hidden textbox, if it was filled the sitution doesn't change. — Kadir.K
– Kadir.K, Commented Jun 10, 2012 at 22:29
Try <button type="submit" class="btn btn-primary"> if you have to use a <button> element. — avesse
– avesse, Commented Jun 11, 2012 at 19:35

Kadir.K · Accepted Answer · 2012-06-12 09:56:07Z

1

Thanks to @avesse, adding type as submit solves the problem..

Try <button type="submit" class="btn btn-primary"> if you have to use a <button> element.

answered Jun 12, 2012 at 9:56

Kadir.K

3764 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

.NET MVC 3: Form Doesn't Submit After JQuery Code

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