Translate

Saturday 2 August 2014

While clicking the radio button Login/Signup form Using Javascript

Screenshot:

        


index.php:

<body>
<div style="margin:60px;   padding:20px">

<form method="post" action="" id="form">
<div class="whole">
<div style="margin-bottom:6px">

<h3><?php if(isset($message)){echo $message;}?></h3>
<h2 style="color:#006699; text-align:center;">Login or Signup</h2>
<label>Email</label> <br/>
<input type="text" name="email"  class="input" id="email" autocomplete="off"/><br />
<input type="radio" name="choose" id="login" checked="checked" class="radio"/>Already Member Login <br />
<input type="radio" name="choose" id="signup" class="radio"/>Want to a Member Register<br />
<input type="radio" name="choose" id="guest" class="radio"/>Want To Be a Guest<br />
</div>
<div style="" id="login_block">
<label>Password</label><br />
<input type="password" name="password" class="input" id="password"/><br/>
<input type="submit" value=" Login " class="button" name="login"/> 
<input type="submit" value=" Forgot Password " class="button" id="forget" name="password"/> 
</div>
<div id="signup_block">
<label>Choose password</label><br/>
<input type="password" name="newpassword" class="input" id="newpassword" /><br/>
<input type="submit" value=" Signup " class="button" name="signup"/>
</div>
<div id="guest_block">
<input type="submit" value="Guest" class="button" name="guest"/>
</div>
<div id="forget_block">

<input type="submit" value=" Reset Password " class="button" name="password"/>
</div>
</form>
</div>
</div>
</body>

Script:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#forget_block').hide();
$('#guest_block').hide();
$('#signup').click(function()
{
document.getElementById('password').value='';

$('#login_block').hide();
$('#signup_block').show();
$('#forget_block').hide();
$('#guest_block').hide();
});

$('#login').click(function()
{
document.getElementById('newpassword').value='';
$('#signup_block').hide();
$('#login_block').show();
$('#forget_block').hide();
$('#guest_block').hide();
});
$('#guest').click(function()
{
document.getElementById('newpassword').value='';
$('#signup_block').hide();
$('#login_block').hide();
$('#forget_block').hide();
$('#guest_block').show();

});

$('#forget').click(function()
{
document.getElementById('forget').value='';
$('#signup_block').hide();
$('#login_block').hide();
$('#forget_block').show();
$('#guest_block').hide();

});

$.validator.addMethod("email", function(value, element)
{
return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(value);
}, "Please enter a valid email address.");


// Validate signup form
$("#form").validate({
rules: {
email: "required email",

},
});

});
</script>

PHP Coding:


<?php
$conn=mysql_connect("localhost","root","");
$db=mysql_select_db("shopdb", $conn);
if(isset($_POST['login'])!="")   
 {
        $email = $_POST['email'];
        $password = $_POST['password'];
        $login1 = mysql_query("select * from users where email='$email' and password='$password'");
        $Results = mysql_fetch_array($login1);
        if($Results>1)
        {
            $message ="Login Sucessfully!!";
        }
        else
        {
            $message = "Invalid Username and Password";
        }        
    }
elseif(isset($_POST['signup'])!="") 
   {
        $email      = $_POST['email'];
        $password   = $_POST['newpassword'];
        $query1 = mysql_query("SELECT email FROM users where email='$email'");
        $numResults = mysql_num_rows($query1);
        if($numResults>=1)
        {            
        
        $message ="Email already exist!!";
        }
        else
        {    
        $query = mysql_query("insert into users(email,password) values('$email','$password')") or die (mysql_error());
       $message = "Signup Sucessfully!!";
           
        }
    }
elseif(isset($_POST['guest'])!="")  
  {
        $email = $_POST['email'];
        $query1 = mysql_query("SELECT email FROM users where email='$email'");
        $numResults1 = mysql_num_rows($query1);
        if($numResults1>=1)
        {
            $message =" Email already exist!!";
        }
        else
        {
        $query = mysql_query("insert into users(email) values('$email')");
            $message = "Guest Sucessfully!!";
            
        }
    }
elseif(isset($_POST['password'])!="")  
  {
      $email= $_POST['email'];
        $query4 = mysql_query("select email FROM users where email='$email'");
          $Results1 = mysql_fetch_array($query4);
            if($Results1>=1)
            {
                $encrypt = $Results1['email'];
                $message = "Your password reset link send to your e-mail address.";
                $to=$email;
                $subject="Forget Password";
                $from = 'gomathi.m@purpledot.in';
                $body='Hi, <br/> <br/>Your Password is '.$Results1['email'].' ';
                $headers = "From: " . strip_tags($from) . "\r\n";
                $headers .= "Reply-To: ". strip_tags($from) . "\r\n";
                $headers .= "MIME-Version: 1.0\r\n";
                $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
                
                mail($to,$subject,$body,$headers);
                
                //$query = "SELECT id FROM users where md5(90*13+id)='".$encrypt."'";
//                $Results = mysqli_fetch_array($result);
//                print_r($Results);
//                $message = $encrypt. $query;
            }
            else
            {
                $message = "Account not found please signup now!!";
            }
        }

?>

Style.css:

body
{
font-family:Arial, Helvetica, sans-serif;

font-size:12px;
}
form{ border:1px solid #006699; width:60%; height:auto; margin:45px auto; box-shadow:inset 2px 2px 2px #006699;}
label
{
color:#999;
padding:4px;
margin-top:4px;
color:#006699;
}
.input
{
padding:9px;
border:solid 1px #999;
margin:4px;
width:220px;
}
.radio
{
margin:4px;

}
.button
{
font-size:15px;
padding:6px;
font-weight:bold;
}
label.error
{
font-size:11px;
background-color:#dedede;
color:#000;
padding:3px;
margin-left:5px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
#signup_block
{
display:none;
}
.whole
{
padding:25px;
}

In this coding by using radio button we can open login and signup form using Simple Javascript.I hope this coding is very usefull for you.And we have create the database fields for Login,Signup and want to be guest for all fields we have to create the db fields.

Rating Star In Select Box

Index.php:

Screenshot:   

   

<body>

<form method="post">

<tr><td><label>Star Rating</label>
<select id="selection" name="starRating"  class="starRating validate[required,custom[integer],min[1]] " >
<option value="0">0</option>

<option  value="1">1</option>

<option  value="2">2</option>

<option  value="3">3</option>

<option  value="4">4</option>

<option value="5">5</option>
</select>
<img src="images/star0.jpg" alt="Star Rating" height="16" id="thumb">
</td></tr></form></body></html>

Script:

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){  
//<!-- JavaScript Star Rating method -->
    caption=['Non Starred',   
        '1 Star',
        
        '2 Star',

        '3 Star',

        '4 Star',
        
        '5 Star'], // Star images caption
    bp='images/', //base url 
    imgnum=6, //Number of your images. 
    thumb=document.getElementById('thumb'), //image id
      description=document.getElementById('caption'), //Caption id
    combobox=document.getElementById('selection'); // id 
    var val = document.getElementById('selection').value;
    thumb.src=bp+'star'+val+'.jpg';
    //description.innerHTML=caption[val];
    combobox.onchange=function()
    {
        val = document.getElementById('selection').value;
        thumb.src=bp+'star'+val+'.jpg';
        description.innerHTML=caption[val];
    }

    //<!-- JavaScript Star Rating method Ends here-->
});
</script>

IF u Want to update the starrating in Database use the above Code:


<form method="post">
    <tr>
        <td>
        <label>Star Rating</label>
        <?php
        $select=mysql_query("select * from star");
        $row=mysql_fetch_array($select); 
        ?>
         <select id="selection" name="starRating"  class="starRating validate[required,custom[integer],min[1]] " >
                                <option <?php
                                if ($row['star_rate'] == "")
                                {
                                ?> 
                                selected="selected" <?php } ?> value="0">0</option>
                               
                                <option <?php
                                if ($row['star_rate'] == "1")
                                {
                                ?> selected="selected" <?php } ?> value="1">1</option>
                                
                                <option <?php
                                if ($row['star_rate'] == "2")
                                {
                                ?> selected="selected" <?php } ?> value="2">2</option>
                               
                                <option <?php
                                if ($row['star_rate'] == "3")
                                {
                                ?> selected="selected" <?php } ?> value="3">3</option>
                              
                                <option  <?php
                                if ($row['star_rate'] == "4")
                                {
                                ?> selected="selected" <?php } ?>value="4">4</option>
                              
                                <option <?php
                                if ($row['star_rate'] == "5")
                                {
                                ?> selected="selected" <?php } ?> value="5">5</option>
                                </select>
                               <img src="images/star0.jpg" alt="Star Rating" height="16" id="thumb">
        </td>
    </tr>

Star Image:(star0.jpg)

Star Image:(star1.jpg)

Star Image:(star2.jpg)

Star Image:(star3.jpg)

Star Image:(star4.jpg)

 Star Image:(star5.jpg)

This Stars u can stored in it one image folder.