Получение и установка значений текстового поля ввода
Функция для проверки длины имени пользователя студента
<html>
<head>
<script>
function checkUserName( form ) {
if ( form.reg.value.length != 8 ) {
alert( "You have not entered an eight character string" );
return false;
} else {
alert( "This is correct" );
return true;
}
}
</script>
</head>
<body>
<p> Please enter your student username: <input type="text" name="reg" />
<input type="button" onclick="checkUserName(form);" value="check validity"/>
</body>
</html>Эта форма содержит текстовое поле ввода и кнопку ввода. Форма предназначена для демонстрации того, как получить и установить текст в текстовое поле. HTML-код кнопки ввода включает атрибут обработчика событий. нажатие кнопки вызывает функцию, которая:
- извлекает значение в текстовом поле
- отображает текст в диалоговом окне предупреждения
- очищает текстовое поле, задав для него пустую строку: «»
Получение и установка текста в текстовом поле ввода выполняется с помощью свойства value поля ввода. Например, если есть форма с именем test и поле ввода с именем firstName, то текст в поле можно получить следующим образом:
result = document.test.firstName.value
Точно так же текст можно разместить в поле следующим образом:
document.test.firstName.value = «Привет, мир!»
Необычно видеть эту форму в функции, предназначенной для выполнения некоторых операций с формой. Чаще всего ссылка на объект формы, объект ввода или текстовое значение передается функции из вызывающего ее обработчика событий. Вот что происходит в этом примере. Функция вызывается обработчикомonClick="" в теге кнопки ввода:
onClick = ”showAndClearField (this.form)”
Ключевое слово this относится к тегу ввода. Для удобства каждый входной объект имеет свойство с именем form, которое относится к форме, в которой он находится. Следовательно, this.form содержит ссылку на объект формы, и это то, что передается функции.
В функцию передается ссылка на форму. Поскольку список параметров функции содержит переменную с именем frm, ссылка на форму будет скопирована в frm. Теперь данные в текстовом поле можно прочитать с помощью:
frm.firstName.value
Установить текстовое поле в строку можно следующим образом:
frm.firstName.value = «Привет, мир»
Вот полная HTML-страница. Наиболее важные части страницы выделены зеленым и подробно описаны ниже.
function showAndClearField (frm)
Эта функция вызывается при нажатии кнопки в форме. Параметр frm должен получать ссылку на форму. Ссылка в этом случае эквивалентна document.test, который является другим способом ссылки на форму - как на свойство объекта документа. Функция предназначена для сообщения о том, что находится в текстовом поле, а затем для его очистки.
if (frm.firstName.value == «»)
Эта строка проверяет, осталось ли поле ввода текста пустым.
frm.firstName относится к текстовому полю ввода с именем firstName в форме.
frm.firstName.value относится к значению в поле.
alert («Поле содержит текст:« + frm.firstName.value)
Здесь frm.firstName.value также извлекает значение, которое было введено в поле ввода firstName. В этом случае он присоединяется к другой строке и отображается в диалоговом окне предупреждения.
frm.firstName.value = «»
Ближе к концу этой короткой функции поле очищается путем установки его значения на пустую строку.
‹form name =” test ”›
Поскольку в этом примере никогда не используется document.test для доступа к форме, на самом деле нет необходимости на самом деле давать форме имя. Однако это хорошая практика.
‹input type =” text ”name =” firstName ”›
Чтобы ссылаться на поле ввода текста, тег HTML, который его создает, должен иметь атрибут name.
‹input type =” button ”Value =” Показать и очистить ввод ”onClick =” showAndClearField (this.form) ”›
Тег кнопки содержит onClick = ”” обработчик событий. В результате при каждом нажатии кнопки (или «нажатии») выполняется Javascript внутри кавычек. В этом случае вызывается функция с именем showAndClearField, и ей передается параметр this.form. Всякий раз, когда вы видите слово this, используемое в обработчике событий в теге HTML, слово this относится к объекту Javascript, который отражает (или представляет) объект HTML, созданный тегом. . В данном случае this относится к кнопке. Каждый элемент формы также имеет свойство, которое относится к форме, в которой он находится. Итак, this.form - это ссылка на объект формы, в котором находится кнопка. Таким образом, мы передаем ссылку на форму в функция.
Функции и формы - Радиокнопки
Получить текущее выбранное значение радиокнопки из радиомассивов.
getRadioValue передается ссылка на массив переключателей и возвращает значение переключателя, который отмечен, или возвращает пустую строку. Это полезно только в том случае, если для каждой радиокнопки задано значение в теге HTML, который создает радиокнопку.
Пример
<input type="radio" name="r" value="y"> <input type="radio" name="r" value="z">function getRadioValue( radioArray ) { var i; for ( i = 0; i < radioArray.length; i++ ) { if ( radioArray[ i ].checked ) { return radioArray[ i ].value; } } return ""; }
Функции и формы - флажки
Получите массив с проверенными значениями
getCheckValuesA передается ссылка на массив флажков. Так как ни один флажок, один флажок или несколько флажков могут быть отмечены, эта функция возвращает массив значений отмеченных флажков. Если ни один не отмечен, массив имеет нулевую длину. Это полезно только в том случае, если для каждого флажка есть значение, определенное для него в теге HTML, который создает кнопку флажка.
Пример
<input type="checkbox" name="c" value="y"> <input type="checkbox" name="c" value="z">function getCheckValuesA( checkBoxArray ) { var values = []; for ( i = 0; i < checkBoxArray.length; i++ ) { if ( checkBoxArray[ i ].checked ) { values[ values.length ] = checkBoxArray[ i ].value; } } return values; }
Получить строку с проверенными значениями
getCheckValuesS передается ссылка на массив флажков. Поскольку ни один флажок, один флажок или несколько флажков не могут быть отмечены, эта функция возвращает строку значений флажков, разделенных значением, переданным в параметре разделителя. Если ни один не отмечен, строка будет пустой. Это полезно только в том случае, если для каждого флажка есть значение, определенное для него в теге html, который создает кнопку флажка.
Пример
function getCheckValuesS( checkBoxArray, separator ) {
var tempString = "";
var count = 0;
for ( i = 0; i < checkBoxArray.length; i++ ) {
if (checkBoxArray[ i ].checked) {
if ( count > 0 ) {
tempString += separator; //don't put the separator
//before the first value
}
tempString += checkBoxArray[ i ].value;
count++;
}
}
return tempString;
}Функции и формы - Выбрать
Получите выбранное значение
getSelectedValue возвращает значение текущей выбранной опции в списке выбора одного элемента. Для того, чтобы это работало, необходимо установить значение опций. Например, здесь функция вернет 'x' или 'y':
<select name="s">
<option value="x">the variable x</option>
<option value="y">the variable y</option>
<select>Пример
function getSelectedValue( selectList ) {
return selectList[ selectList.selectedIndex ].value;
}Получить выделенный текст
getSelectedText возвращает текст выбранной в данный момент опции в списке выбора одного элемента. В приведенном ниже примере будет возвращена либо «переменная x», либо «переменная y».
<select name="s">
<option value="x">the variable x</option>
<option value="y">the variable y</option>
<select>Пример
function getSelectedText( selectList ) {
return selectList.options[ selectList.selectedIndex ].text;
}Функции и формы - Выбрать несколько
Получить массив выбранных значений
Функция getMSelectValuesA( selectList ) получает ссылку на список множественного выбора и возвращает массив значений, выбранных в списке. В списке выбора HTML ниже, в зависимости от выбранных параметров, эта функция будет возвращать пустой массив (если элементы не были выбраны) или значения «x» и или «y». Примечание: для того, чтобы это работало, необходимо использовать атрибут VALUE тега option.
<select name="s" multiple>
<option value="x">the variable x</option>
<option value="y">the variable y</option>
<select>Пример
function getMSelectValuesA( selectList ) {
var i;
var values = [];
for ( i = 0; i < selectList.length; i++ ) {
if ( selectList.options[ i ].selected ) {
values[ values.length ] = selectList.options[ i ].value;
}
}
return values;
}Получите выбранное значение
Функция getMSelectValuesS( selectList, separator ) получает ссылку на список множественного выбора и возвращает строку значений, выбранных в списке. Каждое значение отделяется символом или строкой, переданной в параметре-разделителе. В списке выбора HTML ниже, в зависимости от выбранных параметров, эта функция будет возвращать пустую строку (если элементы не были выбраны) или значения «x» и или «y». Примечание: для того, чтобы это работало, необходимо использовать атрибут VALUE тега option.
<select name="s" multiple>
<option value="x">the variable x</option>
<option value="y">the variable y</option>
<select>Пример
function getMSelectValuesS( selectList, separator ) {
var i;
var count = 0;
var tempString = "";
for ( i = 0; i < selectList.length; i++ ) {
if ( selectList.options[ i ].selected ) {
if ( count > 0 ) {
tempString += separator;
}
tempString += selectList.options[i].value;
count++;
}
}
return tempString;
}Получить массив выделенного текста
Функция getMSelectTextA( selectList ) получает ссылку на список множественного выбора и возвращает массив текста, выбранного в списке. В списке выбора HTML ниже, в зависимости от выбранных опций, эта функция вернет пустой массив (если ни один элемент не был выбран) или значения «переменная x» и или «переменная y». Примечание: для того, чтобы это работало, атрибут VALUE тега option НЕ требуется, поскольку возвращается текст опции.
<select name="s" multiple>
<option value="x">the variable x</option>
<option value="y">the variable y</option>
<select>Пример
function getMSelectTextA( selectList ) {
var i;
var values = [];
for ( i = 0; i < selectList.length; i++ ) {
if ( selectList.options[ i ].selected ) {
values[ values.length ] = selectList.options[ i ].text;
}
}
return values;
}Получить строку выделенного текста
Функция getMSelectTextS(selectList, separator) получает ссылку на список множественного выбора и возвращает строку текста, выбранного в списке. Каждое значение отделяется символом или строкой, переданной в параметре-разделителе. В списке выбора HTML ниже, в зависимости от выбранных опций, эта функция будет возвращать пустую строку (если не были выбраны никакие элементы) или значения «переменная x» и или «переменная y». Примечание: для того, чтобы это работало, атрибут VALUE тега option НЕ требуется, поскольку возвращается текст опции.
<select name="s" multiple>
<option value="x">the variable x</option>
<option value="y">the variable y</option>
<select>Пример
function getMSelectTextS( selectList, separator ) {
var i;
var count = 0;
var tempString = "";
for ( i = 0; i < selectList.length; i++ ) {
if ( selectList.options[ i ].selected ) {
if ( count > 0 ) {
tempString += separator;
}
tempString += selectList.options[ i ].text;
count++;
}
}
return tempString;
}