Входные значения всегда пустые при публикации с использованием ajax из всплывающего окна - PullRequest
Новая
       1

Входные значения всегда пустые при публикации с использованием ajax из всплывающего окна

0 голосов
/ 06 ноября 2018

У меня странная проблема, когда все поля, которые я публикую с помощью ajax, пусты, но когда я публикую один и тот же код в jsfiddle, он работает нормально.

Единственное, о чем я могу думать, это то, что это может быть потому, что я публикую сообщения из всплывающего окна (плагин перо).

Мой код: 

<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();

Но оба пусты.

Ответы [ 2 ]

0 голосов
/ 06 ноября 2018

Я нашел ответ.

По всей видимости, всплывающее окно перьевого света воссоздает DOM внутри всплывающего окна, поэтому мне пришлось переопределить параметр конфигурации, который гарантирует, что HTML внутри всплывающего окна всегда сохраняется. 

$.extend($.featherlight.defaults, {
  persist: true
});

Это исправило это для меня.

0 голосов
/ 06 ноября 2018

Мне кажется, что значения не готовы, когда вы делаете публикацию.

Как насчет упаковки блока с 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 );
  });
});

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...