When my login credentials are prefilled by my browser (chrome) my fetch function doesn’t send the values
html
JavaScript
x
<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
JavaScript
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
JavaScript
$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
JavaScript
<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>