其他解决方案

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中，您可以通过以下方式创建div id： 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 _modal的模式。这就是你需要的所有JS，没有ifs，也没有多个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'
      }
        });
  }
});

如何使用大量弹出窗口显示基于选择的表单提交结果

1 个答案:

最佳解决方案：

其他解决方案

预制模态

动态模态