使用 .trigger('submit') 时 Html.BeginForm 未提交

Posted 2023-05-09

【中文标题】使用 .trigger(\'submit\') 时 Html.BeginForm 未提交

【英文标题】：Html.BeginForm not submitting when using .trigger('submit')使用 .trigger('submit') 时 Html.BeginForm 未提交

【发布时间】：2021-06-29 14:37:41

【问题描述】：

所以我使用剃须刀视图和 JS/jQuery。我有一个表格，我根本无法按照我需要的方式工作。根据我的调试，我根本没有碰到控制器。我认为表单从未真正提交过。我觉得下面的解决方案应该有所帮助，但我只是不明白为什么它不是。任何帮助将不胜感激。

<script language="javascript" type="text/javascript">
    function CheckSubmit() 
       // do some stuff

        $('#myForm').trigger('submit');      
        return true;
    

    function htmlEncode(value) 
        return $('<div/>').text(value).html();
    
</script>

<div id="stuff" style="display: none">
    <div id="otherStuff">
        @using (Html.BeginForm("MyControllerMethod", "MyController", FormMethod.Post, new  id = "myForm" ))
        
            @Html.HiddenFor(x => x.UserItem.UserId)
            @Html.HiddenFor(x => x.UserCert.CertificateSubject)
            @Html.HiddenFor(x => x.comments)
            @Html.HiddenFor(x => x.IsReactivationRequest)

            <div>
                <a id="btnHideDetails">
                    <span>Close</span>
                </a>
            </div>

            // displays some information
 
            <div style="padding-bottom: 15px">
                @Html.RadioButtonFor(x => x.radioBtnValue, "approve")Approve <br />

                @Html.RadioButtonFor(x => x.radioBtnValue, "reject")Reject <br />
            </div>

            <div id="txtComments" style="display: none; padding-bottom: 15px;">
                <div>Comments:</div>
                <div>
                    @(Html.TextArea("commentBox", new  maxlength = 2000, cols = 70, rows = 5 ))
                </div>
            </div>
        
    </div>
    <div>
        <div id="btnSubmitDiv" style="display: none;">
            <input id="btnSubmit" onclick="return CheckSubmit();" type="submit" value="Submit"/>
        </div>
    </div>
</div>

现在所有的 js 都包含在 cshtml 文件中。我知道还有其他提交此表单的方法，但由于某种原因，此特定解决方案不起作用，我需要了解原因。谢谢！

【问题讨论】：

假设，无论出于何种原因，您都不能将提交按钮放在表单中（您真的应该是这样，以获得很多可访问性/fallback 原因）然后在本机表单引用上调用 submit 事件，而不是 jquery 对象：$('#myForm')[0].submit()

所以我将包含提交输入的 div 移动到表单中，但仍然得到相同的结果

【参考方案1】：

我使用以下代码，它可以工作：

查看：

<div id="stuff" >
    <div id="otherStuff">
        @using (Html.BeginForm("TestJquery", "Test", FormMethod.Post, new  id = "myForm" ))
        
            
            <input name="UserId" />

            <div>
                <a id="btnHideDetails">
                    <span>Close</span>
                </a>
            </div>

            // displays some information

            <div style="padding-bottom: 15px">
              
            </div>

            <div id="txtComments" style="display: none; padding-bottom: 15px;">
                <div>Comments:</div>
                <div>
                    @(Html.TextArea("commentBox", new  maxlength = 2000, cols = 70, rows = 5 ))
                </div>
            </div>
        
    </div>
    <div>
        <div id="btnSubmitDiv">
            <input id="btnSubmit" onclick="CheckSubmit()" type="button" value="Submit" />
        </div>
    </div>
</div>

js:

<script language="javascript" type="text/javascript">
        function CheckSubmit() 
            // do some stuff

            $('#myForm').trigger('submit');
        

       
    </script>

动作：

[HttpGet]
        public IActionResult TestJquery() 
            return View();
        
        [HttpPost]
        public IActionResult TestJquery(string UserId)
        
            return View();
        

结果：