Блог

Главная - Вопросы по программированию - Запретить отправку формы, но отразить ее в URL

Запретить отправку формы, но отразить ее в URL

#javascript

Вопрос:

Работая с vanilla JS, есть ли «способ», которым я мог бы по существу event.preventDefault отражать URL-адрес в форме. Я хочу дать людям возможность копировать и вставлять ссылку и делиться ею со своими друзьями. Мой код javascript делает что-то вроде

 searchKeywordForm.addEventListener('submit', async (event) => {
    event.preventDefault();

    //Clear all courseItems and start from scratch
    courseItems = [];
    courseContainerElement.innerHTML = "";
    let searchInput = document.getElementById("keywords");
    await fetchDataByKeywords(searchInput.value);
})

При этом это не отражается в URL-адресе, который я могу сделать file:///C:/Users/bobby/Desktop/twitdemy/index.html?keywords=cas
Я уже выполнил некоторые проверки для queryString, поэтому, по сути, это работает.

Прямо сейчас, поскольку существует event.preventDefault URL, он в основном статичен в file:///C:/Users/bobby/Desktop/twitdemy/index.html

Комментарии:

1. developer.mozilla.org/en-US/docs/Web/API/History/pushState

Ответ №1:

Вы можете использовать history.pushState() для изменения текущего URL-адреса без перезагрузки страницы

 const searchKeywordForm = document.forms.keyform

searchKeywordForm.addEventListener('submit', (e) => {
  e.preventDefault();
  const searchInput = document.getElementById("keywords"),
        newUrl =  `${searchKeywordForm.action}?key=${searchInput.value}`;
        
  history.pushState(null, null, newUrl)
  // log current location to see changes
  console.log(location.href)
}) 
 <form id="keyform" action="/formsubmiturl">
  <input id="keywords" value="foo" />
  <button>Submit</button>
</form>
Метки: ,