Как передать входное значение формы в функцию JavaScript

#javascript #jquery #html #forms

#javascript #jquery #HTML #формы

Вопрос:

У меня есть общая функция JavaScript, которая принимает один параметр

 function foo(val) { ...}

и я хочу вызвать функцию при отправке формы

 <form>
<input type="text" id="formValueId"/>
<input type="button" onclick="foo(this.formValueId)"/>
</form>

но выражение foo(this.formValueId) не работает (не удивлен, это была отчаянная попытка), поэтому вопрос в том, как я могу передать значение формы функции javascript.
Как я уже упоминал, javascript является универсальным, и я не хочу манипулировать формой внутри него!

Я мог бы создать вспомогательную функцию в середине, чтобы получить значения формы с помощью jQuery (например), а затем вызвать функцию, но мне было интересно, смогу ли я сделать это без вспомогательной функции.

1. Это может быть вашим ответом. демонстрация: jsbin.com/icikav/5/edit#javascript ,html Метод, который вы пытаетесь вызвать, не определен.

2. Имейте в виду, что эту форму можно отправить, нажав Enter в текстовом поле (но не в IE), и нажатие кнопки не будет запущено.

Ответ №1:

Возможно, было бы удобнее удалить встроенный обработчик кликов и сделать это следующим образом:

 $(document).ready(function() {
    $('#button-id').click(function() {
      foo($('#formValueId').val());
    });
});

Ответ №2:

Дайте вашим входным данным имена, это упростит задачу

 <form>
<input type="text" id="formValueId" name="valueId"/>
<input type="button" onclick="foo(this.form.valueId.value)"/>
</form>

Обновить:

Если вы дадите своей кнопке идентификатор, все может быть еще проще:

 <form>
<input type="text" id="formValueId" name="valueId"/>
<input type="button" id="theButton"/>
</form>

Javascript:

 var button = document.getElementById("theButton"),
value =  button.form.valueId.value;
button.onclick = function() {
    foo(value);
}

Ответ №3:

Используйте onclick="foo(document.getElementById('formValueId').value)"

Ответ №4:

Есть несколько способов подойти к этому. Лично я бы избегал встроенных сценариев. Поскольку вы отметили jQuery, давайте воспользуемся этим.

HTML:

 <form>
    <input type="text" id="formValueId" name="valueId"/>
    <input type="button" id="myButton" />
</form>

JavaScript:

 $(document).ready(function() {
    $('#myButton').click(function() {
      foo($('#formValueId').val());
    });
});

Ответ №5:

Ну, ты можешь сделать это таким образом.

     <input type="text" name="address" id="address">
        <div id="map_canvas" style="width: 500px; height: 300px"></div>
    <input type="button" onclick="showAddress(address.value)" value="ShowMap"/>

Java Script

 function showAddress(address){

    alert("This is address :" address)

}

Это один из примеров того же. и это будет выполняться.

Ответ №6:

Более стабильный подход:

 <form onsubmit="foo($("#formValueId").val());return false;">
<input type="text" id="formValueId"/>
<input type="submit" value="Text on the button"/>
</form>

Это return false; делается для предотвращения фактической отправки формы (при условии, что вы этого хотите).