为什么jQuery不能做提交功能？

Question

I can't use jquery for submit the form?! I want to submit the form without button submit type, but when i click on ok for confirmation submit doesn't work.

@model WebApplication2.Models.Product
<div class="well">
    <h3>
        <strong>@Model.Name</strong>
    </h3>
    <button id="@Model.ProductID" class="btn btn-success btn-sm pull-right">
        Use
    </button>
    <span class="lead">
        <br />
        @Model.NumberLine
    </span>
    @using (Html.BeginForm("AddToUserProducts", "Home", new { ReturnUrl = ViewContext.HttpContext.Request.QueryString != null ? $"{ViewContext.HttpContext.Request.Path}{ViewContext.HttpContext.Request.QueryString}" : ViewContext.HttpContext.Request.Path.ToString() }, FormMethod.Post, new { id = Model.ProductID, role = "form" }))
    {
        @Html.AntiForgeryToken()
        @Html.HiddenFor(m => m.ProductID)
    }
</div>

 <script type="text/javascript"> $(document).ready(function () { $("button#@Model.ProductID").click(function () { var temp = Number($("#userNumberLimit").val()) + @(Convert.ToInt32(Model.NumberLine)); if (temp <= 1000000) { if (confirm("Are You Sure?\\nThis will be evaluated in your daily limitation.")) { $("form#@Model.ProductID").submit(); } } else { alert('You have reached daily limitation.'); } }); }); </script> 

Answer 1

You need to store the c# model value inside the javascript variable before using it in the script.

var model = @Html.Raw(Json.Encode(Model));
<script type="text/javascript">
                $(document).ready(function () {
                    $("button#"+model.ProductID).click(function () {
                        var temp = Number($("#userNumberLimit").val()) + @(Convert.ToInt32(Model.NumberLine));
                        if (temp <= 1000000)
                        {
                            if (confirm("Are You Sure?\nThis will be evaluated in your daily limitation."))
                            {
                                $("form#"+model.ProductID).submit();
                            }
                        }
                        else
                        {
                            alert('You have reached daily limitation.');
                        }
                    });
                });
</script>

Answer 2

JQuery could not find the element with a selector: form#123 .

From jquery document:

id selector

Description: Selects a single element with the given id attribute.

version added: 1.0jQuery( "#id" ) id: An ID to search for, specified via the id attribute of an element.

For id selectors, jQuery uses the JavaScript function document.getElementById(), which is extremely efficient. When another selector is attached to the id selector, such as h2#pageTitle, jQuery performs an additional check before identifying the element as a match.

For more info about jQuqery ID selector, please reference:

https://api.jquery.com/id-selector/

---

For the selector $('form#123') :

JQuery will first find the element with Id: 123 . Then it will check if it is a form .

Now before the form , there is another element with Id: 123 , and it is a button. jQuery don't think that the result matches your selector.

<button id="123" class="btn btn-success btn-sm pull-right">
        Use
</button>
<form id="123">
    ...
</form>

So jQuery can not find your form.

Chang your form Id from Model.ProductID to "myForm" + Model.ProductID .

Which means you need to change your code to:

new { id = "myform" + Model.ProductID, role = "form" }

 $("form#myform@Model.ProductID").submit();

Answer 3

<script type="text/javascript">
                $(document).ready(function () {
                    $("#ProductID").click(function () {
                        var temp = Number($("#userNumberLimit").val()) + @(Convert.ToInt32(Model.NumberLine));
                        if (temp <= 1000000)
                        {
                            if (confirm("Are You Sure?\nThis will be evaluated in your daily limitation."))
                            {
                                $("#@Model.ProductID").submit();
                            }
                        }
                        else
                        {
                            alert('You have reached daily limitation.');
                        }
                    });
                });
</script>