title: html form does not get sent after onSubmit function
body: <p>The geocodeAddress() function uses fetch to send a http request. Before I added &quot;event.preventDefault()&quot; as a parameter to the function, it would not run properly (TypeError: Network Error) as the request was being interrupted by the page reloading caused by the form being sent. However, once I added it, the form no longer gets sent. I don't think the problem lies with the php code as I have not altered it at all. What could be causing this?</p>
  <p>I had the same error in this post before
  <a href="https://stackoverflow.com/questions/61120455/typeerror-networkerror-when-attempting-to-fetch-resource-on-form-submit-react">&#39;TypeError: NetworkError when attempting to fetch resource&#39; on form submit ReactJS</a></p>
  <pre><code>    &lt;form action=&quot;private/database.php&quot; method=&quot;POST&quot; onsubmit=&quot;geocodeAddress(event.preventDefault())&quot;&gt; 
        &lt;input type=&quot;text&quot; name=&quot;surname&quot; placeholder=&quot;性氏&quot; required&gt;&lt;br&gt;
        &lt;input type=&quot;text&quot; name=&quot;given_name&quot; placeholder=&quot;名字&quot; required&gt;&lt;br&gt;
        &lt;label for=&quot;male&quot;&gt;
          &lt;input type=&quot;radio&quot; id=&quot;male&quot; name=&quot;gender&quot; required&gt;
          男性
        &lt;/label&gt;
        &lt;label for=&quot;female&quot;&gt;
          &lt;input type=&quot;radio&quot; id=&quot;female&quot; name=&quot;gender&quot;&gt;
          女性
        &lt;/label&gt;&lt;br&gt;
        &lt;input type=&quot;text&quot; name=&quot;email&quot; placeholder=&quot;電子信箱&quot; required&gt;&lt;br&gt;
        &lt;input type=&quot;text&quot; name=&quot;phone_number&quot; placeholder=&quot;電話&quot; required&gt;&lt;br&gt;
        &lt;input type=&quot;text&quot; id=&quot;address&quot; name=&quot;address&quot; placeholder=&quot;地址&quot; required&gt;&lt;br&gt;
        &lt;input type=&quot;hidden&quot; id=&quot;lat&quot; name=&quot;lat&quot;&gt;
        &lt;input type=&quot;hidden&quot; id=&quot;lng&quot; name=&quot;lng&quot;&gt;
        &lt;input type=&quot;date&quot; name=&quot;cleaning_date&quot; required&gt;&lt;br&gt;
        &lt;input type=&quot;submit&quot; name=&quot;form_submit&quot;&gt;
      &lt;/form&gt;
      &lt;script&gt;
          function handleErrors(res) {
            if (!res.ok) {
              throw Error(res.statusText);
            }
            return res;
          }
  
          function geocodeAddress() {
            const address = document.getElementById('address').value;
            fetch(`https://maps.googleapis.com/maps/api/geocode/json?address=${address}&amp;key=AIzaSyDxsdfWYv25UrruPXLqeXKVYUnD-VyReA`)
              .then(handleErrors)
              .then(res =&gt; res.json())
              .then(data =&gt; {
                console.log(data);
                document.getElementById('lat').value = data.results[0].geometry.location.lat.toString();
                document.getElementById('lng').value = data.results[0].geometry.location.lng.toString();
              })
              .catch(error =&gt; console.log(error));
          }
      &lt;/script&gt;
  </code></pre>