提交按钮没有发送任何东西

Submit button not sending anything

本文关键字:任何东 按钮 提交      更新时间:2023-09-26

我正在尝试使用这个定制的提交按钮,这是与这个网站设计,我正在使用,我不知道如何使提交按钮发送POST请求与我的页面上的表单。到目前为止,这个按钮唯一能做的就是在网页上显示"谢谢!"下面是代码:

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

如果您想使用ajax并在成功时显示Thank you之类的消息,并在出现错误时显示错误消息。

用这样的东西替换setTimeout()调用:

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

你需要删除

    event.preventDefault(); 

更多信息请查看http://api.jquery.com/event.preventdefault/