Submit button not sending anything

Question

I'm trying to use this custom-built submit button that was made with this website design that I'm using and I don't know how to make the submit button send a POST request with the forms on my page. So far the only thing the button does is make a "Thank you!" show on the webpage. Here is the code:

//Signup Form.
 (function() {
 // Vars.
 var $form = document.querySelectorAll('#signup-form')[0],
 $submit = document.querySelectorAll('#signup-form input[type="submit"]')[0],
 $message;
 // Bail if addEventListener isn't supported.
 if (!('addEventListener' in $form))
 return;
 // Message.
 $message = document.createElement('span');
 $message.classList.add('message');
 $form.appendChild($message);
 $message._show = function(type, text) {
 $message.innerHTML = text;
 $message.classList.add(type);
 $message.classList.add('visible');
 window.setTimeout(function() {
 $message._hide();
 }, 3000);
 };
 $message._hide = function() {
 $message.classList.remove('visible');
 };
 // Events.
 // Note: If you're *not* using AJAX, get rid of this event listener.
 $form.addEventListener('submit', function(event) {
 event.stopPropagation();
 event.preventDefault();
 // Hide message.
 $message._hide();
 // Disable submit.
 $submit.disabled = true;
 // Process form.
 // Note: Doesn't actually do anything yet (other than report back with a "thank you"),
 // but there's enough here to piece together a working AJAX submission call that does.
 window.setTimeout(function() {
 // Reset form.
 $form.reset();
 // Enable submit.
 $submit.disabled = false;
 // Show message.
 $message._show('success', 'Thank you!');
 //$message._show('failure', 'Something went wrong. Please try again.');
 }, 750);
 });

• user786: because you are adding this: event.preventDefault()
• Jatin Bansal: Yes, Alex is right. Submit buttons' default functionality is restricted because of preventDefault(). Try removing this it. Also why are you using it in the first place?
• phema: Thank you @Alex that worked. And since I am not experienced in front-end design or javascript so I used a free and open sourced one; so to answer the question of why it's there in the first place: no clue. If you would like to add that as an official answer I will gladly accept it.
• user786: @Kousha u are welcome. check my answer
• Eric Lease: @Kousha I think the framework you're using was designed to be used with an AJAX request, thus the default POST behavior was prevented, as Alex pointed out, but it was done intentionally to allow the AJAX request to be initiated. That window.setTimeout() block is just meant to simulate the async postback, and should be replace with a client side AJAX framework, as Robin suggests in the answer below.

Answer 1

If you want to use ajax and show messages like Thank you if success and show error message in case something went wrong.

Replace the setTimeout() call with something like this:

// get url of the form
var url = $form.attr('action');
// get the values of the form
var data = {};
$.each($form.serializeArray(), function(i, field) {
 data[field.name] = field.value;
});
// your ajax to post 
$.ajax({
 url: url,
 type: 'POST',
 data: data,
 success: function(data) {
 // Show thank you message if success.
 $message._show('success', 'Thank you!');
 // Reset form.
 $form.reset();
 //re-enable submit
 $submit.disabled = false;
 },
 error: function(e) {
 // Show error message if error. 
 $message._show('failure', 'Something went wrong. Please try again.');
 //re-enable submit
 $submit.disabled = false;
 }
});

Answer 2

You need to remove

 event.preventDefault(); 

for more info check http://api.jquery.com/event.preventdefault/

• Eric Lease: the OP copy/pasted a template and did not understand what the intended use of that block was. The template is probably intended for something more along the lines of a SPA and a full post is not desired, rather an AJAX request is probably desired in place of the default submit behavior, thus the prevent default. I would recommend incorporating Robin's answer into yours since yours was already accepted.