JavaScript form fetch request submitting empty values when they are filled in

February 19, 2021 by admin

I am creating a Login form in JavaScript and am trying to send this form to my Ruby on Rails backend.

I have two problems:

When the form loads, it triggers the eventListener and sends the blank form’s data to the backend. I have e.preventDefault() commented out in the second function below because I kept getting the error that it is not a function. Note: in the backend for Rails, I get the following message when I type in params. "Permitted: false" concerns me.
<ActionController::Parameters {"controller"=>"sessions", "action"=>"create", "session"=>{}} permitted: false>
When I fill in the form with an email and password and click the submit button, the loginData (from loginButton.addEventListener("submit", submitLogin(loginData) submits a blank value for the email and ‘password’ for the password (which are the default values I set to test the values) even though these elements are filled in in the form with an actual email address and password.

Function loading login form (note: this loads just fine):

  // create the elements
  var div = document.createElement("div"),
    log = document.createElement("div"),
    loginForm = document.createElement("form"),

  //set form attributes
  loginForm.setAttribute("method", "POST");

  // set body styles
  document.body.style.textTransform = "capitalize";

  log.id = "login";
  log.innerHTML = "login";

  // set loginForm styles
  loginForm.id = "loginForm";

  // set the elements and styles on the form
  loginForm.innerHTML =
    "<label>username</label><br/>" +
    "<input type='text' id='login-email' value='' placeholder='email' style='" +
    inputStyles +
    "' /><br/>" +
    "<label>password</label><br/>" +
    "<input type='password' id='login-password' value='value' placeholder='*************' style='" +
    inputStyles +
    "' /><br/>" +
    "<input type='submit' id='login-button' value='Login' style='" +
    btnStyles +
    "' />" +
    "<p><a style='" +
    forgetStyles +
    "' href='#'>forget password ?</a></p><br/>";
 
  // append the buttons and form on main-div
  div.appendChild(log);
  div.appendChild(loginForm);

  // append main-div on the body
  document.body.appendChild(div);

  //get login form values to submit
  let loginEmail = document.getElementById("login-email").value;
  let loginPassword = document.getElementById("login-password").value;
  let loginData = { member: { loginEmail, loginPassword } };
}

SubmitLogin Function (fetch request to Rails backend):

async function submitLogin(e) {
  // e.preventDefault();
  const loginData = new FormData(e.target);
  debugger;
  let options = {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Access-Control-Allow-Origin":
        "file:///Users/awb/Coding/Flatiron/Projects/bookclub-javascript-rails-api/bookclub-frontend-javascript/index.html",
      "Access-Control-Allow-Methods": "POST",
      "Access-Control-Allow-Headers": "Content-Type, Authorization",
      Accept: "application/json",
    },
    body: JSON.stringify(loginData),
  };

  fetch("http://localhost:3000/login", options)
    .then((resp) => {
      resp.json();
    })
    .then((member) => {
      console.log(member);
      return new Member(member);
    });
}

If it matters, this is the order of my scripts at the bottom of my index.html page:


    <script src="src/suggestion.js"></script>
    <script src="src/member.js"></script>
    <script src="src/gathering.js"></script>
    <script src="src/book_group.js"></script>
    <script src="src/book.js"></script>
    <script src="src/login_registration_form.js"></script>
    <script src="src/index.js"></script>

Where index.js calls the function "loadRegistrationLogin()" as the last line on index.js

My routes are:

Rails.application.routes.draw do
  resources :members, only [:create, :index, :show]
  resources :registrations, only: [:create]
  resources :sessions, only: [:create]
  
  post '/login', to: 'sessions#create'
  delete '/logout', to: 'sessions#destroy'
  get '/logged_in', to: 'sessions#is_logged_in?'

  root to: "static#home"
  
end

and finally, my session controller:

class SessionsController < ApplicationController
    include CurrentMemberConcern
    skip_before_action :verify_authenticity_token

    def create
        member = Member
        .find_by(email: params[:member][:email])
        .try(:authenticate, params[:member][:password])

        if member 
            login!
            render json: {
                status: :created, 
                logged_in: true,
                member: member 
            }
        else 
            render json: { 
                status: 401,
             errors: ['No such member', 'Verify credentials and try again or sign up']
            }
        end
    end
end