admin管理员组

文章数量:1386713

I have a form in this index.html page with an Ajax script, on clicking the submit button it should just display "Authentification succeeded" or not, if the user is in the database, it works but when I hit submit it displays the message for only one second. How can I keep the message displayed? Here's the index.html: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Accueil</title>
    <style type="text/css" media="screen">
        h1 {
            color:red;
        }
    </style>
        <script  language="javascript">
    function chargement()
    {
        var email = document.getElementById('email').value;
        var password = document.getElementById('password').value;

        var x = new XMLHttpRequest();
        x.open('GET','verif.php?email='+email+'&password='+password,true);
        x.onreadystatechange = function()
        {
            if ((x.readyState == 4 ) && (x.status == 200))
            {
                document.getElementById('res').innerHTML= x.responseText;
            }
        }
        x.send();
    }

    </script>
</head>
<body>
    <h1>Bienvenu(e) à Affariyet.tn </h1>
    <table>
    <form action="index.html" method="GET">
        <tr>
        <td>Email :</td>
        <td> <input type="text" id ="email" name="email" value="" placeholder="Votre Email"><br></td>
        </tr>
        <tr>
        <td>Mot De Passe : </td>
        <td><input type="password" id="password" name="password" value="" placeholder="Votre Mot De Passe"><br></td>
        </tr>
        <tr>
        <td></td>
        <td>
            <input type="submit" name="auth" value="S'authentifier" onclick="chargement()">
            <input type="reset" name="reset" value="Annuler">
        </td>
        </tr>
        <tr>
            <td></td>
            <td><div id="res"> </div></td>
        </tr>
    </form>

     </table>


</body>
</html>

And this is the PHP file that has the verification function : 

<?php 
include 'config.php';
class main
{
    public $conn; 
    function __construct()
    {
        $c=new config();
        $this->conn=$c->connexion();
    }
    function verif($conn,$email,$password)
    {
        $req="SELECT `Email`,`Password` FROM utilisateur WHERE `Email`='$email' AND `Password`='$password' ";
        $res=$conn->query($req);
        return $res->RowCount();
    }
}

$m=new main();

$email=$_GET['email'];
$password=$_GET['password'];
$resultat=$m->verif($m->conn,$email,$password);
if($resultat==0)
{
    echo '<h4 style="color:red;"> Email ou mot de passe erroné</h4>';
}
else
{
    echo '<h4 style="color:green;">Authentification réussie. Accéder à la <a href=produit.php>Liste des produits</a></h4>';
}


 ?>

I have a form in this index.html page with an Ajax script, on clicking the submit button it should just display "Authentification succeeded" or not, if the user is in the database, it works but when I hit submit it displays the message for only one second. How can I keep the message displayed? Here's the index.html: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Accueil</title>
    <style type="text/css" media="screen">
        h1 {
            color:red;
        }
    </style>
        <script  language="javascript">
    function chargement()
    {
        var email = document.getElementById('email').value;
        var password = document.getElementById('password').value;

        var x = new XMLHttpRequest();
        x.open('GET','verif.php?email='+email+'&password='+password,true);
        x.onreadystatechange = function()
        {
            if ((x.readyState == 4 ) && (x.status == 200))
            {
                document.getElementById('res').innerHTML= x.responseText;
            }
        }
        x.send();
    }

    </script>
</head>
<body>
    <h1>Bienvenu(e) à Affariyet.tn </h1>
    <table>
    <form action="index.html" method="GET">
        <tr>
        <td>Email :</td>
        <td> <input type="text" id ="email" name="email" value="" placeholder="Votre Email"><br></td>
        </tr>
        <tr>
        <td>Mot De Passe : </td>
        <td><input type="password" id="password" name="password" value="" placeholder="Votre Mot De Passe"><br></td>
        </tr>
        <tr>
        <td></td>
        <td>
            <input type="submit" name="auth" value="S'authentifier" onclick="chargement()">
            <input type="reset" name="reset" value="Annuler">
        </td>
        </tr>
        <tr>
            <td></td>
            <td><div id="res"> </div></td>
        </tr>
    </form>

     </table>


</body>
</html>

And this is the PHP file that has the verification function : 

<?php 
include 'config.php';
class main
{
    public $conn; 
    function __construct()
    {
        $c=new config();
        $this->conn=$c->connexion();
    }
    function verif($conn,$email,$password)
    {
        $req="SELECT `Email`,`Password` FROM utilisateur WHERE `Email`='$email' AND `Password`='$password' ";
        $res=$conn->query($req);
        return $res->RowCount();
    }
}

$m=new main();

$email=$_GET['email'];
$password=$_GET['password'];
$resultat=$m->verif($m->conn,$email,$password);
if($resultat==0)
{
    echo '<h4 style="color:red;"> Email ou mot de passe erroné</h4>';
}
else
{
    echo '<h4 style="color:green;">Authentification réussie. Accéder à la <a href=produit.php>Liste des produits</a></h4>';
}


 ?>
  • javascript
  • php
  • html
  • ajax
Share Improve this question asked Jan 29, 2016 at 1:25 HadhHadh 3371 gold badge7 silver badges23 bronze badges 6
  • You are open to SQL injections with this code. Currently the page reloads? – chris85 Commented Jan 29, 2016 at 1:32
  • ... also, you relly should escape input, as as it is now, it's vulnerable to mysql injection. Look for mysql_escape and/or prepared statements (preffered). – ankhzet Commented Jan 29, 2016 at 1:34
  • I'm open to way more than that hahah, I'm just testing out Ajax, and yes the page reloads, I just want it to keep diplaying the message without reloading? and how do I prevent sql injections? – Hadh Commented Jan 29, 2016 at 1:35
  • not to mention sending passwords over a GET. Not safe. – Funk Forty Niner Commented Jan 29, 2016 at 1:35
  • 1 See stackoverflow./questions/60174/…. – chris85 Commented Jan 29, 2016 at 1:36
 |  Show 1 more ment

2 Answers 2

Reset to default 4

Your issue es from that, when you submit:

  1. you execute the chargement() function as stated by the onclick attribute, and it works
  2. but since your button has type="submit" its default behaviour is to submit the form: then the action="index.php" is executed, so reloading the page, which obviously doesn't not include what you'd just put into the res div

To avoid this (i.e work without reloading the page) you can use two ways:

  • one is to prevent default action, either as already proposed by @anhkzet ( but in your case it can't work "as is"; look at it's answer's edit), or by adding event as argument to your chargement() function, then including event.preventDefault; before it ends

  • more simply you can change your <input type="submit"...> into <button type=button"...>: this way the form is not submitted at all.

EDIT in response to the supplemental question added by the OP in its ment below.

In order to use POST rather than GET you can merely substitute the desired method in your XMLHttpRequest.open() function.

I guess that you ask it because you're incertain about how to pass POST data in this case.
In fact there is no place in the method for an argument that would contain such data, but it doesn't matter: like with the <form> tag you can at once use POST method and keep query parameters attached to the url.

Inputs with type submit are meant to send data in form to server. To prevent default behaviour of submit button add return false; at the end of chargement() handler.

Ok, apparantly, I forgot 'bout return statement inside attribute...

Either:

<input type="submit" onclick="return chargement()" />

... and add return false to the end of chargement method.

...or just

<input type="submit" onclick="chargement(); return false;" />

Both should work.

本文标签： javascriptHTML page is refreshing after clicking on submit button with onclick functionStack Overflow

版权声明：本文标题：javascript - HTML page is refreshing after clicking on submit button with onclick function - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744547269a2611973.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。