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

CodePudding user response：

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.

You should choose one or the other for each of your 3 forms – don't use both on a form.

CodePudding user response：

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.