fetch doesn’t send autofilled input

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>

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

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>

Advertisement

Answer