Add onsubmit event to call JS function in MVC3

Question

I have a problem with calling JS method from form in MVC3 project: I have a "search"page without forms with two buttons - Search and Cancel. Click on search runs JS function runSearch in ProductDefinition.

<div id="productSearch-dialog" class="modal fade" style="width: 1000px; display: none">
<div class="modal-header">
    <button class="close" aria-hidden="true" data-dismiss="modal" type="button">×</button>
    <h3>Search Results</h3>
</div>
<div class="modal-body" style="height: 650px;">
    <div>
        <input id="inputname" type="text" /><font class="red-font" id="lblrequired" style="display: none">*</font>
    </div>
    <div id="searchresultcontain" class="grid">
    </div>
    <div id="Pagination" class="pagination">
    </div>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" onclick="productDefinition.runSearch();">Search</button>
    <button class="btn btn-primary" data-dismiss="modal">Cancel</button>
</div>

How can I run this JS method (runSearch) when I press ? As far as I understand, this will be onsubmit event which is form event, so I am need to add form element with onsubmit property. I tried surrounding input field with BeginForm helper method:

@using (Html.BeginForm(new { onsubmit = "productDefinition.runSearch();" }))
{
    <input id="inputname" type="text" /><font class="red-font" id="lblrequired" style="display: none">*</font>
    <input type="submit" value="Submit" style="visibility: hidden" />
}

but it does not seem to be working - when I press enter I for some reason get source of the page and arrive at localhost/?onsubmit=productDefinition.runSearch() URL.
What can be the source of the problem and how can I get the same behaviour for onsubmit as for onclick?

Solution 1

 @using (Html.BeginForm(new { onsubmit = "return runSearch();" }))



<script type="text/javascript">
    function runSearch() {
           // your logic to perform the search.
           return true;
    }
</script>

Solution 2

You need to use the following version of BeginForm method in order to specify html attributes.

However, it is considered a bad practice to use inline javascript so I would suggest to assign and id attribute to your form and handle its submit event in the external javascript file instead. If you are using jQuery for your project, here is a good example from their docs - http://api.jquery.com/submit/. In plan JavaSCript it is a bit more tricky but still easy to do.

Comments

[Sergey Rybalkin]

I don't think that this will work as MVC will consider your parameter as a collection of route values - msdn.microsoft.com/en-us/library/dd470793(v=vs.108).aspx

[Darren]

@Sergey it should use the HTML Helper overload not the RouteValues. the OP can use which overload best suits him, as an additional reference: chenz101tutorials.blogspot.co.uk/2010/10/…

[Sergey Rybalkin]

but there are only two overloads of HtmlHelper.BeginForm that take single parameter and both threat it as routeValues. Your link proves this also, they are specifying ID attribute like this: Html.BeginForm(null, null, FormMethod.Post, new { id="myForm"})

[Sergei G]

runSearch JS function is located n ProductDefinition.js. So I have to do smth like this: using (@Html.BeginForm (new {id="searchForm"}")) { ... } and in ProductDefinition.js: $("searchForm").submit(function() { runSearch(); return false }); also all entries in that file are like func_name: function() how do i wrap sumbit handler?

[Darren]

@Sergey - this overload will treat it as a helper: msdn.microsoft.com/en-us/library/dd505244(v=vs.108).aspx

[Sergei G]

How can I call the script located in another file? Do I have to specify the whole route like ~/Scripts/ProductDefinition/runSearch?

[Sergey Rybalkin]

Almost, your code should look like this - Html.BeginForm(null, null, FormMethod.Post, new { id="searchForm"}). You can add submit handler to the end of the ProductDefinition.js file like this - $(function(){$("searchForm").submit(function() { runSearch(); return false });})

[Sergey Rybalkin]

@DarrenDavies I know, but it will be this helper - msdn.microsoft.com/en-us/library/dd470793(v=vs.108).aspx

[RHok]

I'm a bit late to the party, but I agree with Sergey. Html.BeginForm(null, null, FormMethod.Post, new { onsubmit = "return someJsScript();"}) is what works for me. The null parameters just use the default values when rendered