Send all data from form using AJAX

Question

I got a problem with contact form that I created using Bootstrap. I need to create submit button that will TRY to send all data from this form using AJAX, but I have to do this without any of javascript frameworks or libraries (this is my homework for school so yeah I really cannot use them... ).

I have no idea how to do this without jQuery so any help will be greatly appreciated.

<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>

Similar question (Both JavaScript and jQuery are mentioned) stackoverflow.com/questions/588263/… — ArtisanBay
– ArtisanBay, Commented Nov 1, 2015 at 2:51

pablofr · Accepted Answer · 2015-10-31 23:17:05Z

0

Add id to your form :

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

And use :

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

answered Oct 31, 2015 at 23:17

pablofr

1341 silver badge14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pablofr Over a year ago

Hum sorry its with jquery

pablofr Over a year ago

Check stackoverflow.com/questions/6990729/…

zhenhua lee · Accepted Answer · 2015-11-01 05:44:51Z

0

find every value of element that you want to send. for example:

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

answered Nov 1, 2015 at 5:44

zhenhua lee

513 bronze badges

Collectives™ on Stack Overflow

Send all data from form using AJAX

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related