Form doesn't submit values in ASP.NET MVC

Question

I am using ASP.NET MVC 5. Here, when i click on the search bar it calls the java script function, and when i provide the searchString value to the form, and click SUBMIT, it doesn't submit anything. Why is that?

<script>
    $(function () {
        $('a[href="#search"]').on('click', function (event) {
            event.preventDefault();
            $('#search').addClass('open');
            $('#search > form > input[type="search"]').focus();
        });

        $('#search, #search button.close').on('click keyup', function (event) {
            if (event.target == this || event.target.className == 'close' || event.keyCode == 27) {
                $(this).removeClass('open');
            }
        });
    });
</script>

View:

<body>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @if (Request.IsAuthenticated)
            {
                @Html.ActionLink("TimeEntry", "Index", "TimeEntry", null, new {@class = "navbar-brand"})
            }
            else
            {
                @Html.ActionLink("TimeEntry", "Login", "User", null, new {@class = "navbar-brand"})
            }

        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Clock In/Out(WIP)", "Index", "TimeEntry")</li>
                <li>@Html.ActionLink("Time Summary", "BackEnd", "TimeEntry")</li>



                <li>@Html.ActionLink("Users", "Index", "User")</li>
                <li><a href="#search">Search</a></li>


            </ul>

            <ul class="nav navbar-nav navbar-right">
                @if (Request.IsAuthenticated)
                {
                    <li> @Html.ActionLink("Log Out", "Logout", "User")</li>

                }
            </ul>


        </div>
    </div>
</div>

<div id="search">
    <button type="button" class="close" style="padding-top: 35px">x</button>
    @using (Html.BeginForm("Search", "User", FormMethod.Get))
    {
            @Html.TextBox("searchString","", new {@placeholder = "Search by First Name"})
            <button type="button" class="btn btn-primary">Search Rando</button>   
    }
</div>

<div class="container body-content">
    @RenderBody()
    <hr/>
    <footer>
        <p>&copy; @DateTime.Now.Year - My TimeClock Application</p>
    </footer>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>

Your cancelling the submit event (twice!) - event.preventDefault(); and return false; — user3559349
– user3559349, Commented Feb 9, 2015 at 1:53
If you want to submit the form, don't cancel it! (remove the last block of code starting with $('form').submit(function (event) {. But you have not shown your view so its difficult to understand what your really trying to do here. — user3559349
– user3559349, Commented Feb 9, 2015 at 1:58
I don't understand the issue. What do you mean by the submission works, but not when it is used in the razor file? Are you wanting to update the current page based on the value of searchString? (rather than post and redirect) - in which case you would use ajax — user3559349
– user3559349, Commented Feb 9, 2015 at 2:08
When i use the javascript code, i can log in, i.e. clicking on the log in button does nothing, but when i remove this script it works. — gambo yaya
– gambo yaya, Commented Feb 9, 2015 at 2:09

recursive · Accepted Answer · 2015-02-09 02:57:27Z

1

This line is cancelling the default event action. Take it out to allow the form to submit.

event.preventDefault();

This will allow the form to submit. Although the other two lines in that function will no longer serve any purpose, since they are modifying the state of the document, but the browser will navigate away from the document as soon as the form submission happens.

answered Feb 9, 2015 at 2:57

recursive

86.5k36 gold badges155 silver badges246 bronze badges

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

Comments

Jason Aller · Accepted Answer · 2015-02-09 05:03:58Z

0

<button type="button" class="btn btn-primary">Search Rando</button>

should be changed to

<button type="submit" class="btn btn-primary">Search Rando</button>

by altering the type to submit

edited Feb 9, 2015 at 5:03

Jason Aller

3,66028 gold badges43 silver badges40 bronze badges

answered Feb 9, 2015 at 3:00

gambo yaya

11 bronze badge

Collectives™ on Stack Overflow

Form doesn't submit values in ASP.NET MVC

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related