Прочитане и промяна на стойностите на елементите в HTML формуляр
HTML формулярите са широко разпространени елементи в уеб сайтовете - от обикновени форми за обратна връзка до сложни интернет приложения (т. нар. RIA - Rich Internet Applications. Въпреки че всеки тип елемент може да бъде достъпен и променян посредством javascript, методите за постигане на това са доста различни. Ето как става това за всеки тип накратко:
Текстови input елементи
Стойностите на тези елементи се променят посредством свойството element.value:
function get_input_value(input) {
return input.value;
}
function set_input_value(input, value) {
input.value = value;
}
Групи радио бутони
Всяка група радио бутони се състои от няколко бутона с еднакво име. Те могат да се достъпят през съдържащата ги форма като form.elements['input_radio_name']. Този израз връща масив от всички радио бутони. За да се определи кой е текущия избран или да се избере точно определен е нужно да се итерират всички елементи и да се провери или промени свойството element.checked:
function get_radio_value(radiogroup) {
for (var i=0; i<radiogroup.length; i++) {
if (radiogroup[i].checked == true) {
return radiogroup[i].value;
}
}
return null;
}
function set_radio_value(radiogroup, value) {
for (var i=0; i<radiogroup.length; i++) {
if (radiogroup[i].value == value) {
radiogroup[i].checked = true;
}
}
}
Отметки (Checkboxes)
Единственото интересно свойство на отметките е дали те са отметнати или не. Това се определя от стойността на element.checked:
function is_checked(checkbox) {
return checkbox.checked == true;
}
function check(checkbox) {
checkbox.checked = true;
}
function uncheck(checkbox) {
checkbox.checked = false;
}
function toggle(checkbox) {
checkbox.checked = !checkbox.checked;
}
Падащи (Drop-down) менюта
Падащите менюта се състоят от няколко опции, всяка от която се характеризира с текст и стойност. Индексът на текущата избрана опция може да бъде определен чрез променливата element.selectedIndex. За да се избере определена опция се ползва свойството option.selected:
function get_select_value(select) {
return select.options[select.selectedIndex].value;
}
function get_select_text(select) {
return select.options[select.selectedIndex].text;
}
function set_select_value(select, value) {
for (var i=0; i<select.options.length; i++) {
if (select.options[i].value == value) {
select.options[i].selected = 'selected';
}
}
}
Меню с възможност за повече от един избор (Multiselect box)
Падащите менюта лесно могат да се превърнат в менюта с повече от един избор посредством атрибута select.multiple. Тогава вместо единични стойности, вече имаме масиви от стойности като рeзултати и параметри на горните функции:
function get_multi_select_values(select) {
var selected_values = new Array();
for (var i=0; i<select.options.length; i++) {
if (select.options[i].selected) {
selected_values.push(select.options[i].value);
}
}
return selected_values;
}
function get_multi_select_texts(select) {
var selected_texts = new Array();
for (var i=0; i<select.options.length; i++) {
if (select.options[i].selected) {
selected_texts.push(select.options[i].text);
}
}
return selected_texts;
}
function set_multi_select_values(select, values) {
for (var i=0; i<select.options.length; i++) {
if (values.indexOf(select.options[i].value) != -1) {
select.options[i].selected = 'selected';
} else {
select.options[i].selected = '';
}
}
}
Многоредово текстово поле (Textarea)
Многоредовите полета се държат по същи начин както текстовите полета - просто се променя или чете стойността на element.value атрибута.
Малко по-пълен пример на всичко дотук може да намерите тук: http://www.ustrem.org/code/html-elements-values/values.htm
Няма коментари
Обратно към списъка със статиите
Тази страница последно е променяна на 2024-04-29 02:48:55