I keep on getting a null result while trying to retrieve the form

Question

HTML to create the page and the form

Everytime I try to retrieve the form data, all I am getting is null values I have tried to use form element inside of the queryselector and still got the same result.

What I am doing wrong?

<!DOCTYPE html>
<html>
<head>
    <title>Member</title>
    <link rel="stylesheet" type="text/css" href="/_CSS/reg_login.css" media="screen" />
    
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.1/css/all.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.1/css/v4-shims.css">
    <script src="/_JAVASCRIPT/login.js"></script>
</head>
        <li><a href="/index.html" id="casa" href="#Casa"><i class="fa fa-home"></i>Trade Box</a></li>
<body>
    <div class="membership">
        <img src="/_IMAGE/Bull vs Bear.jpg"  class="login-image">
        <h1>Log in</h1>
        <form id="membership-form" name="membership-form">
            <i class="fas fa-users"></i>
            <label for="Email">Email</label>
            <br>
            <input type="email" id="email" name="email" placeholder="name@example.com" autocomplete="on" required>
            <br>
            <i class="fas fa-key"></i>
            <label for="Password">Password</label>
            <br>
            <input type="Password" id="password" name="password" placeholder="password" autocomplete="on" required>
            <br>
            <input type="submit" id="Sub" value="Submit">
        </form>
            <br>
            <a href="#forgotPassword">Forgot your password</a>
            <br>
            <a href="#ceateAccount">Create a new account</a>
    </div>
</body>
</html>

let FD = document.querySelector('#membership-form')
console.log("The value of FD is",FD)
var formData = new FormData(FD)
console.log("The value of formData is",formData)
fetch('API'
,{
        method: 'POST',
        headers:new Headers({
            'Content-Type': 'application/json'
        }),
        body: formData
        })

})     
.then( (response)  => response.json(FD) )
.then((data) => alert(data))

`FormData` is not `application/json`. Leave out the `Content-Type` header and JavaScript will send the correct header automatically. — Barmar, Oct 02 '20 at 00:12
@Barmar even before that happens the query selector itself was is getting the null before the data is even passed to formData. Do you know what is causing that query selector to return null? — Dino, Oct 02 '20 at 00:32
I am running using visual studio code live server, and should I use an await statement in the script calling — Dino, Oct 02 '20 at 00:37
I meant is the code that sends the AJAX request in an event handler, or does it run when the page is loaded? — Barmar, Oct 02 '20 at 00:38
```l FD.addEventListener('submit',function(e,FD){ fetch('https://evening-gorge-84633.herokuapp.com/auth/register' ,{ method: 'POST', body: formData }) .then( (response) => response.json(FD)) .then((data) => alert(data)) })``` — Dino, Oct 02 '20 at 00:39
But you're assigning `FD` outside the event listener. It's running when the page is loaded, but before that element is added to the DOM, so it can't find it. — Barmar, Oct 02 '20 at 00:43

I keep on getting a null result while trying to retrieve the form

0 Answers0