Home/ Questions/Q 7994529
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T14:09:28+00:00

I’ve been into jQuery lately, it’s my first time using it, but I’ve made

  • 0

I’ve been into jQuery lately, it’s my first time using it, but I’ve made MAJOR improvements on my website with it. (fadeIn pages, switches, etc.)

So basically, I want to make a login form with it, but I’ve no idea how to use $.post even after having research on it.

<form action="" method="post">
 <input type="text" id="username">
 <input type="password" id="password">
 <input type="submit" id="log" value="Log in">
</form>

Yea, that’s where I am right now, and I’d like a fancy fade animation for logging. [or atleast no page load]

EDIT: looks like so right now, it’s outputing ‘failed.’ even if I enter the right combo

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$("#loginform").submit(function(event) {
        event.preventDefault(); 
        $.post('login.php', function(data) {
            $('body').hide();
        $('body').html(data).show('fast');
    });
});
});
</script>
 </head>
<body>
  <div id="all">
 <form action="" method="post" id="loginform">
  <input type="text" id="username"><br>
  <input type="password" id="password"><br>
  <input type="submit" id="log" value="Log in">
</form>
</div>

login.php:

<?php
 $un = $_POST['username'];
 $pw = $_POST['password'];
 if($un == "huwil" and $pw == "test") {
  echo "logged.";
 } else {
   echo "failed.";
 }
?>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Loading a page after you login without having to refresh is actually possible, but I’m not sure if there’s implication with cookies etc

    $.post can be called in several ways, in your case, you need:

    $.post(url, parameters_to_send_to_server, callback_function)

    so:

    $.post('login.php', $('#formId').serialize(), function(html) {
    $('body').hide();
    $('body').html(html).show('fast');
});

    $('#formId').serialize() takes all data from the form with id #formId, packs it in a string, and sends to the server, so in your php you can access it as $_POST['input_name'], the callback_function runs whenever the AJAX request is completed.

    • 0