Submit button calls function without being clicked

Question

I am trying to write a simple banking app to learn basic DOM manipulation stuff. This will be a single page website with lots of function calls and hiding/displaying containers.

Once I click the register button on the main screen, it calls registerScreen() function which then hides the main screen elements and shows a form group with text boxes and a submit button that saves the filled in information. However, saveCustomer() function calls itself as soon as I bring up the register screen. Obviously, it submits a blank form which is a problem.

I have tried different event listener methods like submit, click, getElementById().onclick, and so on. I did not want to call saveCustomer() function on HTML because I do not know how I can pass the info with that approach.

function registerScreen() {
    document.getElementById("welcome-container").style.display = "none";
    document.getElementById("registerScreen").style.display = "block";

    let customerFirstName = document.getElementById('firstName').value;
    let customerLastName = document.getElementById('lastName').value;
    let customerPassword = document.getElementById('password').value;

    let randomID = document.getElementById("randomID");
    let ID = Math.floor((Math.random() * 999) + 100);

    randomID.innerHTML += ID;

    //This is the line I am having problems with
    document.getElementById("submitInfo").addEventListener("click", saveCustomer(ID, customerFirstName, customerLastName, customerPassword));
}

function saveCustomer (ID, customerFirstName, customerLastName, customerPassword) {
    let customer = {
        id: ID,
        firstname: customerFirstName,
        lastname: customerLastName,
        password: customerPassword,
        cashAmount: 0,
    }

    if (localStorage.getItem("customers") === null) {
        let customers = [];
        customers.push(customer);
        localStorage.setItem("customers", JSON.stringify(customers));
    } else {
        let customers = JSON.parse(localStorage.getItem("customers"));
        customers.push(customer);
        localStorage.setItem("customers", JSON.stringify(customers));
    }

    alert("Registration successful.");
}

Everything looks good in the code provided above. There could be more code that is interfering. One thing comes to mind is how many buttons or elements are there with id="submitInfo" ? One of the biggest caveat with a single page app is that every thing is in the same html page and we sometimes have multiple items with same id thinking its a different area/panel/div. We may need to see the html too. — Nawed Khan, Feb 08 '19 at 22:04
@NawedKhan Only the submit button has that id. I have double checked that before posting here and even changed the id name. — Özenç B., Feb 08 '19 at 22:06
Possible duplicate of [Why is my function call that should be scheduled by setTimeout executed immediately?](https://stackoverflow.com/questions/2037203/why-is-my-function-call-that-should-be-scheduled-by-settimeout-executed-immediat) — Heretic Monkey, Feb 08 '19 at 22:08
How are you calling registerScreen()? on click of a submit button? maybe that button is submitting the form. — Nawed Khan, Feb 08 '19 at 22:09
SPA (single page application) come with challenge on their own. If your objective is to understand DOM better, I suggest you to not to start with a SPA project. — , Feb 08 '19 at 22:10

score 2 · Accepted Answer · edited Feb 08 '19 at 22:06

2

Try wrapping saveCustomer in an anonymous callback function like so:

document.getElementById("submitInfo").addEventListener("click", () => {saveCustomer(ID, customerFirstName, customerLastName, customerPassword)});

edited Feb 08 '19 at 22:06

gearsdigital

13,915
6
44
73

answered Feb 08 '19 at 22:03

Dom Garcia

91
3

This one works. Only problem is it is submitting only the ID, not oher infos but I suspect it has nothing to do with my problem above but something to do with textbox values not being read after change. Thank you! Though I am trying to understand how calling it as an arrow function makes it work. Is it the same approach that Ivica Pesovski explained below, calling it as an anonymous function? – Özenç B. Feb 08 '19 at 22:21
It's the same approach, the issue is that when you're attaching the event you need to pass a function reference, but instead, you're calling `saveCustomer`. It should work with any kind of function. – Rodrigo Ferreira Feb 08 '19 at 22:24

score 0 · Answer 2 · answered Feb 08 '19 at 22:12

The issue is that you are not registering a function to be called when #submitInfo is clicked, but the event listener is malformed and you are calling another function from withing the declaration. Instead, you should register a new anonymous function when clicking #submitInfo and only call the saveCustomer() from withing that anonymous function.

Below is the wrong way that you are using in your case.

<button id="btn">Click</button>
<script>
    document.getElementById("btn").addEventListener("click", alertSomething("test"));

    function alertSomething(text) {
        alert("Inside here, alerting "+text);
    }
</script>

When initializing the eventListener, it is making a call to the alertSomething() function. This will trigger the alertSomething() function as soon as the document has loaded.

What you want instead is to define a new anonymous function that will get called once the button has been clicked and only call the alertSomething() function from inside this new function. It is called anonymous function because it doesn't have a name like an ordinary function.

The correct way to accomplish this:

<button id="btn">Click</button>
<script>
    document.getElementById("btn").addEventListener("click", function() {
        alertSomething("test")
    });

    function alertSomething(text) {
        alert("Inside here, alerting "+text);
    }
</script>

Submit button calls function without being clicked

2 Answers2