Как мой пользователь может нажать enter или нажать кнопку, чтобы отправить и перенаправить?

#javascript #html

#javascript #HTML

Вопрос:

Итак, у меня есть эта html-форма:

 <form>
    <input type="text" placeholder="Equation" id="equation_input" onsubmit="return button_click()"/>
    <input class = "search_button" type="submit" id="search" onclick="button_click()" value="Search"/>
</form>

И мне нужно взять значение, введенное пользователем при вводе уравнения, добавить его в начало URL-адреса, а затем перенаправить пользователя на этот вновь сформированный URL-адрес.
Я попробовал это в тегах моего скрипта:

 function button_click() {
    var url = `https://exampleurl.com?q=${document.getElementById('equation_input').value}`;
    window.location.replace(url);
}

Я пробовал пару вещей, но я не уверен, что вызывает проблему, поэтому я точно не знаю, что попробовать.

1. в чем проблема?

2. Я не знаю. Но мои кнопки просто перезагружают страницу вместо перенаправления пользователя. Idk, какая часть вызывает это.

3. Это потому, что вы не препятствуете отправке формы по умолчанию.

4. По-прежнему не имеет смысла, что вам нужно, когда вы можете использовать отправку по умолчанию вместо этого. Проведите некоторое исследование в event.preventDefault()

Ответ №1:

Для этого не нужен какой-либо js. Это можно сделать с помощью формы отправки по умолчанию, указав входные данные и установив атрибуты действия и метода формы.

Обратите внимание, что у an <input> нет submit события, только a <form>

 <form method="GET" action="https://exampleurl.com">
  <input type="text" placeholder="Equation" id="equation_input" name="q" required/>
  <input class="search_button" type="submit" id="search" value="Search" />
</form>

1. Использование ввода в качестве метода отправки никогда не является лучшим решением. <button> все будет в порядке.

2. @Spectric Предоставьте ссылку на это утверждение. <input type="submit"/> используется с момента создания форм. Я лично использую button, но оба действительны

3. Использование <input> избыточно, так как вам нужно добавить type="submit" . <button> автоматически устанавливается на отправку при нажатии. Кроме того, если вы лично используете button, то почему вы поощряете использование ввода?

4. @Spectric Хорошо, но это просто личные предпочтения

5. Вы совершенно правы. Я просто иногда придирчивый 😉