当我单击它的提交按钮时，表单没有提交 C# & jQuery

Question

我附加了数据库 table 中的 select 选项。 Select选项有两种类型

标量
事件

If the option type is scalar, I need to show 2 input fields (alarm, reset) so that user can inset values in it and when the option type is event I need to hide 2 input fields （警报，重置）以便用户无法在其中插入值。

When the option type is scalar, my form saves successfully but when option type is event form submit button not going to perform any action.

你能帮忙吗？

这是我的代码

HTML

<div class="row">
            <form method="post" action="/Home/SaveTriggers" class="form-inline">
                <div class="col-md-12">
                    <div class="col-md-2">
                        <select name="sourceId" class="select2" required>
                            @foreach (var i in ViewBag.opt)
                            {
                                <option value="@i.Id,@i.name,@i.type" id="opt">@i.name</option>

                            }
                        </select>
                    </div>

                    <div class="col-md-2">
                        <input id="alarm" name="alarm" type="text" placeholder="alarm" style="display:none" required />
                    </div>
                    <div class="col-md-2">
                        <input id="reset" name="reset" type="text" placeholder="reset" style="display:none" required />
                    </div>
                    <div class="col-md-1">
                        <input type="text" name="delay" id="delay" placeholder="delay" required />
                    </div>
                    <div class="col-md-3">
                        <select class="address2" name="action" id="select" required>
                            <option selected disabled>Select alarm action</option>
                            <option>John Doe, Switch on warning light</option>
                            <option>John Doe</option>
                            <option>Do anything</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button id="delete2" type="button" class="btn btn-default">Delete</button>
                    </div>


                    <button class=" add btn btn-primary" type="submit">Add</button>
                </div>
            </form>
        </div>

Jquery（因为我必须分别隐藏或显示警报或重置字段）

<script>
        $(document).ready(function () {
            $(".select2").change(function () {
                var text = $(".select2 option:selected").text();
                var val = $(".select2 option:selected").val();
                var res = val.split(",");
                var type = res[2];

                if (type == "scalar") {

                    document.getElementById("reset").style.display = "block";
                    document.getElementById("alarm").style.display="block"


                }
                else if(type=="event") {

                    document.getElementById("reset").style.display = "none";
                    document.getElementById("alarm").style.display = "none"
                    var alarm = document.getElementById("alarm");


                }
            });
        });
    </script>

Answer 1

问题很可能是您对 alarm 和 reset 的输入。如果类型是 event，它们是隐藏的并且很可能没有任何价值。但由于它们是必需的，因此在解决该错误之前不会提交表单。

因此您可以从这 2 个输入字段中删除 required 属性，用默认值填充它们，或者在您的表单标记中使用 novalidate。这将禁用表单验证。您必须在 javascript.

中手动验证您的输入

<div class="col-md-2">
    <input id="alarm" name="alarm" type="text" placeholder="alarm" style="display:none" />
</div>
<div class="col-md-2">
      <input id="reset" name="reset" type="text" placeholder="reset" style="display:none" />
</div>

Answer 2

 <div class="col-md-2">
                    <input id="alarm" name="alarm" type="text" placeholder="alarm" style="display:none" required />
                </div>
                <div class="col-md-2">
                    <input id="reset" name="reset" type="text" placeholder="reset" style="display:none" required />

由于您在 input 元素中有 required 属性，验证被触发并且不允许您提交表单。

我建议您在提交时对 jquery 进行验证，而不是使用默认的 html5 验证

当我单击它的提交按钮时，表单没有提交 C# & jQuery

Form does not submit when I click submit button of it C# & jQuery

c#

jquery

asp.net-mvc-5