ASP .NET MVC cannot submit form with jQuery/JavaScript

Question

I need your help. I am trying to realize a live search. So whenever I switch from one TextBox to another, a form should be submitted, to update the URL and to pass the data to the controller. It works perfectly fine when I click the submit button but it does not work the way I want.

Here is my code:

Controller:

public ActionResult Index(string number, string caption)
{
    //Fetch data from the database
    return View();
}

View:

$(document).ready(function () {
    $('#number').change(function () {
        $('#filter').submit();
    });
});

@using (Html.BeginForm("Index", "Home", FormMethod.Get, new { id = "filter" }))
{
<div class="row">
    <div class="col-sm-2 checkbox">
        Number:
    </div>
    <div class="col-sm-3">
        @Html.TextBox("Number", "", new { @class = "form-control", type = "text", id = "number" })
    </div>
</div>
<div class="row">
    <div class="col-sm-2 checkbox">
        Caption:
    </div>
    <div class="col-sm-3">
        @Html.TextBox("Caption", "", new { @class = "form-control", type = "text", id = "caption" })
    </div>
</div>    
<div class="row">
    <div class="col-sm-2 col-sm-offset-2">
        <button type="submit" id="submit" class=" btn btn-block btn-primary">Search</button>
    </div>
</div>
}

Output HTML:

<script>
$(document).ready(function () {
    $('#number').change(function () {
        $('#filter').submit();
    });
});
</script>

<form action="/" id="filter" method="get">    <div class="row">
    <div class="col-sm-2 checkbox">
        Number:
    </div>
    <div class="col-sm-3">
        <input class="form-control" id="number" name="Number" type="text" value="">
    </div>
</div>
<div class="row">
    <div class="col-sm-2 checkbox">
        Caption:
    </div>
    <div class="col-sm-3">
        <input class="form-control" id="caption" name="Caption" type="text" value="">
    </div>
</div>    
<div class="row">
    <div class="col-sm-2 col-sm-offset-2">
        <button type="submit" id="submit" class=" btn btn-block btn-primary">Search</button>
    </div>
</div>

Browser Console:

Uncaught TypeError: elem[type] is not a function
at Object.trigger (http://localhost:49782/Scripts/jquery-1.8.2.js:2991:18)
at HTMLFormElement.<anonymous> (http://localhost:49782/Scripts/jquery-1.8.2.js:3618:17)
at Function.each (http://localhost:49782/Scripts/jquery-1.8.2.js:625:20)
at init.each (http://localhost:49782/Scripts/jquery-1.8.2.js:255:17)
at init.trigger (http://localhost:49782/Scripts/jquery-1.8.2.js:3617:15)
at init.jQuery.fn.(anonymous function) [as submit] (http://localhost:49782/Scripts/jquery-1.8.2.js:3671:9)
at HTMLInputElement.<anonymous> (http://localhost:49782/:63:26)
at HTMLInputElement.dispatch (http://localhost:49782/Scripts/jquery-1.8.2.js:3077:9)
at HTMLInputElement.eventHandle (http://localhost:49782/Scripts/jquery-1.8.2.js:2695:28)

Are you sure the textbox on the compiled form has the id number? Please verify this — Nils
– Nils, Commented Dec 21, 2016 at 9:24
@Satpal $(document).ready(function(){}); does not solve the problem nor the script at the bottom of the page. The onChange event fires up, if I put confirm("Test") inside the script, only the form is not submitted. — Slava
– Slava, Commented Dec 21, 2016 at 9:33
I am not sure why your form is not submitting.. the code looks fine.. As you said clicking on the button will submit.. why dont you first check if the button is clicked programatically is the form submitted.. $('#submit').trigger('click') — Rajshekar Reddy
– Rajshekar Reddy, Commented Dec 21, 2016 at 9:48

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

Your JavaScript code is looking for the tag with ID #number. Because browsers mostly read the source code from the top to the bottom, the code will be evaluated well before the #number <input> is even declared. This means that jQuery will not find it and will therefore not attach the event. If you move the script after the HTML, or wrap it into document.ready, it will work as expected:

$(document).ready( function() { 
  $('#number').change(function () {
     $('#filter').submit();
  });
} );

//or simpler equivalent

$( function () { ... } );

This however will still not work as you want, because each time the input changes, the whole page will be posted back to the server, so user will have to wait for the entire page to reload after he tries to switch focus from one input to another. This is not very convenient and you would probably be better off changing the logic to use AJAX calls and dynamically update the search results. Although it is not a requirement, it is a nice to have and user-friendly approach :-) .

Update - solution to submit error

I have just found the solution for the error you get trying to submit. Your submit button's id is submit. This is not "wrong" per se, but it causes a problem trying to submit with jQuery. You see, because the button is inside your form, when jQuery returns the #filter form, when you try to use submit() on it, JavaScript finds your submit button in scope and thinks that you want to "call it" - hence you get the error, because you you cannot "call" an element. This might also happen if you use submit as the name of a button.

The best and easiest solution for you will be to change the id to something else:

<button type="submit" id="submitButton" class=" btn btn-block btn-primary">Search</button>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 21, 2016 at 9:27

Martin Zikmund

39.2k7 gold badges74 silver badges95 bronze badges

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

4 Comments

Slava Over a year ago

Unfortunately $(document).ready() does not solve the problem. The event fires if I add confirm("Test"), only the form is not submitted. How can I realize that with AJAX? Thanks!

Martin Zikmund Over a year ago

Have you wrapped your code inside the ready handler? In case yes, it should definitely fire, so this is quite surprising. Could you also post the HTML code from the browser (without Razor)? With AJAX you would create a HTTP GET request that would send the contents of your inputs to a ASP.NET Web API controller, that would return the results as JSON objects you would then transform into HTML output for your page. There should be many tutorials for this on the net :-) .

Slava Over a year ago

I've just updated my question and posted HTML code. I will try to realize it with AJAX. Thanks.

Martin Zikmund Over a year ago

I have just found the solution and updated my answer :-)

Shan · Accepted Answer · 2016-12-21 09:37:39Z

0

In modern browsers use the input event. This event will fire when the user is typing into a text field, pasting, undoing, basically anytime the value changed from one value to another.

$('#number').on('input', function() { 
   $('#filter').submit();
});

answered Dec 21, 2016 at 9:37

Shan

17211 bronze badges

1 Comment

Slava Over a year ago

The event fires, only the form is not submitted. I added confirm("Test") and it shows up.

Muhammad Asad · Accepted Answer · 2016-12-21 12:56:57Z

It's working fine for me I hope it also working for u

C# Code:

 [HttpPost]
 public ActionResult Index(string firstname)
   {
       return Json("Done");
   }

Razor Code

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        var abc = document.getElementById('Number');
        abc.onchange = (function () {
            document.forms[0].submit();  
        });
    });
</script>

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id= "filter" }))
{
    <div class="row">
        <div class="col-sm-2 checkbox">
            Number:
        </div>
        <div class="col-sm-3">
            @Html.TextBox("Number", "", new { @class = "form-control", type = "text", id = "Number" })
        </div>
    </div>
    <div class="row">
        <div class="col-sm-2 checkbox">
            Caption:
        </div>
        <div class="col-sm-3">
            @Html.TextBox("Caption", "", new { @class = "form-control", type = "text", id = "caption" })
        </div>
    </div>
    <div class="row">
        <div class="col-sm-2 col-sm-offset-2">
            <button type="submit" id="submit1" class=" btn btn-block btn-primary">Search</button>
        </div>
    </div>
}

Do Not use submit as id or name of button it override the meaning of Java Script submit Method

Collectives™ on Stack Overflow

ASP .NET MVC cannot submit form with jQuery/JavaScript

3 Answers 3

Update - solution to submit error

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Update - solution to submit error

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related