Question

修改

有没有人可以给我一个表格的工作示例，包括在Magnific Popup中提交？我想我只需要一个例子来更进一步......谢谢！

由于缺乏响应能力，我尝试从Colorbox切换到Magnific Popup。图像和画廊是一种魅力，但我无法弄清楚如何使用Magnific Popup中的表单。

它应该如何运作：

用户点击链接后打开Magnific Popup。 - ＆GT;工作正常
显示一个小表单（在我的情况下：只有一个选择列表和提交按钮）并在表单下方显示当前内容（即来自数据库的某些文本或图像） - ＆gt;工作正常
当用户选择选择列表的另一个选项并提交表单时，应调用处理表单输入的PHP代码，并根据所选选项更新表单下方的内容。 - ＆GT;不起作用！
弹出窗口应保持打开状态，直到用户点击关闭图标（无页面重新加载） - ＆gt;不起作用！
我的梦想的最佳解决方案是在选择字段（onchange）中选择另一个选项后直接提交表单，从而无需提交按钮。但就目前而言，即使使用提交按钮，我也会非常乐意让事情发挥作用......！

整个过程与Colorbox完美配合，但我无法在不丢失Magnific Popup的情况下提交表单并重定向到PHP脚本本身......

下面是一些代码。是否有人可以向我展示一个工作示例代码，用于在提交和处理表单后在Magnific Popup中显示表单并替换其内容（或弹出窗口内的div的内容）？

非常感谢!!!

用于打开Magnific Popup的HTML链接：

<a class="magnificpopup_ajax" href="form_code.php">Open Form</a>

jQuery-Code（与HTML链接在同一页面上）：

$('.magnificpopup_ajax').magnificPopup({
  type: 'ajax',
  callbacks: {
    change: function() {
      console.log('Content changed');
      console.log(this.content);
    },
    updateStatus: function(data) {
      console.log('Status changed', data);
      if (data.stauts == 'ready') {
        console.log('fire mpform_submit');
        mpform_submit();
      }
    }
  }
});

function mpform_submit() {
  $('#s_xyz').change(function(){
    console.log('change function fired...');
    return false;
  });
}

form_code.php（简体）：

<?php
require_once ('functions.php');
if (isset($_POST['s_xyz']) && !empty($_POST['s_xyz'])) {
  // Form submitted
  $form_selected = htmlspecialchars($_POST['s_xyz']);
}
else {
  $form_selected = 'current';
}

// some database queries to get content based on $form_selected...
// ...

$output = '<p>Database content based on form_selected ('. $form_selected .')</p>';

// Form
$form = '
  <form id="formid" action="'. $_SERVER['PHP_SELF'] .'" method="post">
    <label for="s_xyz">your selection:</label>
    <select id="s_xyz" name="s_xyz" id="s_xyz" size="1">
      <option value="current">current content</option>
      <option value="option4">option 1</option>
      <option value="option4">option 2</option>
      <option value="option4">option 3</option>
      <option value="option4">option 4</option>
    </select>
    <input type="submit" name="Submit" value="send" />
  </form>';

// Output
echo '
  <div style="max-width:1000px; margin: 20px auto; background-color: white;">
    '. $form .'
    '. $output .'
  </div>';
?>

原始工作的Colorbox jQuery代码如下所示：

function cbox_submit() {
  $('#s_xyz').change(function(){
    $.post(
      $('#formid').attr('action'),
      $('#formid').serialize(),
      function(data){
        $().colorbox({
          html: data,
          title: '&nbsp;',
          scalePhotos: false,
          width: $('#cboxWrapper').width(),
          height: $('#cboxWrapper').height(),
          onComplete: function(){
            $('#cboxTitle').html($('#cb_CaptionTitle').html());
            cbox_submit();
          }
        });
      }
    );
    return false;
  });
}

$(document).ready(function(){
  var screenW = window.outerWidth;
  if (screenW < 880) { cbWidth = screenW - 40; }
  else { cbWidth = 840; }

  $('.colorbox_ajax').colorbox({
    width: cbWidth,
    height: 400,
    title: '&nbsp;',
    scalePhotos: false,
    onComplete:function(){
      $('#cboxTitle').html($('#cb_CaptionTitle').html());
      cbox_submit();
    }
  });
});

在Magnific Popup中显示，提交和处理表单并刷新内容

修改

0 个答案: