ajax popup

piet bieruik · March 1, 2014

Hi,

Im making an inlog form.
With ajax i want to check if the inlog is correct and display the message.
Im using this script.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Naamloos document</title>
<style type="text/css">
body{background-color:#CCC;}
#element_to_pop_up {
background-color:#fff;
border-radius:15px;
color:#000;
display:none;
padding:20px;
min-width:400px;
min-height: 180px;
}
.b-close{
cursor:pointer;
position:absolute;
right:10px;
top:5px;
}
</style>
</head>

<body>
<!-- Button that triggers the popup -->
<button id="my-button">POP IT UP</button>
<!-- Element to pop up -->
<div id="element_to_pop_up">
<a class="b-close">x<a/>
<div id="content"></div>
</div>



<script type="text/javascript" src="javascript/Jquery.js"></script>
<script type="text/javascript" src="javascript/bpopup.js"></script>
<script>

(function($) {

// DOM Ready
$(function() {

// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#my-button').bind('click', function(e) {

// Prevents the default action to be triggered.
e.preventDefault();

// Triggering bPopup when click event is fired
// $('#element_to_pop_up').bPopup({
// speed: 650,
//transition: 'slideIn'

$('#element_to_pop_up').bPopup({
contentContainer:'#content',
speed: 650,
transition: 'slideIn',
loadUrl: 'action.php' //Uses jQuery.load()
});

});

});

})(jQuery);

</script>
</body>
</html>

I need to send the username and pasword to "action.php"

How can i do this ?

Thanks,

Skewled · March 5, 2014

You can do it by posting the data, I don't see an attempt on your part to post the actual data, Are you wanting it written for you? Here is an example of posting data from a form called "login_form" which has 2 input fields of "username" and "password", the var postData = $(this).serialize() builds the array which I would use PHP to grab the $_POST['field'] from.

Typically:

<script type="text/javascript">
   $(function() {

    $("#login_form").submit(function(o) {
      o.preventDefault();
      var url = $(this).attr('action');
      var postData = $(this).serialize();

      $.post(url, postData, function(e) {
        if (o.result == 1) { // We get the result from PHP/SERVER SIDE
           window.location.href = ''; // Where to go on success
        } else {
            // What to do if the login was not found
        }

        }, 'json');

      });
   });
</script>

piet bieruik · March 6, 2014

im using this html form.

<h1>Login</h1>

<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" target="_self" title="Registratie">

<label>Email adres: </label><input name="email" type="email" id="email">

<br>

<label>Wachtwoord: </label><input name="wachtwoord" type="password" id="wachtwoord">

<br>

<p><a href="#">wachtwoord vergeten ?</a></p>

<br>

</form>

</div>

the outcome from the message i want to place in the popup.

in action.php i check the username and password

Edited March 6, 2014 by piet bieruik

Skewled · March 7, 2014

Ok in action php you'd need to add a return value for either success or failure and json_encode it. So here is an example:

<?php

public function login()
{
     // Handle Your POST input and assign your variables

     // Do your query
     $result = "SELECT * FROM ....";

     if($result)
     {
          // You would compile your json_encoded statement here for success
          json_encode(['result'] => 1]); // This will not work it's just to guide you
          return_false; // exit the function
     } else {
          // You would compile the same as above without returning false
          json_encode(['result'] => 0]); // This will not work it's just to guide you
}

Now you'd edit your form as follows to add a new div to populate the html output:

<div id="login">
                <h1>Login</h1>

    <div id="error"><!--Dynamic jQuery Return --></div> 
                
    <form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" target="_self"  title="Registratie">
     <label>Email adres: </label><input name="email" type="email" id="email">
     <br>
     <label>Wachtwoord: </label><input name="wachtwoord" type="password" id="wachtwoord">
     <br>
     <p><a href="#">wachtwoord vergeten ?</a></p>
     <br>
     <input name="login_submit" type="submit" id="login_submit" value="Login">
    
    </form>
</div>

Now all you'd need to do is finish off the JavaScript I posted above in my previous post.

<script type="text/javascript">
   $(function() {
 
    $("#login_form").submit(function(o) {
      o.preventDefault();
      var url = $(this).attr('action');
      var postData = $(this).serialize();
      $("error").hide();
 
      $.post(url, postData, function(e) {
        if (o.result == 1) { // We get the result from PHP/SERVER SIDE
           window.location.href = ''; // Where to go on success
        } else {
            // What to do if the login was not found
            // Populate the div for login error
            $("error").append('Username / Password Invalid.');
        }
 
        }, 'json');
 
      });
   });
</script>

Most of this is pseudo code to help you get on track and most of it is accurate except for how you deal with your database. I hope this helps you and puts you in the right direction.

piet bieruik · March 19, 2014

thx skewled for your help.

But the problems i have you skip.

How to call out the username.

normally its like

$result = select * from user where username = $_POST['user_name'];

but there is nog post, so $_POST['user_name'] would be empty ?

And

in your script there is no popup

or am i missing the point ?

thank you

Sign In

ajax popup

Recommended Posts

piet bieruik

Link to comment

Share on other sites

Skewled

Link to comment

Share on other sites

piet bieruik

Link to comment

Share on other sites

Skewled

Link to comment

Share on other sites

piet bieruik

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information