时间戳

首页 > 解决方案 > 使用 ajax 从弹出窗口发布时，输入值始终为空

javascript - 使用 ajax 从弹出窗口发布时，输入值始终为空

问题描述

我有一个奇怪的问题，我使用 ajax 发布的所有字段都是空的，但是当我在 jsfiddle 中发布相同的代码时它工作正常。

我唯一能想到的是，这可能是因为我从一个弹出窗口（featherlight 插件）发帖。

我的代码：

<script>
$( document ).ready(function() {
  // Show extra fields when selecting option from dropdown list
  $('#offertetijden').change(function() {
     // console.log($(this).val())
     $('.hiddenoffertefields').slideDown('fast');
  });
  // Post values from new fields to php script
  $("#offertepopup").on("click",".offertebutton",function(){
    event.preventDefault();
    var $tijd = $('#offertetijden').val();
    var $volwassenen = $("input[name='volwassenen']").val();
    var $tieners = $('#tieners').val();
    var $kinderen = $('#kinderen').val();
    var $minis = $('#minis').val();
    var $babys = $('#babys').val();
    var $mailadres = $('#mailadres').val();
    url = 'includes/offertescript.php';

    var posting = $.post(url, {
      tijd: $tijd,
      volwassenen: $volwassenen,
      tieners: $tieners,
      kinderen: $kinderen,
      minis: $minis,
      babys: $babys,
      mailadres: $mailadres
    });

    posting.done(function( data ) {
     $( ".offerteresult" ).empty().slideDown('fast').append( data );
    });
  });
});
</script>

我的 HTML：

<div class="lightbox offertepopup" id="offertepopup">
  <span class="toolspan">Vraag een offerte aan</span>
  <form class="" action="includes/offertescript" method="post">
    <select id="offertetijden">
      <option value="none" disabled selected>Maak uw keuze</option>
      <optgroup label="Ontbijt">
        <option value="ont_1">Ma t/m Vr / 09:00 - 11:30 / 0,5 uur</option>
        <option value="ont_2">Ma t/m Vr / 09:00 - 11:30 / 1 uur</option>
        <option value="ont_3">Ma t/m Vr / 09:00 - 11:30 / 1,5 uur</option>
        <option value="ont_4">Ma t/m Vr / 09:00 - 11:30 / 2 uur</option>
        <option value="ont_5">Ma t/m Vr / 09:00 - 11:30 / 2,5 uur</option>
        <option value="ont_6">Za - Zo / 09:00 - 11:30 / 0,5 uur</option>
        <option value="ont_7">Za - Zo / 09:00 - 11:30 / 1 uur</option>
        <option value="ont_8">Za - Zo / 09:00 - 11:30 / 1,5 uur</option>
        <option value="ont_9">Za - Zo / 09:00 - 11:30 / 2 uur</option>
        <option value="ont_10">Za - Zo / 09:00 - 11:30 / 2,5 uur</option>
      </optgroup>

      <optgroup label="Lunch">
        <option value="lun_1">Ma t/m Vr / 12:00 - 15:00 / 0,5 uur</option>
        <option value="lun_2">Ma t/m Vr / 12:00 - 15:00 / 1 uur</option>
        <option value="lun_3">Ma t/m Vr / 12:00 - 15:00 / 1,5 uur</option>
        <option value="lun_4">Ma t/m Vr / 12:00 - 15:00 / 2 uur</option>
        <option value="lun_5">Ma t/m Vr / 12:00 - 15:00 / 2,5 uur</option>
        <option value="lun_6">Ma t/m Vr / 12:00 - 15:00 / 3 uur</option>
        <option value="lun_7">Za - Zo / 12:00 - 15:30 / 0,5 uur</option>
        <option value="lun_8">Za - Zo / 12:00 - 15:30 / 1 uur</option>
        <option value="lun_9">Za - Zo / 12:00 - 15:30 / 1,5 uur</option>
        <option value="lun_10">Za - Zo / 12:00 - 15:30 / 2 uur</option>
        <option value="lun_11">Za - Zo / 12:00 - 15:30 / 2,5 uur</option>
        <option value="lun_12">Za - Zo / 12:00 - 15:30 / 3 uur</option>
        <option value="lun_13">Za - Zo / 12:00 - 15:30 / 3,5 uur</option>
      </optgroup>

      <optgroup label="Diner">
        <option value="din_1">Ma t/m Do / 17:00 - 22:00 / 1 uur</option>
        <option value="din_2">Ma t/m Do / 17:00 - 22:00 / 1,5 uur</option>
        <option value="din_3">Ma t/m Do / 17:00 - 22:00 / 2 uur</option>
        <option value="din_4">Ma t/m Do / 17:00 - 22:00 / 2,5 uur</option>
        <option value="din_5">Ma t/m Do / 17:00 - 22:00 / 3 uur</option>
        <option value="din_6">Ma t/m Do / 17:00 - 22:00 / 3,5 uur</option>
        <option value="din_7">Ma t/m Do / 17:00 - 22:00 / 4+ uur</option>
        <option value="din_8">Vr t/m Zo / 17:00 - 22:00 / 1 uur</option>
        <option value="din_9">Vr t/m Zo / 17:00 - 22:00 / 1,5 uur</option>
        <option value="din_10">Vr t/m Zo / 17:00 - 22:00 / 2 uur</option>
        <option value="din_11">Vr t/m Zo / 17:00 - 22:00 / 2,5 uur</option>
        <option value="din_12">Vr t/m Zo / 17:00 - 22:00 / 3 uur</option>
        <option value="din_13">Vr t/m Zo / 17:00 - 22:00 / 3,5 uur</option>
        <option value="din_14">Vr t/m Zo / 17:00 - 22:00 / 4+ uur</option>
      </optgroup>
    </select>

    <div class="hiddenoffertefields">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <span class="toolspanbot">Hoe is u groep verdeeld?</span>
          </div>
          <div class="col-md-6">
            <label class="offertelabel">Aantal volwassenen:</label>
          </div>
          <div class="col-md-6">
            <input type="text" id="volwassenen" name="volwassenen" placeholder="Vul in">
          </div>

          <div class="col-md-6">
            <label class="offertelabel">Aantal kinderen (6-11 jaar):</label>
          </div>
          <div class="col-md-6">
            <input type="text" id="kinderen" name="kinderen" placeholder="Vul in">
          </div>

          <div class="col-md-6">
            <label class="offertelabel">Aantal kinderen (6-11 jaar):</label>
          </div>
          <div class="col-md-6">
            <input type="text" id="kinderen" name="kinderen" placeholder="Vul in">
          </div>

          <div class="col-md-6">
            <label class="offertelabel">Aantal mini's (4-7 jaar):</label>
          </div>
          <div class="col-md-6">
            <input type="text" id="minis" name="mini's" placeholder="Vul in">
          </div>

          <div class="col-md-6">
            <label class="offertelabel">Aantal baby's (0-4 jaar):</label>
          </div>
          <div class="col-md-6">
            <input type="text" id="babys" name="baby's" placeholder="Vul in">
          </div>
          <div class="col-md-12">
            <span class="toolspanbot">Uw gegevens</span>
          </div>
          <div class="col-md-6">
            <label class="offertelabel">Voornaam:</label>
          </div>
          <div class="col-md-6">
            <input type="text" id="mailadres" name="mailadres" placeholder="Vul in">
          </div>

          <div class="col-md-6">
            <label class="offertelabel">Achternaam:</label>
          </div>
          <div class="col-md-6">
            <input type="text" id="mailadres" name="mailadres" placeholder="Vul in">
          </div>

          <div class="col-md-6">
            <label class="offertelabel">Bedrijfsnaam (optioneel):</label>
          </div>
          <div class="col-md-6">
            <input type="text" id="mailadres" name="mailadres" placeholder="Vul in">
          </div>

          <div class="col-md-6">
            <label class="offertelabel">Telefoonnummer:</label>
          </div>
          <div class="col-md-6">
            <input type="text" id="mailadres" name="mailadres" placeholder="Vul in">
          </div>

          <div class="col-md-6">
            <label class="offertelabel">Opmerkingen:</label>
          </div>
          <div class="col-md-6">
            <input type="textarea" class="opmerkingofferte" id="mailadres" name="mailadres" placeholder="Vul in">
          </div>

          <div class="col-md-12">
            <div class="infobox">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
                <path fill="#2684E0" fill-rule="nonzero" d="M9.99957672 0C15.5216931 0 20 4.47746032 20 9.99957672 20 15.5216931 15.5216931 20 9.99957672 20 4.47746032 20 0 15.5216931 0 9.99957672 0 4.47746032 4.47746032 0 9.99957672 0zM9.14 8.22v7.49h1.82V8.22H9.14zM10.036 5c-.29866816 0-.54599902.10266564-.742.308S9 5.77466508 9 6.092c0 .30800154.09799902.56466564.294.77.19600098.20533436.44333184.308.742.308.2986682 0 .545999-.10266564.742-.308.196001-.20533436.294-.46199846.294-.77 0-.31733492-.097999-.57866564-.294-.784-.196001-.20533436-.4433318-.308-.742-.308z"></path>
              </svg>
              <span>
                Wanneer u met 25 of meer personen komt, kijken wij graag de beschikbaarheid voor u na. De aanvraag voor een reservering vanaf 25 personen kan verstuurd worden naar <a class="infoboxlink" href="mailto:spijkenisse@website.nu">spijkenisse@website.nu</a> of telefonisch via 0181-769000.
              </span>
            </div>
          </div>
        </form>
      </div>
    </div>
    <button type="button" name="button" class="offertebutton">Vraag offerte aan</button>
    <div class="popupfooter">
      <a target="_blank" href="https://www.website.nl">
        <img src="assets/images/snm_dark.png" alt="">
      </a>
    </div>

    <div class="offerteresult">
    </div>
  </div>
</div>

我要发布的字段已加载（显示：无），并在有人从下拉列表中选择值时显示。所以不应该是 jQuery 无法找到这些字段。

jQuery 本身可以工作，我可以在我的网络选项卡中看到这些字段已发布到我的脚本中，除了这些字段都是空的。

如您所见，我尝试了两种查找价值的方法。

这

var $tijd = $('#offertetijden').val();

或这个

var $volwassenen = $("input[name='volwassenen']").val();

但两者都是空的。

标签： javascripthtmlajax

解决方案

在我看来，当您发布时，这些值还没有准备好。

用 包裹块怎么样setTimeout()？像这样，

setTimeout(function(){
   var posting = $.post(url, {
      tijd: $tijd,
      volwassenen: $volwassenen,
      tieners: $tieners,
      kinderen: $kinderen,
      minis: $minis,
      babys: $babys,
      mailadres: $mailadres
  });

  posting.done(function( data ) {
     $( ".offerteresult" ).empty().slideDown('fast').append( data );
  });
});

希望这可以帮助。

推荐阅读