Tag Helpers not binding data when calling form submit via javascript

Question

So I've got a form. I'm utilizing tag helpers. The form only has one text input, and I'm trying to use the Bootstrap "input-group-addon" div as the submit button for this small form.

I'm running into strange behavior. If I just hit the enter key after typing something into the input, the data binds fine over into the controller action.

However, if I attach an onclick listener to the div, and run getElementById('Form').submit();, when I click the div, it still takes me to the controller action, but none of the data is bound to the incoming for model.

Razor form:

<form asp-controller="Search" asp-action="HomeBuyersSearchSubmit" id="Home_Buyers_Search_Form">
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <div class="input-group">
                    <input asp-for="Query" class="form-control" placeholder="City, Neighborhood, Address, Postal Code or MLS #" />
                    <div onclick="javascript: document.getElementById('Home_Buyers_Search_Form').submit();" class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
                </div>
            </div>   
        </div>
    </div>
</form>

Controller action:

[HttpPost]
public IActionResult HomeBuyersSearchSubmit(SearchFilter filter)
{
     return RedirectToAction("Index", filter);
}

adam3039 adam3039 · Accepted Answer · 2016-07-18T04:56:50

I found a work around, but I'd still be curious in knowing what is going on.

For those interested, what I did was changed the "input-group-addon" to a button, and made some slight modifications to the padding and margins to make the button appear like the div counterpart. This also required Bootstrap's "form-inline" on the form. Data binding works as expected now.

<form asp-controller="Search" asp-action="HomeBuyersSearchSubmit" id="Home_Buyers_Search_Form" class="form-inline">
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                    <input asp-for="Query" class="form-control" placeholder="City, Neighborhood, Address, Postal Code or MLS #" />
                    <button type="submit" class="input-group-addon"><i class="glyphicon glyphicon-search"></i></button>
            </div>   
        </div>
    </div>
</form>

Tag Helpers not binding data when calling form submit via javascript

1 Answers