-2

I am building a User login system. New users are provided a blank account. This system uses Bootstrap Modals to allow users to submit Name, Username etc. to their newly provided account. I have code running to build the forms and everything works great, until the user goes to submit the data.

jav.js

$("#BodyContainer").append('<p id="btn2"><button type="submit" class="btn-lg btn-dark " id="btnLogin" name="btnLogin">Login</button></p>');
document.getElementById('btnLogin').addEventListener('click', loginProcedure);



$('#verifyForm').append('<button type="submit" class="btn btn-success btn-block" id="btnSubmitUserDetails" name="btnSubmitUserDetails"><span class="glyphicon glyphicon-upload"></span> Submit</button>');
document.getElementById('btnSubmitUserDetails').addEventListener('click', function(){ submitUserData() });

The Login option works fine as seen here in the inspector. The function is running on the click event and is named properly.

enter image description here

However the portion to allow the user to Submit their data is completely broken? The NAME of the method ended up INSIDE of the method I hoped to create?

enter image description here

I obtained this code from another website I had written about a year or so back. And it seemed to function fine then? I just cannot figure out what has changed syntactically since I last used it?

I have also tried:

document.getElementById('btnSubmitUserDetails').addEventListener('click', function(){ submitUserData(); });
document.getElementById('btnSubmitUserDetails').addEventListener('click', function()submitUserData(){  });
document.getElementById('btnSubmitUserDetails').addEventListener('click', function(), submitUserData);
document.getElementById('btnSubmitUserDetails').addEventListener('click', function,  submitUserData());
document.getElementById('btnSubmitUserDetails').addEventListener('click', function,  submitUserData(););

Just to see if maybe I had fudged the syntax somewhere? However everything except my posted faulty code sample simply crashes the js all together?

I just really want to run the submitUserData() on button click. But I am filling my function with the name instead of naming the function?

halfer
  • 19,824
  • 17
  • 99
  • 186
Morjee
  • 89
  • 9
  • I don't understand the question. You wrote `function(){ submitUserData() }` and that's what shows up in DevTools. – Barmar Mar 06 '23 at 16:07
  • If you're getting an error, add it to the question. And post a [mre] that shows how you're defining the function. I suspect it may be a scope issue. – Barmar Mar 06 '23 at 16:10
  • When I write : document.getElementById('btnSubmitUserDetails').addEventListener('click', function()submitUserData(){ }); Everything explodes. So I am trying to figure out how to fix this syntactically in order to make the method run. – Morjee Mar 06 '23 at 16:10
  • `function() submitUserData(){}` is invalid syntax. The function body has to be *inside* curly braces. – Barmar Mar 06 '23 at 16:11
  • 1
    "everything explodes" is not a useful problem description. If you're getting an error messge, add it to the question. – Barmar Mar 06 '23 at 16:12
  • So the problem is you were using event object in submitUserData but in every case except for one you do not send the event to the function. Setting up your IDE to not clear the console when you navigate away probably would have given you a hint on why the code was failing. – epascarello Mar 06 '23 at 16:43
  • https://stackoverflow.com/questions/56423797/how-the-function-is-used-without-parenthesis-in-addeventlistener – epascarello Mar 06 '23 at 16:47

1 Answers1

0

I had to change:

document.getElementById("btnSubmitUserDetails").addEventListener("click", function(){ submitUserData() });

To

$("#btnSubmitUserDetails").on("click", submitUserData);

And everything would miraculously work.

halfer
  • 19,824
  • 17
  • 99
  • 186
Morjee
  • 89
  • 9
  • Unless `submitUserData` expects an `Event` argument or uses `this` to access the event target, these should be equivalent. – Barmar Mar 06 '23 at 16:31
  • But in that case `document.getElementById('btnSubmitUserDetails').addEventListener('click', function(), submitUserData);` should also have worked. – Barmar Mar 06 '23 at 16:31
  • "*And everything would miraculously work?*" - are you asking us if this will work or telling us this is the solution. Did it work? – freedomn-m Mar 07 '23 at 10:18