vodkabears / Remodal

No longer actively maintained.
http://vodkabears.github.io/remodal/
MIT License
2.75k stars 771 forks source link

Не работает ajax с помощью remodal #228

Closed dimensi closed 8 years ago

dimensi commented 8 years ago

Здравствуйте, спасибо за ваш замечательный и простой в использование плагин. Я использовал гугл и нашел кучу тем, где люди задавали такой же вопрос как я. Но из-за моей ограниченности в js, я не смог осилить ваши ответы. Я хочу, при отправки сообщения с помощью ajax, закрывалось окно модальное, выскакивало сообщение с alert и наконец само сообщение отправлялось. К сожалению, я не одного из этого пункта сделать не смог... Читая прошлые темы и один из ваших ответов, я понял, что я должен на закрытие формы отправлять форму. Вот, что я решил вставить. Скажу честно, даже этот код ajax отправки я скопировал с других ресурсов.

$(document).on('closing', '.remodal', function (e) {
    document.getElementById('feedback-modal').addEventListener('submit', function(evt){
      var http = new XMLHttpRequest(), f = this;
      evt.preventDefault();
      http.open("POST", "mail.php", true);
      http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      http.send("name=" + f.name.value + "&contact=" + f.contact.value);
      http.onreadystatechange = function() {
        if (http.readyState == 4 && http.status == 200) {
          alert(http.responseText + ', Сообщение отправлено успешно.\nСкоро мы с Вами свяжемся для уточнения информации.\nСпасибо !');    
          f.name.removeAttribute('value'); // очистить поле сообщения (две строки)
          f.name.value='';
        }
      }
      http.onerror = function() {
        alert('Извините, данные не были переданы');
      }
    }, false);
  // Reason: 'confirmation', 'cancellation'
  console.log('Modal is closing' + (e.reason ? ', reason: ' + e.reason : ''));
});
});

А вот как выглядит сама форма

<form id="feedback-modal" method="POST" data-remodal-id="callback" class="contact__form remodal">
  <button data-remodal-action="close" class="remodal-close"></button>
  <div class="grid-1_xs-1">
    <div class="col">
      <input type="text" placeholder="Ваше имя" name="name"/>
    </div>
    <div class="col">
      <input type="text" placeholder="Ваш телефон" name="contact"/>
    </div>
  </div>
  <div class="col contact__form-send">
    <div class="grid-middle">
      <button type="submit" data-remodal-action="confirm">Жду звонка!</button>
    </div>
  </div>
</form>

Я не знаю, что делать, я сейчас изучаю JS, но я только в самом начале... Заранее спасибо за ответ.

vodkabears commented 8 years ago

Off topic.