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

У меня есть общая функция 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

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

$(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>

UPDATE:

Если вы дадите свою кнопку, то вещи могут быть еще проще:

<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

Есть несколько способов приблизиться к этому. Лично я бы избегать встроенных скриптов. Поскольку вы отметили 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());
    });
});

Ответ 4

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

Ответ 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; заключается в том, чтобы предотвратить отправку фактической формы (если вы этого хотите).