Form submit button not working on mobile in React JS

Question

I am learning React JS. I used BootStrap's form in a React JS web application. Submit button is working fine on laptop but not working on mobile devices.

On Mobile, when I touch on the button its border gets highlighted but didn't perform any action. But I have noticed one thing that the HandleSubmit function is not triggering. But if I change onClick tag to onClick = {alert("Working");} it works on mobile.

Full code repository is here: https://github.com/AhmadRaza365/iNoteBook

Forms can be found in these components: components/Login.js, Signup.js, AddNote.js

Answer 1

In Login.js you have a typo: onClicK (capital K) vs onClick .

But your main problem is that you're mixing up two ways of submitting a form

1. <form onSubmit={...}> combined with a <button type='submit'> inside the form. In this type of combination, you don't need an onClick on the button. Effectively <button type='submit> , tells the browser that when someone clicks on the button, go ahead and execute the function you passed to onSubmit specified in <form> .

2. <form> without onSubmit set on the form element and a button inside the form without type='submit but only an onClick which needs to manually reset the form and do all the subsequent logic associated with given form.

Answer 2

I have found the error. Basically, forms are working well. The problem was with my localhost API. I was accessing it without port and URL forwarding. And as I am using await function to fetch and post data to API. But API was not connected. As a result, it was not forwarded next.