'Where is this GET request executing from and how do I stop it?

I have built a simple HTML form with some fields. When I click on the submit-button, a jQuery AJAX POST request should be executed and the data registered in the db.

However, what actually happens is that when I click the button it first apparently sends a GET request and the page refreshes with the parameters of the form in the URL :/. When I re-enter this info in the form, it executes normally. How do I remove the annoying refresh and GET request?

submit-button:

      <button
        className="register-form-submit"
        type="submit"
        id="submit-button"
      >
        Register
      </button>

AJAX POST request:

$('#submit-button').on('click', e => {
e.preventDefault();
e.stopPropagation(); // only neccessary if something above is listening to the (default-)event too
const name = $('#name').val();
const email = $('#email').val();
const phone = $('#phone').val();
const branch = $('#branch').val();
const enroll = $('#enroll').val();
const link = $('#link').val();
const github = $('#github').val();
const dribbble = $('#dribbble').val();
const behance = $('#behance').val();
const others = $('#others').val();
const sendInfo = {
  name: name,
  email: email,
  phone: phone.toString(),
  branch: branch,
  enroll: enroll.toString(),
  link: link,
  github: github,
  dribbble: dribbble,
  behance: behance,
  others: others,
};
$.ajax({
  type: 'POST',
  url: 'http://localhost:8000/WoC/students/register',
  data: JSON.stringify(sendInfo),
  crossDomain: true,
  success(response) {
    // console.log(response);
    $('#submit-button').addClass('disabled');
    if (response === 'success') {
      //console.log('yay');
      alert('Successfully registered.')
      window.location.href = "/";
    } else if (response === 'error') {
      // console.log('sed');
      alert('Error during registration!')
      window.location.href = "/";
    }
  },
  error(e) {
    // console.log('sed');
    alert('Error during registration!')
    window.location.href = "/";
  },
}); });});

Remaining js-script:

(function ($) {
  $('body').scrollTop(0);
  $('a.js-scroll-trigger[href*="#"]:not([href="#submit-button"])').on('click', function () {
    // console.log('Hello World!');
    let target = $(this.hash);
    target = target.length ? target : $('[name=${this.hash.slice(1)}]');
    if (target.length) {
      $('html, body, div').animate(
        {
          scrollTop: target.offset().top - 100,
        },
        1000,
        'easeInOutExpo'
      );
      return false;
    }
  });

  $(document).on('scroll', function () {
    $('#navbar').toggleClass(
      'scrolled',
      $(this).scrollTop() > $('#navbar').height() - 50
    );
    $('#navbar').toggleClass(
      'shadow',
      $(this).scrollTop() > $('#intro').height() - 50
    );
  });
})(jQuery);
$(document).on('scroll', () => {
  const currentTop = $(window).scrollTop();
  const elems = $('.scrollspy');
  elems.each(function (index) {
    const elemTop = $(this).offset().top - 200;
    const elemBottom = elemTop + $(this).height();
    if (currentTop >= elemTop && currentTop <= elemBottom) {
      const id = $(this).attr('id');
      const navElem = $(`a[href="#${id}"]`);
      navElem.parent().addClass('active').siblings().removeClass('active');
    }
  });
});
$('a[href*="#modal"]:not([href="#submit-button"])').on('click', () => {
  $('.modal-container').toggleClass('show-modal-component');
});
$('div.modal-close').on('click', () => {
  $('.modal-container').toggleClass('show-modal-component');
});
$(() => {
  setHorizontalTimeLineLength();
  const timelineContentContainer = $('div.timeline-content-container');
  if (timelineContentContainer.length !== 0) {
    $('div.timeline-content-container').animate(
      {
        scrollLeft:
          $('.timeline-content-card-container.active').offset().left -
          $(window).width() / 2 +
          $('.timeline-content-card-container.active').width() / 2,
      },
      1000
    );
  }
});

$(window).on('resize', () => {
  setHorizontalTimeLineLength();
});
function setHorizontalTimeLineLength() {
  const timelineCards = $(
    '.timeline-content-card-container:not(.active):not(.free-space-container)'
  );
  if (timelineCards.length !== 0) {
    const timelineCardActive = $('.timeline-content-card-container.active');
    const marginTimelineCards = timelineCards
      .css('marginRight')
      .replace('px', '');
    const widthHorizontalLine =
      timelineCards.width() * timelineCards.length +
      timelineCardActive.width() +
      marginTimelineCards * 2 * timelineCards.length;
    $('#timeline-horizontal-line').width(
      widthHorizontalLine < 1280 ? '' : widthHorizontalLine
    );
  }
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source