Как отправить форму на скрипт mandrill.js?

Question

[Никита Нафранец]

Нашел такой пост, там есть скрипт который позволяет отправлять через сторонний сервис письма. С JS я говорю на вы и кое-что знаю, но это слишком мало, чтоб считать за знания. Я начал попытки отправки письма со страницы на скрипт, а он уже на сервис и т.д. Ед. до чего я додумался это обернуть форму отправки тестового письма в функцию, а потом эту функцию привязать уже с известными значения к кнопке на сайте.

var xmlhttp = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    xmlhttp.open('POST', 'https://mandrillapp.com/api/1.0/messages/send.json');
    xmlhttp.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4) {
            if(xmlhttp.status == 200) alert('Mail sended!')
            else if(xmlhttp.status == 500) alert('Check apikey')
            else alert('Request error');
        }
    }
    function sendMail(sub,text){ 
        xmlhttp.send(JSON.stringify({'key': 'Myapicode',
       'message': {
           'from_email': '[e-mail]',
           'to': [{'email': '[e-mail]', 'type': 'to'}],
           'autotext': 'true',
           'subject': sub,
           'html': text
        }}))};

<button onclick="sendMail('Subject','Text Mail');"
Письмо он шлет, причем быстро. И появляется окно, что письмо отправлено. А как сделать заполняемую форму, чтоб человек при нажатии на кнопку мог отправлять текст, который он написал? Я попробовал написать форму, но отправить письмо не получается, пишет Request error.

<form onsubmit="sendMail('sub.value','text.value');">
              <input type="text" size="40" name="sub">
              <input type="text" size="40" name="text">
              <input type="submit" value="GET IT">
            </form>

Как мне написать правильную форму? Я решил сначала использовать гугл, но я походу даже не знаю как правильно запрос написать на свою проблему. Заранее спасибо.

Answer 1

[Михаил Горячкин]

Ну например вот так:
HTML:

<form id="sendForm">
    <input type="text" size="40" name="sub">
    <input type="text" size="40" name="text">
    <input type="submit" value="GET IT">
</form>

JS:

window.addEventListener('DOMContentLoaded', function(){
     var form = document.querySelector('#sendForm');
    
      form.addEventListener('submit', function (e) {
        e.preventDefault();
        sendMail(this.elements.sub.value, this.elements.text.value);
      }, false);
}, false);

Этого будет достаточно, ф-ю sendMail я соответственно в коде опустил, она та же.

Comments

[Никита Нафранец]

О боже, работает! Я неописуемо рад! Можно для справки, что произошло? Что мне нужно прочитать, чтоб понять ?

[Пашенька]

Dimensi: https://learn.javascript.ru/

[Михаил Горячкин]

Последовательность действий такая:
1) Ждем когда DOM страницы построится;
2) Находим в DOM-ме элемент нашей формы;
3) Вешаем обработчик события отправки формы;
4) Внутри ф-и обработки события отменяем действие по умолчанию для этой формы, достаем значения нужных нам полей и вызываем ф-ю отправки письма.