表单不会返回所需的结果

Question

My form will not return the required results in JSON format, done by the script tag after the form.

Any advice as to what I am doing wrong?

<form action="/lookup/:url" method="GET">
  <div class="inner-form">
    <div class="input-field first-wrap">
      <div class="svg-wrapper">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                            <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 "></path>
                        </svg>
      </div>
      <input id="search" type="text" placeholder="Paste a domain here" />
    </div>

    <div class="input-field second-wrap">
      <button class="btn-search" type="submit">SEARCH</button>
    </div>

  </div>
  <span class="info">ex. JeepBeef.com</span>
</form>

<script>
  data = await fetch("/lookup/:url").then(result => result.json())
</script>

Answer 1

Listen for the form's "submit" Event , use Event.preventDefault() and than do your AJAX stuff.

async function onFormSubmit(ev) {
  ev.preventDefault();
  const EL_form = ev.currentTarget;
  return (await fetch(EL_form.action)).json();
}

const ELS_form = document.querySelectorAll("form[action]");
ELS_form.forEach((el) => el.addEventListener("submit", (ev) => {
  onFormSubmit(ev).then(res => console.log(res));
}));

MDN: Using Fetch

If later you decide to send your FormData with fetch()

• Make sure to use name="search" for your ID search field
• Use the fetch data Object:

const FD = new FormData(EL_form);
fetch(EL_form.action, {method: 'post', body: FD})