Триггер события, когда выбран вход (флажки и выпадающий список), я хотел динамически добавить флажок после выбора программы - PullRequest
Новая
       1

Триггер события, когда выбран вход (флажки и выпадающий список), я хотел динамически добавить флажок после выбора программы

0 голосов
/ 24 марта 2020

введите описание изображения здесь У меня есть DropDownList и флажки в моем проекте MVC5. Я хочу собрать данные перед отправкой на контроллер через 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');
      }
    })
  }
}

1 Ответ

0 голосов
/ 24 марта 2020

Другой вариант - привязать событие к отправке формы;

  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>
...