jQuery animation before form submission

Asked

Viewed 204 times

0

I have this code, the animation happens but the redirect to the next page (work.php) nay.

I mean, you’re not getting into the condition if (isset($_POST.... If I comment on the piece of code responsible for animation the redirect already happens, but that’s not what I intend:

index php.:

if (isset($_POST['submit'])) {

    $firstName = htmlentities($_POST['name']);
    $firstName = str_replace(array('.', ',', ';', '?', '/', '|', '(', ')', 'º', '+', '#', '$', '@', "'", '"'), '' , $firstName);
    $firstName = trim(ucwords($firstName));

    if(!empty($firstName)) {
        $user->saveCookie($firstName);
    }

    header('Location: work.php');
}
require_once('includes/head.php');
?>
<body onunload="">
    <div id="wrapper">
.....
<form action="" method="POST">
    <input name="name" type="text" autocomplete="off">
    <input type="submit" name="submit">
</form>
.....
</html>

js.js:

$('input[type="submit"]').click(function(event) {
        event.preventDefault();

        $('#footer').css({
            "position":"absolute",
            "bottom": "5px"
        });
        $('#wrapper').animate({
            "margin-top": "-1000px"
        }, 700, function(){
            $('form').submit();
        });
    });
jquery form animation

  • @Kazzkiq, "redirect" is pt_EN ;)

  • Yes, but I happen to be :P

  • @brasofilo My bad, I did a quick search and all the results in Portuguese I saw did not have the second "c", probably because they were from Brazil, so I edited the word.

  • No problem :)

  • @Kazzkiq, no problem, I also "fixed" Sergio just to end up realizing that it is necessary to take this care not to abrasify the Portuguese of others.

2 answers

0

Clicking "Yours" is not executing this code. The code that is running is:

$('#formName').click(function(){
            $(this).css({
                "text-decoration": (underline = !underline) ? "none" : "underline"
            })
            $('form, h2, p').fadeToggle(500);
            $('h3').stop().animate({
                "top": (down = !down) ? "330px" : "290px"
            }, 500);
            $('form input').focus();
        });

  • Dsculpe, I just realized what you mean. Click "Yours" to appear the form

0


I managed to resolve, 'Ubmit' is a reserved javascript word so the 'name' of the 'input[type="Ubmit"]' cannot be 'Ubmit', it conflicts with the 'Ubmit()' javascript function:

1st amendment: HTML

<form action="" method="POST">
    <input name="userName" type="text" autocomplete="off">
    <input type="submit" name="nameCookie">
</form>

After this it seems that the form is submited because a Reload is made to the page but it is still not processed by the 'if(isset(...)) condition because the redirection does not happen. There was still some kind of conflict with the javascript part, so I changed the argument from isset, instead of being the name of the "input[type='Submit']" (nameCookie), it became the name of the "input[type='text']" (username):

2nd amendment: PHP

if (isset($_POST['userName'])) {
    $firstName = htmlentities($_POST['userName']);
    ...
    if(!empty($firstName)) {
        $user->saveCookie($firstName);
    }
    header('Location: work.php');
}

I did not make any changes in js.js.

PS: I don’t know (if anyone knows explain sff) the technical reasons why this second change is necessary, but it worked.

Browser other questions tagged jquery form animation

You are not signed in. Login or sign up in order to post.