I cannot assign the input field value entered by the user to a variable

Question

I’m a programming novice and I’m creating a form to collect user data and then send that data to Firebase Database.

I am collecting the data entered into HTML by input fields with a function of the form below:

var nomeCandidato = function () {
    return document.getElementById('nameField').value.toUpperCase()
    }

The problem I’m having is that I can’t assign the result of that function to a variable:

var nomesParaCorte = nomeCandidato()

But when I check the browser console with a console.log, the variable 'namesParaCorte' appears as 'Undefined'. If in the browser console I assign the variable in the same way (var namesParaCorte = nameCandidato()), I can make the function result tax.

I would be very happy with the help... Thank you in advance for your attention.

I’m intrigued because I can’t use the collected form data, but I have no problem assigning the result of a function to a variable:

//Data do Cadastro
function dataHoje () {
    const hoje = new Date
    const ano = hoje.getFullYear()
    const mes = hoje.getMonth()
    const dia = hoje.getDate()

    return ano + '-' + (mes+1) + '-' + (dia)
}
var diaHoje = dataHoje()

Initially I wrote all the code to collect the form data and in all the tests I did, I was able to collect the data, I was able to manipulate this data and then send it to Firebase Database without problems.

I only realized that I was not able to collect the form data correctly to use in the code after having implemented in the code the sending of images to Firebase Storage and after sending the images, collect the Urls for download.

I can still assign the data collected from the form to the document fields that are sent to the Firebase Database, but I need to figure out why I can’t use the form data.

Answer 1

There are several solutions depending on which you can apply, if you will call this function only when the user is sending the form, you can do this outside a single function for this and only in the function that will take care of the submission. being something like this:

function submitForm() {
  //...
  nomeDoCandidatio = document.getElementById('nameField').value.toUpperCase()
  email = document.getElementByid('emailField').value()
  //...
}

Answer 2

Generally, when the same code works by the browser console and the script does not work, it may be something related to when the code is called. Javascript is an asynchronous language, so it does not run the code in an orderly fashion and does not block the code while loading an element, and already runs the following lines. That’s why you can navigate the sites even if not all the images and buttons are loaded.

See if the function nameCandidato() is called in the script, the field and value are still loading.

You can force the page to wait for the full upload before calling endName() or just call the function when submitting the form

window.addEventListener('load', function () {
  var nomesParaCorte = nomeCandidato()
})