Как открыть модальную кнопку «Отправить» на основе выбранных параметров формы и завершить отправку?

Question

Прежде всего, я очень мало знаю о рубине или рубине на рельсах.Я только кодировал несколько лет, мой язык выбора был python.Я создал несколько приложений, и моя команда разработчиков решила, что я должен начать помогать с нашим стеком рельсов, поэтому я начал его использовать.Прошу прощения за мое незнание заранее.

Итак, у меня есть форма на наших форумах, в которой указана каждая группа, в которой находится пользователь, и раскрывающийся список настроек электронной почты для каждой группы.Пользователь выбирает, какие параметры он хочет отправить, а затем у меня есть функция в контроллере разрешений, которая обновляет БД с помощью выбора и перенаправляет обратно на домашнюю страницу.

Я хотел бы добавить модальное значение, так что еслиПользователь выбирает opt-out как любой выбор, я могу открыть модальный и отобразить сообщение.Если ваш пользователь выбирает «ОК», я бы хотел, чтобы модал закрылся, а отправка произошла как есть.Если пользователь нажимает «Отмена», я бы хотел, чтобы модал закрывался без отправки, чтобы пользователь мог изменить нужные параметры и отправить снова.

Пока что я добавил модал в html, используя руководство по начальной загрузке и кнопку отправки.Теперь модальное окно открывается на любой выбор на секунду или две, а кнопка «Отправить» перенаправляет страницу.Я предполагаю, что мне нужно немного js, чтобы это произошло так, как я хочу.Также мы используем haml.

.row
  .col-md-9
    %h4 My Groups
  .col-md-3
    %h4 Email Preferences
    %p Fake text for email pref explanations

.space
.row
  = form_with(url: update_collection_permissions_path, method: :put, local: true, html: {id: :email }) do |f|

    = will_paginate @discussion_groups, class: "digg_pagination"
    -if @discussion_groups.any?
      -@discussion_groups.each do |discussion_group|
        .col-md-9
          .panel.panel-default
            .panel-body
              .row
                .col-md-9
                  .row
                    -if current_user.admin?
                      %span.blue-text #{view_discussion_group(discussion_group)}     
                      {destroy_discussion_group_link_for(discussion_group)}

                    -elsif discussion_group.admin_role.users.include?(current_user)
                      %span.blue-text #{view_discussion_group(discussion_group)}     

                    -else
                      %span.blue-text #{view_discussion_group(discussion_group)}     
                      -#{contributor_link_for(discussion_group)}  
              .row
                .body-text
                  =discussion_group.description

        .col-md-3
          =discussion_group.name
          -selected = discussion_group.permission_for_user(current_user)
          =f.select("permissions[#{selected.id}]", options_for_select([['Daily digest', 'daily_digest'], ['Opt-out', 'opt-out'], ['Individual', 'individual']], selected.email_preference), {}, class: 'form-control')
    -else
      .row
        You are not subscribed to any discussion groups.

    .col-md-9

    .col-md-3
      .buttonrow
        =link_to('Cancel', root_path, class: 'btn btn-default btn-lg',:rel=>"tooltip",:title=>"Return to previous page")
        =f.submit('Update', class: 'btn btn-default btn-lg','data-toggle'=>"modal", 'data-target'=>"#myModal" )

#myModal.modal.fade{:role => "dialog", :tabindex => "-1"}
  .modal-dialog{:role => "document"}
    .modal-content
      .modal-header
        %button.close{"aria-label" => "Close", "data-dismiss" => "modal", :type => "button"}
          %span{"aria-hidden" => "true"}
        %h4.modal-title Modal title
      .modal-body
        %p One fine body
      .modal-footer
        %button.btn.btn-default{"data-dismiss" => "modal", :type => "button"} Close
        %button.btn.btn-primary{:type => "button"} OK

Так что я хочу, чтобы модальное окно открывалось только тогда, когда выбрано выбранное значение, а закрывалось и отправлялось, если пользователь выбрал ok.Если пользователь не выбрал отказ, я хочу отправить форму.Любая помощь с благодарностью.

Answer 1

Хорошо, так что я наконец-то понял это для всех, у кого есть эта проблема.То, что я хотел, было модальным всплывающим окном, если пользователь пытался отказаться от настроек электронной почты при отправке формы.Если они все еще хотят отказаться, нажатие кнопки в модале должно передать изменения контроллеру рельсов.

1. Я изменил идентификатор формы, как предложено

   form_with(url: update_collection_permissions_path, method: :put, local: true, html: 
   {id: :'form-email-pref' }) do |f|
   

2. Я добавил несколько js в форму, чтобы получить каждое из выбранных значений в массиве.Затем я перебираю каждое из значений и, если оно совпадает с отказом, я запрещаю отправку по умолчанию и показываю модель.В противном случае он должен отправляться как обычно.

   $("#form-email-pref").on('submit', function (event) {
   var selected = $('select :selected');
   $.each(selected, function(index, x) {
       if (x.value == 'opt-out') {
           event.preventDefault();
           $("#myModal").modal('show');
              }
   
           });
   
      });
   

3. Чтобы получить модальную кнопку для отправки внешней формы, я добавил к ней несколько js.Я использовал .off (), чтобы отключить отправку из второго шага.В противном случае он создается как цикл, потому что выбранная опция все еще отключена, но мы уверены, что пользователь теперь хочет отказаться.Также мы хотим удалить модальные в этой точке.

   $('#okButton').on('click', function (e) {
       $("#form-email-pref").off('submit')
       $("#form-email-pref").submit();
       $('#myModal').modal('hide');
   });
   

4. И наконец для кнопок в модале.Кнопка отмены отключит и обновит страницу, чтобы пользователь мог изменить параметры.Кнопка OK передаст форму соответствующему контроллеру, который обработает все остальное.

   %button.btn.btn-default{"data-dismiss" => "modal", :type => 
   "button",:onClick=>"window.location.reload()"} Close
   #okButton.button.btn.btn-primary{:type => "submit"}OK
   

Конечно, есть лучший способ сделать это, но учитывая, что я не знаю рельсы.Это достаточно хорошо для меня, так как служит цели.Спасибо всем за помощь.

Answer 2

Да, вам нужно несколько js, чтобы это произошло.В приведенном ниже коде будет использоваться библиотека jQuery (так как она используется загрузчиком в качестве зависимости)

Форма имеет идентификатор email, я бы посоветовал вам использовать лучшее имя для идентификатора, например form-purpose-of-the-form Для простоты япереименую идентификатор формы в form-email

= form_with(url: update_collection_permissions_path, method: :put, local: true, html: {id: 'form-email' }) do |f|

Шаг 1. Удалите код для запуска модального загрузчика с кнопки

=f.submit('Update', class: 'btn btn-default btn-lg')

Шаг 2. Напишите некоторый javascript для предотвращенияотправьте форму и откройте вместо этого модальное, когда наше условие пройдет, иначе позвольте ему отправить

$("#form-email").on('submit', function(event){
  // Considering your select box has an id called `x` you can first
  // check its value and then decide to open the modal
  var selected_value = $("#x").val()

  if(selected_value === 'opt-out'){
    event.preventDefault();  //Prevents form submission or the default event's action
    $("#myModal").modal('open'); // Open the modal though javascript
  }
})

Шаг 3. Добавьте код, чтобы ваша модальная кнопка отправила форму

.modal-footer
    %button.btn.btn-default{"data-dismiss" => "modal", :type => "button"} Close
    %button.btn.btn-primary{:type => "button", :form => "form-email"} OK

ПустьЯ знаю, сработало ли это для вас, или у вас возникли некоторые проблемы.