Как заменить базовый URL-адрес действия формы, используя JavaScript?

Question

Я пытаюсь сделать простой поиск по Википедии, где я могу ввести то, что я хочу найти, и выбрать, где я могу выбрать язык. Я пытаюсь получить значение select для возможности поиска на разных языках, поэтому я просто заменяю строку языка в URL-адресе wikipedia.org

(например, если я выбираю французский в выбранном выпадающий список должен перенаправить меня на fr.wikipedia.org, и если я выберу Engli sh, он перенаправит меня на en.wikipedia.org)

Вот что я пробовал до сих пор:

<form id="searchWikipedia" action="" onsubmit="searchWikipedia()">
  <input id="search" name="search" type="text" />
  <select id="lang" name="language">
    <option value="en">English</option>
    <option value="fr">French</option>
  </select>
</form>

<script>
function searchWikipedia() {
  var select = document.getElementById("lang");
  var selectValue = select.options[select.selectedIndex].value;
  var searchValue = document.getElementById("search").value;

  document.getElementById("searchWikipedia").action = selectValue + ".wikipedia.org/w/index.php?search=" + searchValue;
  document.getElementById("searchWikipedia").submit();
}
</script>

Теперь при отправке я получаю этот URL: http://localhost/en.wikipedia.org/w/?search=cat

Я ожидаю, что браузер должен перенаправить на en.wikipedia.org/w/?search = cat

Как заменить базовый URL-адрес действия формы с помощью JavaScript? Есть ли лучшие способы сделать это?

Answer 1

вам нужно добавить протокол в начале URL-адреса, иначе браузер примет его как относительный URL-адрес вашего документа.

<form id="searchWikipedia" action="" onsubmit="searchWikipedia()">
  <input id="search" name="search" type="text" />
  <select id="lang" name="language">
    <option value="en">English</option>
    <option value="fr">French</option>
  </select>
</form>

<script>
function searchWikipedia() {
  var select = document.getElementById("lang");
  var selectValue = select.options[select.selectedIndex].value;
  var searchValue = document.getElementById("search").value;

  // append https at the start
  document.getElementById("searchWikipedia").action = "https://" + selectValue + ".wikipedia.org/w/index.php?search=" + searchValue;
  document.getElementById("searchWikipedia").submit();
}
</script>

Answer 2

Добавить Отправить тег ввода, чтобы выполнить действие

<form id="searchWikipedia" action="" onsubmit="searchWikipedia(event)">
    <input id="search" name="search" type="text" />
    <select id="lang" name="language">
      <option value="en">English</option>
      <option value="fr">French</option>
    </select>
    <input type="submit" value="Search">
  </form>
  <script>
    function searchWikipedia(event) {
    event.preventDefault();
    var select = document.getElementById("lang");
    var selectValue = select.options[select.selectedIndex].value;
    var searchValue = document.getElementById("search").value;
    
  // it will open new tab 
window.open("https://" +  selectValue + ".wikipedia.org/w/index.php?search=" + searchValue);

// if you want to replace same url then use this
// window.location.replace(`https://${selectValue}.wikipedia.org/w/index.php?search=${searchValue}`);

  }
  </script>

Я думаю, это будет полезно для вас.