javascript - 如何使用放大弹出窗口根据选择显示表单提交的结果

Question

好的，我的表单有 3 个单选按钮、一个选择下拉菜单和一个提交按钮。我已准备好 HTML，但在使用放大弹出窗口根据所选选项打开结果时遇到问题。这是我正在使用的 HTML 和 JQuery:

           <form class="dnt-tool" action="#popup" name="dnt" id="dnt" method="POST">
               <div class="dnt-overlay">
                    <input type="radio" name="gender" id="male"><label for="male">Male</label>
                    <input type="radio" name="gender" id="female"><label for="female">Female</label>
                    <input type="radio" name="gender" id="all" checked><label for="all">All</label>
                    <select>
                        <option>Select a Category</option>
                        <option>Catgeory 1</option>
                        <option>Catgeory 2</option>
                        <option>Category 3</option>
                    </select>
               </div><!-- end of dnt-overlay -->
               <div class="dnt-btn">
                   <button type="submit" id="submit">Show Names</button>
               </div><!-- end of dnt btn -->
         </form>

这是 JQuery:

              $(document).ready(function() {
                  $('#dnt').submit(function(){
                      $.ajax({
                          data: $(this).serialize, //get the form data 
                          type: $(this).attr('method'),
                          url: $(this).attr('action'), //the file or div to call
                          success: function(response){
                              $('#submit').magnificPopup({
                                   type: 'inline',
                                   modal: true
                              });
                         }
                    });//ajax
              });//submit function

            });//JQuery

关于缺少什么有什么想法吗？哦，如果您不熟悉的话，这里是放大弹出窗口的链接:http://dimsemenov.com/plugins/magnific-popup/

Answer 1

正如我在评论中所说，我不认为这里有必要使用 Ajax，因为你可以在这里实现异步 JS，而没有“数据处理”。

最佳解决方案:

我认为我们可以同意上面的解决方案并不是那么好，因为代码不是“动态的”并且会变得很长。

所以这是一个完美的解决方案:

在 html 中，您可以通过以下方式创建一个带有 id 的 div :radioID_modal。

举个例子:

<div id="male_modal" class="custom-modal mfp-hide">
  Custom modal for male
</div>

<div id="female_modal" class="custom-modal mfp-hide">
  Custom modal for female
</div>

<div id="all_modal" class="custom-modal mfp-hide">
  Custom modal for female
</div>

这是一个更简单的 JS:

$('#dnt').submit(function(e){
  e.preventDefault(); // We don't need to send the form, because it all local

  // We get the ID of the checked radio button
  var checkedRadio = $('[name="gender"]:checked').attr('id');

  $.magnificPopup.open({ // Call mfp on jQ object
      items: {
        src: '#' + checkedRadio + '_modal',
        type: 'inline'
      }
        });
});

我们从单选按钮获取id，并打开一个id为# ID _modal的模式。这就是您需要的所有 JS，没有 if 或多个 magnificPopup 声明。

这是一个Fiddle

其他解决方案

预制模态

您可以制作预制模态并在需要时调用它们。

<div id="option1" class="custom-modal mfp-hide">
  Custom modal for male
</div>

现在，当提交表单时，我们检查数据。有很多方法可以做到这一点。

$('#dnt').submit(function(e){
  e.preventDefault(); // We don't need to send the form, because it all local
  if($('#male').is(':checked')) { // Check if male is checked
        $.magnificPopup.open({ // Call mfp on jQ object
      items: {
        src: '#option1',
        type: 'inline'
      }
        });
  }
});

这是一个工作 JSFiddle

动态模态框

您可以动态构造模态，如果数据更改很少，这非常有用。

您只需将 src 替换为以下元素:

$('#dnt').submit(function(e){
  e.preventDefault(); // We don't need to send the form, because it all local
  if($('#male').is(':checked')) { // Check if male is checked
        $.magnificPopup.open({ // Call mfp on jQ object
      items: {
        src: $('<div>Dynamically created element</div>'), // Create it now
        type: 'inline'
      }
        });
  }
});