选择输入（复选框和下拉列表）时的事件触发，我想在选择程序后动态添加复选框

Question

enter image description here我的 MVC5 项目中有一个 DropDownList 和复选框。我想先收集数据，然后再通过 AJAX 提交给控制器。我可以使用什么样的事件来代替按钮onclick="SaveList"？现在我用这个按钮提交

<div class="form-group pb-3" id="ddlEvent">
  @Html.Label("Event", htmlAttributes: new { @class = "control-label font-weight-bold" }) 
  @Html.DropDownList("EventID", new SelectList(Model.Events, "EventID", "DateDisplayCampus"), "Select Event", new { @class = "form-control" }) 
  @Html.ValidationMessage("EventID", "", new { @class = "text-danger" })
</div>
@foreach (var item in Model.Programs) {
  <p class="checkbox w-50 d-inline-block" id="programList">
    <input type="checkbox" name="@item.ProgramName" id="program_@item.ProgramName" />
    <label for="program_@item.ProgramName">@item.ProgramName</label> @*
    <input name="@item.ProgramName" type="hidden" value="false" />*@
  </p>
}

<button type="button" class="btn btn-danger" onclick="SaveList()">Save</button>

$(document).ready(function() {});

var SaveList = function() {
  var SESSION_TIMES = [];

  $("#programList input[id^=program]").each(function(index, val) {
    debugger

    var session = {};
    var checkMajor = $(val).attr("name");
    var isChecked = $(this).prop("checked");
    if (isChecked) {
      session = {
        Major: checkMajor,
        EventID: $("#EventID option:selected").val() //get EventId from dropdownlist
      }
      SESSION_TIMES.unshift(session); //add to the beginning of an array
    }

    debugger
  });

  // Ending of $("#programList input[id^=program]").each
  //atleast if the sessiontTims array has an item, the going to ajax set the array to controller
  if (SESSION_TIMES != 0) {
    $.ajax({
      url: "/SESSION_TIMES/SaveSessions", //controller/medthod
      type: "POST",
      data: {
        list: JSON.stringify(SESSION_TIMES)
      },
      datatype: "json",
      success: function(response) {
        alert("Session saved")
        window.location.href = '@Url.Action("Index", "SESSION_TIMES")';
      },
      error: function() {
        alert('No Valid Data');
      }
    })
  }
}

Answer 1

另一种选择是将事件绑定到表单提交；

1. 将其全部包含在form 标签内，我使用了id myForm
2. 用type="submit"替换按钮
3. 将SaveList 转为函数
4. 然后使用$("#myForm").on("submit") 事件。

<form id="myForm">
   <div class="form-group pb-3" id="ddlEvent">
      @Html.Label("Event", htmlAttributes: new { @class = "control-label font-weight-bold" })
      @Html.DropDownList("EventID", new SelectList(Model.Events, "EventID", "DateDisplayCampus"), "Select Event", new { @class = "form-control" })
      @Html.ValidationMessage("EventID", "", new { @class = "text-danger" })
   </div>
   @foreach (var item in Model.Programs)
   {
      <p class="checkbox w-50 d-inline-block" id="programList">
         <input type="checkbox" name="@item.ProgramName" id="program_@item.ProgramName" />
         <label for="program_@item.ProgramName">@item.ProgramName</label>
      @*<input name="@item.ProgramName" type="hidden" value="false" />*@
      </p>
   }             
   <button type="submit" class="btn btn-danger">Save</button>
</form>

<script src="~/Scripts/jquery-3.4.1.min.js"></script>

<script>
   $(document).ready(function () {
      $("#myForm").on("submit",function(e){
         e.preventDefault(); // this will stop the regular form redirect POST
         SaveList(); // call SaveList
      })
   });   


   // turn SaveList to a function    
   function SaveList() {
             var SESSION_TIMES = [];
            // // checkboxElement

            $("#programList input[id^=program]").each(function (index, val) {
               debugger

                 var session = {};
                //attr Id is a name of programName
                 var checkMajor = $(val).attr("name");

                 var isChecked = $(this).prop("checked");

                if (isChecked) {

                    session = {

                        Major : checkMajor, 
                        EventID: $("#EventID option:selected").val()  //get EventId from dropdownlist

                    }
                    SESSION_TIMES.unshift(session); //add to the beginning of an array
                }


             debugger
            }); 
          // Ending of $("#programList input[id^=program]").each
            //atleast if the sessiontTims array has an item, the going to ajax set the array to       controller
            //debugger
        if (SESSION_TIMES != 0) {
            $.ajax({
                url: "/SESSION_TIMES/SaveSessions",  //controller/medthod
                type: "POST",
                data: { list: JSON.stringify(SESSION_TIMES) },
                datatype: "json",
                success: function (response) {
                    alert("Session saved")
                    window.location.href = '@Url.Action("Index", "SESSION_TIMES")';
                },
                error: function () {
                    alert('No Valid Data');
                }
            })
        } //Ending of if (SESSION_TIMES != 0)

    } //Ending of SaveList


  </script>