css animation call in js function does not work

Question

Can someone please help me with this? function remove() is supposed to move the div away, when the form is submitted. However, this does not happen. What is wrong in the code?

The Gist of the code is here.

snippets:

function remove() {
    document.querySelector('.nickname').style.animationPlayState = 'running';
    alert('The Form was submitted');
};

@keyframes up {
	from { 
		opacity: 1;
		top: 0;
		height: 100%;
		line-height: 100%;
	}
	to {
		opacity: 0;
		top: -110vh;
		hight: 0;
		line-height: 0;
	}
}
.nickname {
	display: flex;
	flex-direction: row;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	margin: 0;
	align-items: center;
	justify-content: center;
	opacity: 1;
	animation-name: up;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-play-state: paused;
}

<div class="nickname">
    <form onsubmit="remove()" method="POST">
        <fieldset>
            <legend><h3>Hi there! Choose your nickname:</h3></legend>
            <input type="text" name="username" placeholder="Nickname" size="60" autocomlete="off">
            <input type="text" name="useremail" placeholder="Email" size="60" autocomlete="off">
            <input type="submit" value="Save">
        </fieldset>
    </form>
</div>

Browsers often tend not to care about such stuff, when it is triggered by submitting a form - because that usually means that the current document will be replaced anyway. It might work if you trigger it on click of the submit button. — 04FS
– 04FS, Commented Jan 24, 2019 at 13:54
The animation DOES work, but it is not visualized due to the form submission. Your choices are to forget about the animation on the form submission - OR - submit the form data manually from inside the submit event handler. — Randy Casburn
– Randy Casburn, Commented Jan 24, 2019 at 14:01
Here is your JIST implemented to prevent the form submission so you can see the animation works as you designed. jsbin.com/raruhaholu/edit?html,css,js,output — Randy Casburn
– Randy Casburn, Commented Jan 24, 2019 at 14:05

JustLearning · Accepted Answer · 2019-01-24 14:08:12Z

2

You are binding your remove function to onsubmit event of a form.

All form submit events by default will reload the page. Hence your js will not work.

So what you need to do is :

function remove() {
    document.querySelector('.nickname').style.animationPlayState = 'running';
    alert('The Form was submitted');

    // run your ajax code to submit the form
    $.ajax({ blah blah});

    return false;       // do not submit the form

};

If you do this however, your form will not be submitted (but your javascript will work). So you can use ajax to post your form after you show the alert message

edited Jan 24, 2019 at 14:08

answered Jan 24, 2019 at 13:53

JustLearning

3,3423 gold badges37 silver badges58 bronze badges

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

5 Comments

04FS Over a year ago

I am guessing they want to submit the form data though …

JustLearning Over a year ago

ya i think it is outside the scope of the question:css animation call in js function does not work

JustLearning Over a year ago

but ya ofcourse you are correct, and can be handle with ajax or as you suggested use a click event

Randy Casburn Over a year ago

The JavaScript animation DOES work, but as you correctly point out, the page is reloaded prior to the effect of the animation actually being visualized.

Alexander Marchenko Over a year ago

I was planning to use Ajax to transfer form data

Collectives™ on Stack Overflow

css animation call in js function does not work

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related