Поля формы и свойство value

Концепция

Сегодня мы продолжим начатое в Уроке 17. Будем передавать в функцию данные, которые пользователь введет в поле формы. Затем эти данные будут использованы для поиска в Yahoo.

Сценарий

<SCRIPT type="text/javascript">

function Gofindit(){
 var searchfor = document.formsearch.findthis.value;    
{                                
 var FullSearchUrl = 
"http://www.yahoo.com/bin/query?p=" + searchfor ;
location.href = FullSearchUrl;
}}

</SCRIPT>

<FORM NAME="formsearch" action="">
Найдите в Yahoo:
<INPUT NAME="findthis" SIZE="40" TYPE="text">
<INPUT TYPE="button" VALUE="Искать"
onClick="Gofindit()">
</FORM>

Результат работы сценария

На странице выводится строка "Найдите в Yahoo:", поле ввода и кнопка с надписью "Искать".

Разбор сценария

Этот сценарий снова требует четкого понимания иерархии объектов.

1. Во-первых, создаем функцию с переменной searchfor (искать) под названием formsearch, внутри элемента findthis (найти), который обладает свойством value (значение). Она будет результатом чего-то происходящего в объекте document.
2. Вторую функцию помещаем внутри первой. Видите вторую пару {фигурных скобок}?
3. Для второй функции создаем еще одну переменную FullSearchUrl, которая представляет собой адрес поисковой машины Yahoo плюс значение переменной searchfor, полученное через команду document.formsearch.find.value.
4. Наконец, location.href приравнивается переменной FullSearchUrl. После выполнения функции пользователь попадет на итоговую страницу поиска.
5. Теперь переходим к командам формы. Их две: текстовое поле ( TEXT ), куда пользователь вводит свой запрос, и кнопка, запускающая функцию.
6. Обратите внимание, что форма в целом называется formsearch. Помните, что мы говорили об иерархии объектов?
7. Затем для текстового поля задаем имя findthis. Опять иерархия. Видите, как мы идем от большого к малому?
8. Дальше соединяем кнопку с командой onClick, которая запускает функцию.
9. Наконец заканчиваем форму командой </FORM>. Готово.

Задание

Измените сценарий так, чтобы он вызывал другую поисковую систему. И еще, пусть при отправке запроса появляется окошко с надписью "Сейчас поищем..."

Возможное решение

Поиск в Яndex

Если известен адрес поисковой машины, тогда никаких особых трудностей не будет. Но как его узнать? Идите на сайт, начните поиск и скопируйте адрес из адресной строки.

Раз нам нужно, чтобы окно всплывало до завершения поиска, убедитесь, что оно стоит у вас первым. Вот сценарий, который выполняет эту работу:

<SCRIPT type="text/javascript">

function Gofindit()
{ 
alert("Сейчас поищем..."); 
var search = document.formsearch.find.value; 
{ 
var searchUrl = "http://www.yandex.ru/yandsearch?ctgl=11657&text=" + search;
location.href = searchUrl; 
}}

</script>


<form name="formsearch"> 
Поискать в Яndex:  
<input type="button" value="Найти" onClick="Gofindit()"> 
</form>