单击C＃和jQuery的提交按钮时，表单不提交

Question

I append my select option from database table. Select option has two type

1. scalar
2. event

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 (alarm, reset) so that user cannot inset values in it.

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.

Can you please help?

Here is my code

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(as i have to hide or show alarm or reset fields respectively)

<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

The problem is most likely your inputs for alarm and reset . If type is event , they are hidden and will most likely hold no value. But since they are required, the form will not submit until that error is resolved.

So you can either remove the required attribute from those 2 input fields, populate them with default values or use novalidate in your form tag. This disables form validation. You'd have to validate your inputs by hand in 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 />

as you're having required attribute in your input element, the validation is getting triggered and not letting you submit the form.

i would suggest you to do a validation on jquery on submit instead of using default html5 validation