Как получить значение текстового поля ввода с помощью JavaScript?

Я бы создал переменную для хранения введенного значения следующим образом:

var input = document.getElementById("input_id").value;

А затем просто использовал бы эту переменную, чтобы добавить введенное значение к строке:

var result = "Ваша строка: " + input;

Вы можете использовать следующий код:

var input = document.getElementById("searchTxt");

function searchURL() {
     window.location = "http://www.myurl.com/search/" + input.value;
}

И соответствующий HTML:

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

Уверен, что существуют более современные и эффективные способы реализации данной функциональности, но приведенный выше вариант хорошо работает во всех браузерах и требует минимальных знаний JavaScript для его создания, улучшения и редактирования.

Вы также можете обращаться к значениям элементов по их именам, например так: form_name.input_name.value;. В этом случае вы получите конкретное значение определенного input в заданной форме.

Вы можете получить значение поля ввода с помощью searchTxt.value.

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

<script type="text/javascript">
  function searchURL(){
    console.log(searchTxt.value);
    // window.location = "http://www.myurl.com/search/" + searchTxt.value;
  }
</script>

<!-- Кнопка для тестирования -->
<button class="search" onclick="searchURL()">Поиск</button>

Таким образом, при нажатии на кнопку будет выведено значение, введенное в поле, в консоль. Вы можете также раскомментировать строку с перенаправлением, чтобы отправлять запрос на сервер.

Если у вас есть form, и вы хотите получить значения после отправки, можно сделать так:

<form onsubmit="submitLoginForm(event)">
    <input type="text" name="name">
    <input type="password" name="password">
    <input type="submit" value="Login">
</form>

<script type="text/javascript">
    function submitLoginForm(event) {
        event.preventDefault();

        console.log(event.target['name'].value);
        console.log(event.target['password'].value);
    }
</script>

Преимущества такого подхода: например, если на вашей странице есть 2 form для ввода информации об отправителе и получателе.

Если вы не используете form, чтобы получить значения, то:

• Вам нужно будет установить два различных id (или tag, или name...) для каждого поля, такие как sender-name и receiver-name, sender-address и receiver-address и так далее.
• Если вы зададите одинаковые значения для двух полей ввода, то после вызова getElementsByName (или getElementsByTagName...) вам нужно будет помнить, что 0 или 1 соответствует sender или receiver. В дальнейшем, если вы измените порядок двух form в HTML, вам придется снова проверять этот код.

Если вы используете form, то можете использовать одни и те же имена, такие как name, address и так далее. Это значительно упрощает работу с данными, особенно когда у вас несколько форм на странице.