CODEWITHSUNDEEP
jqueryasp.net-mvc-3form-submit
Kadir.K
Kadir.K

Reputation: 376

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

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?

Upvotes: 0

Views: 449

Answers (1)

Kadir.K
Kadir.K

Reputation: 376

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.

Upvotes: 1

Related Questions