Поиск по сайту

PHP Поиск

- Посещаемость интернет-магазина роз выросла в несколько раз.
- Предлагаем по лучшей цене межкомнатные двери москва с доставкой

Формы и javascript. FORM

Содержание:

1. Как я могу использовать select box как навигационное меню?
2. Как я могу использовать картинку для кнопки submit?
3. Как я могу передавать данные между формами на различных страницах, используя JavaScript?
4. Почему document.formName.selectObject.value не отражает значение выбранного пункта в списке?
5. Как мне получить значение выбранной в данный момент radio button в radio group или группе checkboxes?
6. Как мне получить форму, чтобы инициировать процесс запуска клавишей Enter?
7. Как я могу отключить поле текстового ввода?
8. Как сделать загрузку страницы при выборе флажка?

Как я могу использовать select box как навигационное меню?

При использовании простого JavaScript, вы можете использовать select box для передвижения по сайту. Рассмотрите этот пример:

<FORM name="navForm">
<select name="menu"
onChange = "self.location = 
  document.navForm.menu[document.navForm.menu.selectedIndex].value;">
<option value="home.html">Home</option>
<option value="links.html">Links</option>
<option value="contact.html">Contact Info</option>
</select>

Просто сохраните URL различных страниц в option value. Обработчик события OnChange вызовет перенаправление расположения, когда значение в поле изменено.

Вы могли бы использовать этот код, чтобы изменить расположение другого фрейма изменением 'self.location =' на 'top.framename.location ='

Как я могу использовать картинку для кнопки submit?

Часто возникает вопрос: "Как инициировать форму по картинке, а не по кнопке submit?" Решение столь же просто, как этот пример:

<form>
<input type="image" name="cancel" src="cancel.gif" alt="Cancel!" border=0>
<input type="image" name="continue" src="continue.gif"
	alt="Click to Continue" border=0>
</form>

Когда нажимается любая кнопка, форма инициируется и координаты x/y щелчка мыши на кнопке загружаются в объект запроса. Например, если пользователь выбрал Cancel!, объект запроса будет содержать переменные cancel.x и cancel.y. Точно так же щелчок на Continue привел бы к переменным continue.x и continue.y.

Здесь важно отметить, что элементы .x и .y - не переменные объектов continue или cancel, а фактически часть имени "continue.x". Следовательно, нельзя использовать типичный метод для определения существования одного из дочерних объектов запроса:

if (request.normalItem)
  act();
if (request.continue.x) // Noooo! Produces horrible error messages!
  doContinuingThings();

Тем не менее рассмотрите это:

if (request['normalItem'])
  act();
if (<B>request['continue.x']</B>) // Much better :)
  doContinuingThings();

Благодаря названным массивам JavaScript, можно проверить какая картинка инициировала форму.

Для некоторых приложений, полезно знать координаты курсора на нажатой картинке. Эта информация, конечно, содержится в парах image_element.x и image_element.y. Следующий серверный JavaScript мог бы использоваться для этого:

x=0;
y=0;
if ((request['my_submit_image.x']) (request['my_submit_image.y'])) {
  x = parseInt(request['my_submit_image.x']);
  y = parseInt(request['my_submit_image.y']);
}

Передача данных между формами на различных страницах

В качестве простого примера, предположите, что ваша "домашняя" страница запрашивает имя пользователя, затем использует это имя, чтобы обратиться к пользователю на следующих страницах. Вы можете взять имя, используя форму, затем использовать JavaScript для передачи имени пользователя в следующую страницу, используя URL. Последующая страница могла бы затем анализировать имя пользователя из URL, используя информацию в document.search.

home.html

<html> <head> <script language="JavaScript">
function nextPage() {
 self.location = "next.html?name=" +
 	escape(document.theForm.userName.value);
 // Use escape() any time there might be spaces or
} // non-alpa characters
</script>
</head>
<body>
<form onSubmit = "nextPage();return false;">
Enter your name: <input type=text name=userName>
<input type=submit>
</form>
</body>
</html>

next.html

userName = document.search;
userName = userName.substring(userName.indexOf("=")+1);
document.write("Greetings, " + userName + "<P>");

Почему document.formName.selectObject.value не отражает значение выбранного пункта в списке?

Потому что объект работает не таким образом. Правильный и полный синтаксис для доступа к VALUE только что выбранным полем в списке - это:

Document.form.selectObject[document.form.selectObject.selectedIndex].value

Как мне получить значение выбранной в данный момент radio button в radio group или группе checkboxes?

Существует свойство, созданное в объекте form для каждой radio buttons или checkboxes с тем же самым именем. Например, следующий HTML код:

<form name='theForm'>
<input type=radio name="gender" value="Male">Male
<input type=radio name="gender" value="Female">Female
<input type=radio name="gender" value="Evasive">Not Specified
</form>

приводит к созданию 3-х элементов массива, вызываемых с помощью document.theForm.gender. Чтобы определить значение выбранной кнопки (или checkbox'а), вам нужно проверить свойство checked каждого из элементов. Например:

function checkIt() {
 theGroup = document.theForm.gender;
 for (i=0; i< theGroup.length; i++) {
     if (theGroup[i].checked) {
	 alert("The value is " + theGroup[i].value);
	 break;
	 }
     }
}

Как мне получить форму, чтобы инициировать процесс запуска клавишей Enter?

Форма отправляется, если нажата клавиша enter, в то время как единственный входной текстовый элемент формы имеет фокус. Вы можете вызывать подобное поведение в форме, имеющей более одного элемента, разбивая форму на ряд отдельных форм, так, чтобы каждая форма имела только один текстовый элемент. Используйте обработчик события onSubmit (или action="javascript:myFunction();") для накопления данных из других форм в вашей странице и инициируйте их все сразу.

Как я могу отключить поле текстового ввода?

Используйте обработчик onfocus для вызова функции blur():

<INPUT TYPE="text" NAME="aTextField" ONFOCUS="this.blur()">

Если вы хотите динамически отключать/включать поле, используйте функцию skip (e)

{ this.blur(); }
  <A HREF="javascript:document.formName.aTextField.onfocus = skip; void
0">disable text field</A>
  <A HREF="javascript:document.formName.aTextField.onfocus = null; void
0">enable text field</A>

Как сделать загрузку страницы при выборе флажка?

Используйте обработчик OnChange для вызова функции submit():

<form method=get OnChange='this.submit();'>
  <input type=checkbox name="fnew">Только новые
</form>

Другие примеры работы с формами на javascript
Читать дальше: Методы и функции JavaScript

Содержание:

Новое за неделю

Вся история

Сейчас на сайте: 345

Web-технологии

Работа с Формами на JavaScript

Поиск по сайту

PHP Поиск

Формы и javascript. FORM

Содержание:

Как я могу использовать select box как навигационное меню?

Как я могу использовать картинку для кнопки submit?

Передача данных между формами на различных страницах

Почему document.formName.selectObject.value не отражает значение выбранного пункта в списке?

Как мне получить значение выбранной в данный момент radio button в radio group или группе checkboxes?

Как мне получить форму, чтобы инициировать процесс запуска клавишей Enter?

Как я могу отключить поле текстового ввода?

Как сделать загрузку страницы при выборе флажка?

Популярное:

Содержание:

Новое за неделю