Отправить все данные из формы с помощью AJAX

Question

У меня возникла проблема с формой контакта, которую я создал с помощью Bootstrap. Мне нужно создать кнопку отправки, которая будет пытаться отправить все данные из этой формы с помощью AJAX, но я должен сделать это без каких-либо фреймворков или библиотек javascript (это моя домашняя работа для школы, так что я действительно не могу их использовать ...) ,

Я понятия не имею, как это сделать без jQuery, поэтому любая помощь будет принята с благодарностью.

<div class="container"> 
    <form class="form-horizontal" role="form"> 
<div class="form-group"> 
    <label class="control-label col-sm-2" for="usr">Name:</label> 
    <div class="col-sm-10"> 
     <input type="text" class="form-control" id="usr" placeholder="Enter name" value="" aria-describedby="name-format" required aria-required=”true” pattern="[A-Za-z-0-9]+\s[A-Za-z-'0-9]+" title="firstname lastname"> 
    </div> 
</div> 

<div class="form-group"> 
<label class="control-label col-sm-2" for="email">Email:</label> 
    <div class="col-sm-10"> 
     <input type="email" class="form-control" id="email" name="email" placeholder="Enter email" required> 
    </div> 
</div> 

<div class="form-group"> 
<label for="comment">Message:</label> 
    <textarea class="form-control" rows="5" id="comment"></textarea> 
</div> 

<div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-2 pull-right"> 
    <button type="submit" class="btn btn-primary">Send</button> 
    </div> 
</div> 

Answer 1

Добавить идентификатор в форму:

<form class="form-horizontal" role="form" id="idadd"> 

И использование:

$('#idadd').bind("submit", function() { 
      $.ajax({ 
       type  : "POST", 
       cache : false, 
       url  : "toto.php", 
       data  : $(this).serializeArray(), 
       success: function(msg){ 
      // code 
       } 
       } 
     }); 
     return false; 
    }); 

Answer 2

найти все значения элемента, который вы хотите отправить. , например:

var user = document.getElementById('usr').value; 
var email = = document.getElementById('email').value; 
var comment = = document.getElementById('comment').value; 
... 
var data = 'user=' + encodeURIComponent(user) + '&email=' + ...; 

.... 
xhr.send(data);