CODEWITHSUNDEEP
javascriptphpjqueryajaxmouseover
gapc311
gapc311

Reputation: 473

call a php variable on hover using ajax

I have a variable $form in PHP and want it to be called or displayed whenever I hover a button. I am a novice in ajax and don't know how to call the variable on hovering the button. The code is:

Javascript

<script type="text/javascript">
    $(document).ready(function() {
        $("#login_button").hover(function() {
            $("login-form").slideDown(400);
        });
        $("#login_button").hover(function() {
            $("login-form").css('visibility','visible'); 
        });
        $("#login_button").dblclick(function() {
            $("login-form").slideUp(1200);
        });
        $("#login-form").mouseleave(function() {
            $("login-form").slideUp(1000);
        });
    });
</script>

PHP

<?php
$form = "<form action='?' method='post' id='login-form' name='login-form'><!-- class='form-horizontal well' -->
         <strong><legend>Login</legend></strong>
         <fieldset id='inputs'> 
             <input type='text' placeholder='Username' name='name' class='input-large' id='username'>
             <input type='password' placeholder='Password' name='password' class='input-large' id='password'>
         </fieldset>    
         <fieldset id='actions'>    
             <input type='submit' id='submit' class='btn btn-primary' value='Sign in'>
             <div class='forgot'>  
                 <strong><a href='?forget=1' id='forget'>Forgot Password?</a></strong>
             </div>
         </fieldset>
         ";
?>

Upvotes: 1

Views: 1881

Answers (3)

namhd
namhd

Reputation: 337

You can using jquery post to get value and send it to your url :

  $("#yourID").hover(function(){
      $("fomr").css({visible:visible});
      var url = "your-url-here";
      var username = $("#input-for-username").val();
      var password = $("#input-password").val();

      //init ajax post
      $.post(url,{username:username,password:password}.function(data){
        //any thing here
      });
    });

Upvotes: 3

Asenar
Asenar

Reputation: 7020

php is server-side and javascript (like html) is client-side.

What you have to do is display the content of $form in your page inside a hidden container, then use a trigger to display it:

<div id="login-form" style="display:none"><?php echo $form; ?></div>

For the js part, I simplify your example:

$("#login_button").hover(function(e) {
  $("#login-form").slideDown(400);
},
function(e) {
  $("#login-form").slideUp(1200);
});

jquery.hover doc

Notice the current version of jquery use this syntax:

$(document).on("hover", "#login_button", function(e){
  // your commands here
});

Upvotes: 1

aksu
aksu

Reputation: 5235

No AJAX required;

$(document).ready(function() {
   var php_var = '<?php echo json_encode($form); ?>';          
});

Use it like:

$('#element').hover(function() {
  $('#form_container').html(php_var);
}, function() {
  $('#form_container').html('');
});

Upvotes: 1

Related Questions