主页 / 问题 / 1326147
Accepted
dukonst
Asked:2022-09-07 18:15:12 +0000 UTC2022-09-07 18:15:12 +0000 UTC

更改的选项没有传递给fancybox modal？

  • 772

有一个计算器表格。

工作的结果是以框架模式打开 Fancybox 模态窗口。

那些。用户填写表格，按钮上会生成以下类型的data-src：“/.ajax/call.p3?x1=20&x2=20&dl_long=2000”。单击按钮时，将打开一个模式窗口。

加载页面后，参数仅正确传递一次。也就是说，如果您关闭模态窗口，更改表单中的参数，单击带有更新 data-src 的按钮，则将传输第一次单击按钮时的参数。

编码：

$(document).ready(function() {
  function calcParam() {
    calc = $('.calc__form').serialize();
    $('.calc__submit').attr('data-src', '/.ajax/call.p3?' + calc);
    //alert(calc);
    console.log(calc);
    $.ajax({
      type: 'POST',
      url: '/.ajax/calc/otlivy.p3',
      data: calc,
      success: function(msg) {
        $(".calc__amount").html(msg);
      },
      error: function() {}
    });
  }

  $('.calc__form').on('input', function() {
    calcParam();
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<form method="post" class="calc__form">
  <input name="coef" value="1" type="hidden">
  <input name="xparam" value="2" type="hidden">
  <div class="calc__form--line">
    <div>
      <div class="calc__form--label">
        Длина X1:
      </div>
      <div class="calc__form--field"><input name="x1" type="text" value="20" class="onlydigits calc__form--input"><span class="mm">мм<span></span></span>
      </div>
    </div>
    <div>
      <div class="calc__form--label">
        Длина X2:
      </div>
      <div class="calc__form--field"><input name="x2" type="text" value="20" class="onlydigits calc__form--input"><span class="mm">мм<span></span></span>
      </div>
    </div>
  </div>
  <button class="btn anim calc__submit" data-type="iframe" data-fancybox="" data-src="/.ajax/call.p3">Отправить заявку</button>
</form>

在 call.p3 中，粗略地说（我只是没有 php）：

if (isset($_POST)) {
    print("x1" . $_POST['x1']);
    print("x2: " . $_POST['x2']);
}

仅显示发送的第一个参数。通过浏览器控制台，可以看到

是缓存吗？花式盒子的特点？

jquery

1 个回答

  1. Best Answer

    有趣的错误。未能获胜。如果您以不同的方式调用模态窗口，它会起作用。

    $(document).ready(function() {
  function calcParam() {
    var calc = $('.calc__form').serialize();
    $.ajax({
      type: 'POST',
      url: '/.ajax/calc/otlivy.p3',
      data: calc,
      success: function(msg) {
        $(".calc__amount").html(msg);
      },
      error: function() {}
    });
  }

  $('.calc__form').on('input', function() {
    calcParam();
  })
  
   $('.calc__form').submit(function(e){
    e.preventDefault();
    var data = $(this).serialize();     
    $.fancybox.open({src: '/.ajax/call.p3?'+data, type: 'iframe'});
   })
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<form method="post" class="calc__form">
  <input name="coef" value="1" type="hidden">
  <input name="xparam" value="2" type="hidden">
  <div class="calc__form--line">
    <div>
      <div class="calc__form--label">
        Длина X1:
      </div>
      <div class="calc__form--field"><input name="x1" type="text" value="20" class="onlydigits calc__form--input"><span class="mm">мм<span></span></span>
      </div>
    </div>
    <div>
      <div class="calc__form--label">
        Длина X2:
      </div>
      <div class="calc__form--field"><input name="x2" type="text" value="20" class="onlydigits calc__form--input"><span class="mm">мм<span></span></span>
      </div>
    </div>
  </div>
  <button class="btn anim calc__submit">Отправить заявку</button>
</form>

    • 2

相关问题