Заполнить форму с помощью jQuery

Я пытаюсь использовать jQuery для заполнения формы некоторыми значениями по умолчанию.

Форма содержится в div с идентификатором. На самом деле у каждого элемента есть идентификатор, я сделал это только для того, чтобы иметь возможность быстро выбрать каждую часть формы, используя синтаксис $("#id").
Вот форма:

<div id="panel" style="position: absolute; left: 190px; top: 300px; width: 400px; height: 300px; border: medium groove brown; background: none repeat scroll 0% 0% black; z-index: 100; color: white;">
<form id="form_coord_0">  
X <input type="text" style="height: 25px; font-size: 10px;" size="2" name="X" id="coordX_0"/>  
Y <input type="text" style="height: 25px; font-size: 10px;" size="2" name="Y" id="coordY_0"/>  
<input type="button" id="edit_0" value="M"/>  
<input type="button" id="remove_0" value="-"/>  
<input type="button" id="add_0" value="+"/>  
<input type="button" id="go_0" value="go!"/>  
</form>
</div>

Мне нужно установить текстовое поле coordX_0 с некоторым значением, скажем: 123.

Я думал, что смогу сделать

$("#coordX_0").text.value = 123;

Но, похоже, это не работает. Любой намек?


forms jquery fill
person nick2k3    schedule 18.01.2012    source источник
comment
api.jquery.com/val, документация — ваш друг.   -  person Jasper    schedule 18.01.2012
comment
Спасибо, Джаспер, я новичок в jQuery (ну, даже в js:D). Я даже не знал, что существует метод val().   -  person nick2k3    schedule 18.01.2012
comment
@ nick2k3 Первое, что я сделал при изучении jQuery, — это просмотрел документацию API и увидел все доступные функции и демонстрации того, как их использовать. Я сделал это, чтобы иметь хотя бы базовое представление о том, что позволит мне делать фреймворк. Например, функция .val() может принимать функцию в качестве аргумента, если вы хотите обрабатывать несколько входных данных формы одновременно, вы можете увидеть мой ответ ниже для примера того, как это сделать: stackoverflow.com/questions/8914161/заполнить-форму-с- jquery/   -  person Jasper    schedule 18.01.2012
comment
@Jasper я запутался, потому что, когда я гуглил, как редактировать форму с помощью javascript, я всегда находил что-то вроде document.form[0].text.value= 123. В то время как с jquery мне нужно искать какую-то функцию, которая делает это .. Я осталось только потренироваться :)   -  person nick2k3    schedule 18.01.2012
comment
@ nick2k3 Это выберет вход с именем text в первой форме в DOM (обратите внимание, что нулевой индекс означает первый) и установит для него значение 123. В вашем случае вы должны использовать document.forms[0]['coordX_0'].value = "123"; Вот демонстрация: jsfiddle.net/86UdQ. Я все же рекомендую внимательно прочитать документацию, там будут некоторые вещи, о существовании которых вы не подозревали.   -  person Jasper    schedule 18.01.2012

Ответы (9)


arrow_upward
31
arrow_downward

Вы можете использовать функцию val() для установки входных значений.

$("#coordX_0").val(123);

Между прочим, ваш исходный код можно заставить работать, установив свойство value для фактического базового элемента dom. Вы получаете доступ к элементу dom, индексируя результаты jQuery:

$("#coordX_0")[0].value = 123;
person Adam Rackis    schedule 18.01.2012
comment
Большое спасибо! Это решило это. Вы или кто-нибудь случайно не знаете, где я могу найти обширную документацию о том, какой метод я могу вызывать для таких объектов? (что-то вроде JavaDoc, но для javascript и DOM). - person nick2k3; 18.01.2012
comment
Ну, документы jQuery фантастические, но нативные документы dom ?? - не пришло мне в голову. - person Adam Rackis; 18.01.2012
comment
@nick2k3 Попробуйте документы MDN: developer.mozilla.org/en/DOM/HTMLInputElement . Просто найдите в Google (или где-то еще) [the property I want to know about] MDN, где [the property I want to know about] будет что-то вроде element value. - person Jasper; 18.01.2012

arrow_upward
18
arrow_downward

Все ответы одинаковы, поэтому я решил опубликовать что-то другое:

var inputs_to_values = {
    'coordX_0' : 'some value',
    'coordY_0' : 'some other value',
    'edit_0'   : 'N',
    'remove_0' : '_',
    'add_0'    : '-',
    'go_0'     : 'stop?'
};
$('#form_coord_0').find('input').val(function (index, value) {
    return inputs_to_values[this.id];
});

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

Функция, возвращающая значение для установки.

this — текущий элемент.

Получает позицию индекса элемента в наборе и старое значение в качестве аргументов.

Источник: http://api.jquery.com/val

Приведенный выше код предполагает, что каждый ввод будет иметь свойство в объекте inputs_to_values, поэтому вы сможете преобразовать идентификатор ввода в новое значение для этого ввода.

Вот демо: http://jsfiddle.net/zYfpE/

person Jasper    schedule 18.01.2012
comment
Я искал что-то подобное, я был уверен, что в jquery есть нативный метод, но это все равно достаточно компактно. Очень нравится это. - person AndreaBogazzi; 24.11.2014
comment
Этот короткий и простой в использовании метод — именно то, что мне нужно, и я думаю, что он отлично отвечает на вопрос. Спасибо! - person Yatko; 09.01.2015

arrow_upward
3
arrow_downward

Чтобы установить значение поля ввода, его

$("#coordX_0").val(123)
person Pastor Bones    schedule 18.01.2012

arrow_upward
3
arrow_downward 

$("#coordX_0").val("123");

Вам тоже нужны цитаты, я думаю. Хотя это может работать в обе стороны.

person Tom    schedule 18.01.2012

arrow_upward
3
arrow_downward

Вместо этого попробуйте это, используя метод val:

$("#coordX_0").val('some string or number');
person Matt Fenwick    schedule 18.01.2012

arrow_upward
3
arrow_downward

Просто пиши:

$("#coordX_0").val(123);

В jQuery text — это функция для извлечения текста из dom.

person Lai Yu-Hsuan    schedule 18.01.2012

arrow_upward
2
arrow_downward

Используйте метод val для установки текста любого поля input.

$("#coordX_0").val(123);
person ShankarSangoli    schedule 18.01.2012

arrow_upward
2
arrow_downward

используйте функцию val

$("#coordX_0").val("123");
person Jason    schedule 18.01.2012

arrow_upward
1
arrow_downward

Используйте это вместо этого:

$("#coordX_0").val("123");
person Kyle Trauberman    schedule 18.01.2012