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

            });

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? — Jatin Bansal
– Jatin Bansal, Commented Aug 25, 2015 at 4:49
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. — phema
– phema, Commented Aug 25, 2015 at 4:57
@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. — Eric Lease
– Eric Lease, Commented Aug 25, 2015 at 5:18

Eric Lease · Accepted Answer · 2015-08-25 05:24:03Z

2

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

edited Aug 25, 2015 at 5:24

Eric Lease

4,2041 gold badge31 silver badges46 bronze badges

answered Aug 25, 2015 at 5:08

Kamina

13.8k12 gold badges55 silver badges87 bronze badges

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

Comments

user786 · Accepted Answer · 2015-08-25 06:33:20Z

1

You need to remove

    event.preventDefault();

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

edited Aug 25, 2015 at 6:33

answered Aug 25, 2015 at 5:13

user786

4,4406 gold badges53 silver badges112 bronze badges

1 Comment

Eric Lease Over a year ago

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.

Collectives™ on Stack Overflow

Submit button not sending anything

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related