When my login credentials are prefilled by my browser (chrome) my fetch function doesn’t send the values
html
<div class='login-frame'> <h3>Bienvenue</h3> <div class='form'> <div class='input-handler'> <label for='login'>Login</label> <input type='text' id='login' name='login' autocomplete='on'> </div> <br> <div class='input-handler'> <label for='pass'>Mot-de-passe</label> <input type='password' id='pass' name='pass' autocomplete='on'> </div> <br> <button id='loginbutton'>CONNEXION</button> </div> </div>
JS
window.onload = function() { var pass = document.getElementById('pass'), login = document.getElementById('login'), loginButton = document.getElementById('loginbutton'); loginbutton.onclick = (e)=> { var creds = { login: login.value, pass: pass.value } fetch('functions/log.php', { method: "POST", header: {"Content-type": "application/json; charset=UTF-8"}, body: JSON.stringify(creds) }); }
PHP
$pos = json_decode(file_get_contents('php://input', true)); echo var_dump($pos);
If I type anything, it returns
object(stdClass)#3 (2) {
[“login”]=>string(3) “qfz”
[“pass”]=>
string(5) “zfqzf”
}
If I use the browser prefill, it returns
NULL
Advertisement
Answer
It was a mistake,
as @CBroe said, it was a security problem. Changing my html to a proper form make it works as it should
<form class='login-frame' method='post' action='#'> <div class='login-logo'><img src='bs/img/logo_b.svg'></div> <h3>Bienvenue</h3> <div class='form'> <div class='input-handler'> <label for='login'>Login</label> <input type='text' id='login' name='login' autocomplete='on'> </div> <br> <div class='input-handler'> <label for='pass'>Mot-de-passe</label> <input type='password' id='pass' name='pass' autocomplete='on'> </div> <br> <button type='submit' id='loginbutton'>CONNEXION</button> </div> </form>