CODEWITHSUNDEEP
javascriptc#jqueryhtmlasp.net-mvc
VansFannel
VansFannel

Reputation: 45911

I can't do a submit with jquery

This is my page:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="/Scripts/jquery-2.1.3.js"></script>

    <script>
        function DoSubmit() {
            if ($("#noAggLabel")) {
                $("#noAggLabel").innerHTML = "";
            }
            if (this.value) {
                $("#orderForm").submit();
            }
        }
    </script>
</head>
<body>
    <div>

<form action="/Orders/GetXML" id="orderForm" method="post">            <p>
                <select id="OrdersSelect" name="productionOrderId" onchange="DoSubmit();"><option value="">Orders</option>
<option value="1">Order 1</option>
<option value="2">Order 2</option>
<option value="3">Order 3</option>
</select>
            </p>
</form>    </div>
    <div id="codesTable">
    </div>
</body>
</html>

I'm developing a ASP.NET MVC 5 app with .NET Framework 4.5.1 and C#.

This is the View that generates that HTML:

@model Models.ProductionOrderViewModel

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-2.1.3.js"></script>
    <script>
        function DoSubmit() {
            if ($("#noAggLabel")) {
                $("#noAggLabel").innerHTML = "";
            }
            if (this.value) {
                $("#orderForm").submit();
            }
        }
    </script>
</head>
<body>
    <div>
        @using (@Html.BeginForm("GetXML", "Orders", FormMethod.Post, new { id = "orderForm" }))
        {
            <p>
                @Html.DropDownList("productionOrderId",
                                    new SelectList(Model.ProductionOrders, "Id", "OrderNumber"),
                                    "Orders",
                                    new { id = "OrdersSelect", onchange = "DoSubmit();" })
            </p>
        }
    </div>
    @if (!Model.PagingInfo.HasAggregations)
    {
        <div id="noAggDiv">
            @Html.Label("No tiene agregaciones", new { @id = "noAggLabel" })
        </div> 
    }
    <div id="codesTable">
    </div>
</body>
</html>

Why I can't do a submit? I change selected value and nothing happens.

Upvotes: 0

Views: 140

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195962

Remove the onchange attribute, and bind through jQuery

<script>
    function DoSubmit() {
        if ($("#noAggLabel").length) {
            $("#noAggLabel").html();
        }
        if (this.value) {
            $("#orderForm").submit();
        }
    }
    $(function(){
        $('#OrdersSelect').on('change', DoSubmit);
    });
</script>

Also add .length to the $("#noAggLabel") test because it always returns a jQuery object (and it always evaluates to true when used in a boolean test).

Upvotes: 4

Guffa
Guffa

Reputation: 700152

That's because the DoSubmit function isn't called with the element as the context. In the function this will refer to the window object.

You can set the context when you call the function:

onchange="DoSubmit.call(this);"

If you bind the event using jQuery instead of the onchange attribute, the context will be right:

$(function(){
  $('#OrdersSelect').change(DoSubmit);
});

Side notes: There is no innerHTML method in jQuery, you would use the text or html method to set the content. You don't have to check if there is any element first, if there is no element, then the jQuery object will be empty, so calling text on it just does nothing.

You should check the content of the value. If you just use it in an if statement it will be converted to a boolean, so an empty string is still evaluated as true.

function DoSubmit() {
    $("#noAggLabel").text("");
    if (this.value != "") {
        $("#orderForm").submit();
    }
}

Upvotes: 5

Related Questions