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