Submit modal form and get fields as JSON

i have simple modal div to submit form in html

            <div class="modal-body">
                  <form id="myform">
                    <div class="form-group">
                      <label for="username">Username</label>
                      <input type="text" placeholder="Username" class="form-control">
                    </div>
                    <div class="form-group">
                      <label for="password">Password</label>
                      <input type="password" placeholder="Password" class="form-control">
                    </div>
                  </form>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-sm btn-outline-secondary" onclick="addToFirebase()">Save changes</button>
                </div>

when i am trying to get the fields data in form of json i am getting blank array [] . I need to get all field values as json .

             function addToFirebase(){
              alert('Adding to firebase');
              var formData = JSON.stringify($("#myform").serializeArray());
              console.log(formData);
            }

>Solution :

The form elements are missing name attributes. For example:

<input name="username" type="text" placeholder="Username" class="form-control">

The name is used as the key in key/value pairs when serializing a form. Without one, there’s no key to which the value can be assigned.

As an aside… For the <label> elements to be properly associated, the form inputs also need an id to match the for attributes:

<input name="username" id="username" type="text" placeholder="Username" class="form-control">