html格式在onSubmit函数之后没有发送 [英] html form does not get sent after onSubmit function

问题描述

geocodeAddress()函数使用fetch发送http请求.在我添加"event.preventDefault()"之前作为该函数的参数，它将无法正常运行(TypeError:网络错误)，因为请求被发送的表单导致的页面重新加载中断.但是，一旦添加，表单将不再发送.我认为问题不在于php代码，因为我根本没有更改它.可能是什么原因造成的?

The geocodeAddress() function uses fetch to send a http request. Before I added "event.preventDefault()" 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?

我之前在此帖子中遇到了相同的错误"TypeError:尝试获取资源时出现NetworkError"在表单上提交ReactJS

I had the same error in this post before 'TypeError: NetworkError when attempting to fetch resource' on form submit ReactJS

    <form action="private/database.php" method="POST" onsubmit="geocodeAddress(event.preventDefault())"> 
      <input type="text" name="surname" placeholder="性氏" required><br>
      <input type="text" name="given_name" placeholder="名字" required><br>
      <label for="male">
        <input type="radio" id="male" name="gender" required>
        男性
      </label>
      <label for="female">
        <input type="radio" id="female" name="gender">
        女性
      </label><br>
      <input type="text" name="email" placeholder="電子信箱" required><br>
      <input type="text" name="phone_number" placeholder="電話" required><br>
      <input type="text" id="address" name="address" placeholder="地址" required><br>
      <input type="hidden" id="lat" name="lat">
      <input type="hidden" id="lng" name="lng">
      <input type="date" name="cleaning_date" required><br>
      <input type="submit" name="form_submit">
    </form>
    <script>
        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}&key=AIzaSyDxsdfWYv25UrruPXLqeXKVYUnD-VyReA`)
            .then(handleErrors)
            .then(res => res.json())
            .then(data => {
              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 => console.log(error));
        }
    </script>

推荐答案

这是一个非常简单的问题. event.preventDefault()停止事件将执行的默认操作，在这种情况下，该操作将提交表单.这表示 fetch 不会被中断，但是当然，表单不会提交.

This is a pretty simple issue. event.preventDefault() stops the default action, that the event would do, which in this case is submitting the form. This means the fetch isn't interrupted, but of course, the form doesn't submit.

为解决此问题，您必须在获取成功后手动提交表单.这可以通过执行 event.target.submit()轻松完成.( event.target 引用了表单，因此我们只是调用表单的Submit函数)这是修改后的 geocodeAddress 函数，应该这样做:

In order to fix this, you have to manually submit the form after the fetch has succeeded. This can be easily done by executing event.target.submit(). (event.target references the form, so we are simply calling the submit function of the form) Here is the modified geocodeAddress function, that should do just that:

function geocodeAddress(event) {
  event.preventDefault() // prevent the submit from happening immediately
  const address = document.getElementById('address').value;
  fetch(`https://maps.googleapis.com/maps/api/geocode/json?address=${address}&key=AIzaSyDxsdfWYv25UrruPXLqeXKVYUnD-VyReA`)
    .then(handleErrors)
    .then(res => res.json())
    .then(data => {
      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();
      event.target.submit() // trigger the submit again once the fetch has finished
    })
    .catch(error => console.log(error));
}

哦，在表单的 onsubmit 中，您应该只具有"geocodeAddress()" .

Oh and also, in the onsubmit of the form, you should just have the "geocodeAddress()".

<form action="private/database.php" method="POST" onsubmit="geocodeAddress()"> 

这篇关于html格式在onSubmit函数之后没有发送的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！