CODEWITHSUNDEEP
javascriptphpjqueryhtml
shopeeon
shopeeon

Reputation: 151

Why our page is loaded when I click on button

In below code actually I got form design in popup using onload(). In function login() first I check every field is required then in else part I call loginvalidate.php page without page refresh in this page I perform validation in php and if any error show it in

<div id="result" style="color:red;"></div>

Division, But my query is that after if part is completed in login function and when I click on button in else part our page is reloaded because of this reload I can't access my loginvalidate.php page why this is happen please suggest me,

<!doctype html>
<html>
<head>
    <script src="jquery-1.11.3.js"></script>

    <meta charset="utf-8">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script>
        function login(){
            var email=document.getElementById("email").value;
            var password=document.getElementById("pass").value;
            var pattern = /^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*@[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$/;
            if(email=="" || password==""){
                alert("Every Field Is Requird");
                email.password.focus();
                return false;
             }else{
                 //alert("hii");
                 $.post('custom-look/loginvalidate.php',{uemail:email,upass:password},   //email,pass ->textbox name
                     function(data){
                         $('#result').html(data);
                });
                return false;
            }
        }

        function popup(){
            document.getElementById('light').style.display='block';
            document.getElementById('fade').style.display='block';
        }               
    </script>
</head>
<body onload="popup();">
    <div id="light" class="white_content" style="height:53%"> 
        <img class="close" src="/shopeeon/custom-look/newloginpopup/close.jpg" class="close" href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none';history.go(-1);"></img>  
        <!--go back to previous page using "history.go(-1)" onclick-->
        <div id="abc"> 
            <div id="popupContact-login" class="col-sm-12" >
                <form action="" id="login-form" method="post" name="form">
                    <div style="color:orange;text-align:center;width:100%;">
                        <h2 style="margin:0px;">Login to Earn Extra Cashback</h2>
                        <div id="result" style="color:red;"></div>
                    </div><br/>
                    <div class="col-sm-6 align="center" style="border-right:1px solid gray;" > <?php $reg1 = <<<var<b style="font-size:20px;font-family:arial;"> Registered User,</b> var; $reg2=<<<var<b style="color:blue;font-size:20 px;font-family:arial;"> Sign In Here </b> var; echo $reg1.$reg2; ?> </br> <input type="email" id="email" class="form-control" name="uemail" placeholder="Enter email" required/><br/>
                        <input type="password" id="pass" class="form-control" name="upass" placeholder="Enter password" required/><br/>
                        <button type="submit" onclick="return login()" id="submit" name="submit" value="submit" class="btn btn-info active btn-md">SIGN IN</button><br/>
                        <a href="redirection.php?d=<?php echo $d;?>" id="continue">Else Redirect without Sign In</a>
                    </div>
                    <div class="col-sm-6" > <?php $str1 = <<<var <b style="font-size:20px;font-family:arial;"> New User,</b> var; $str2=<<<var <b style="color:blue;font-size:20 px;font-family:arial;"> Sign Up Here </b> var; echo $str1.$str2;?>
                        <a href="signup.php"> <img src="/shopeeon/custom-look/newloginpopup/link.png" height="38"></img></a><br/> <?php $s1 = <<<var <b style="font-size:12px;font-family:arial;"><img src="/shopeeon/custom-look/newloginpopup/star.png" height="15" width="15"></img>&nbsp;WE OFFER CASHBACK WHEN YOU SHOP VIA US.</br><img src="/shopeeon/custom-look/newloginpopup/star.png" height="15" width="15"></img>&nbsp;OVER 2 LAKH CASHBACK PAID.</br><img src="/shopeeon/custom-look/newloginpopup/star.png" height="15" width="15"></img>&nbsp;OVER 1 LAKH HAPPY CUSTOMERS.</br><img src="/shopeeon/custom-look/newloginpopup/star.png" height="15" width="15"></img>&nbsp;25+ PARTNERS SITES.</br>var; echo $s1;?>
                    </div >
                </form>
            </div>
        </div>
    </div>
    <div id="fade" class="black_overlay"></div>
</body>
</html>

Upvotes: 0

Views: 52

Answers (2)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

1st: what that line expect to do?? email.password.focus(); it will give you an error .. so you can use

if(email=="" || password=="")
    {
        alert("Every Field Is Requird");
        if(email == ""){
          email.focus();
        }
        // check the same way for password
    }
    else......

2nd: better to don't mix jquery with pure javascript

3rd in your function it submit a form before prevent the page from reloading so you can use in html 

<form onsubmit="login();">  // instead of the submit input click event

and your function

function login()
{
    var email=$('#email').val();
    var password=$("#pass").val();
    var pattern = /^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*@[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$/;
    if(email=="" || password=="")
    {
        alert("Every Field Is Requird");
        //email.password.focus();
    }
    else
    {
        //alert("hii");
            $.post('custom-look/loginvalidate.php',{uemail:email,upass:password},   //email,pass ->textbox name
            function(data)
            {
                $('#result').html(data);
            });

    }
    return false;
}

or you can use e.preventDefault();

<form onsubmit="login(e);">  // instead of the submit input click event

and your function

function login(e)
{
    e.preventDefault();
    var email=$('#email').val();
    var password=$("#pass").val();
    var pattern = /^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*@[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$/;
    if(email=="" || password=="")
    {
        alert("Every Field Is Requird");
        //email.password.focus();
    }
    else
    {
        //alert("hii");
            $.post('custom-look/loginvalidate.php',{uemail:email,upass:password},   //email,pass ->textbox name
            function(data)
            {
                $('#result').html(data);
            });

    }
    //return false;
}

Upvotes: 0

balachandar
balachandar

Reputation: 825

While click the button form submit will trigger, it's reload the page. So give onsubmit="return false" to form for prevent the page load.

Like below code

<form onsubmit="return false">
</form>

Hope this will help you.

Upvotes: 1

Related Questions