Здравствуйте. Подскажите пожалуйста решение.
Есть html форма где пользователю предоставляется возможность выбора размера и цвета, после чего он нажимает на кнопку отправить и две javascript функции для интерактивности.
function selectView(obj) - если пользователь не выбрал модель, то отображается открывающееся меню (new0), где не отобржаются элементы для выбора.
если пользователь выбрал модель "детскую", то отображается открывающееся меню (new1), где можно выбрать размер 1, 2 или 3, и поле value = r1, r2 или r3.
если пользователь выбрал модель "взрослую", то отображается открывающееся меню (new2), где можно выбрать размер 1, 2 или 3, и поле value = r3, r4 или r5.
function makeLink() - если пользователь не выбрал модель или размер (или ничего вообще), то при нажатии на кнопку отправить, открывается окно (alert) с сообщением 'Не выбрано значение'.
Если пользователь выбрал модель детскую и размер 1, 2 ли 3, то при нажатии на кнопку отправить, передается get-запрос: /get_order/cart.php?new=r1, r2 или r3 в зависимоти от выбора размера.
Если пользователь выбрал модель взрослую и размер 1, 2 ли 3, то при нажатии на кнопку отправить, передается get-запрос: /get_order/cart.php?new=r4, r5 или r6 в зависимоти от выбора размера.

ПРОБЛЕМА в том, что когда я делаю на странице вторую такую форму, то для нее мне нужно опять делать отдельно две эти javascript функции, и разница будет в том, что мне надо будет в новых функциях менять id формы, например вместо id=form1 надо будет писать id=form2, и т.д.
МОЖНО ЛИ СДЕЛАТЬ так, чтобы эти функции не зависили от названия формы, а зависили от той формы которую выбрал пользователь (на которой он кликнул), чтобы две javascript функции можно было применить для нескольких форм на странице и неприходилось для каждой формы писать функции отдельно.

Код

<form name="form1" id="form1" method="get" action=""> <select name="razmer" size="1" onChange="selectView(this);"> <option>Выберите модель:</option> <option value="small">детская</option> <option value="big">взрослая</option> </select><br> <select name="new0" size="1"> <option>Выберите размер:</option> </select> <select name="new1" size="1" style="display: none"> <option>Выберите размер:</option> <option value="r1">размер 1</option> <option value="r2">размер 2</option> <option value="r3">размер 3</option> </select><select name="new2" size="1" style="display: none"> <option>Выберите размер:</option> <option value="r4">размер 1</option> <option value="r5">размер 2</option> <option value="r6">размер 3</option> </select>     </form> <p><a href="javascript: makeLink();">Отправить</a></p>     <script language='JavaScript'> <!-- function selectView(obj) { var val = obj.options[obj.selectedIndex].value; var sel0_st = document.getElementById('form1').elements['new0'].style; var sel1_st = document.getElementById('form1').elements['new1'].style; var sel2_st = document.getElementById('form1').elements['new2'].style;        if (val == 'small') {     sel0_st.display = 'none';     sel1_st.display = '';     sel2_st.display = 'none';       }   else if (val == 'big') {     sel0_st.display = 'none';     sel1_st.display = 'none';     sel2_st.display = '';      }   else {     sel0_st.display = '';     sel1_st.display = 'none';     sel2_st.display = 'none';     } } function makeLink() { var fm = document.getElementById('form1'); var elem1 = fm.elements['new1']; var elem2 = fm.elements['new2']; var url = '/get_order/cart.php?';   if (elem1.style.display == '')  url += 'new='+elem1.options[elem1.selectedIndex].value;   else if (elem2.style.display == '')  url += 'new='+elem2.options[elem2.selectedIndex].value;        if (url.indexOf('?') == url.length-1 || url.indexOf('=') == url.length-1)  alert('Не выбрано значение !');   else  location.href = url; } --> </script>

Это сообщение отредактировал(а) Гриша - 29.6.2005, 18:26

Гриша
а можно сделать так: передавать сам id формы, а в скрипте подставлять его и получать доступ к нужной форме.

Например,

Код

<select name="razmer" id='select1' size="1" onChange="selectView(1);">

Код

function selectView(id) { var obj = document.getElementById('form'+id); var val = document.getElementById('select'+id).value; var sel0_st = obj.elements['new0'].style; var sel1_st = obj.elements['new1'].style; var sel2_st = obj.elements['new2'].style; ............... }

Ну и дальше по аналогии

PHP-DIRECTOR, спасибо Большое, function selectView(id) работает хорошо.
А вот с function makeLink() как сделать также?
Я попробовал вот так, но ничего не получилось:

Код

function makeLink(id) { var fm = document.getElementById('form'+id'); var elem1 = fm.elements['new1']; var elem2 = fm.elements['new2']; var url = '/get_order/cart.php?';   if (elem1.style.display == '')  url += 'new='+elem1.options[elem1.selectedIndex].value;   else if (elem2.style.display == '')  url += 'new='+elem2.options[elem2.selectedIndex].value;        if (url.indexOf('?') == url.length-1 || url.indexOf('=') == url.length-1)  alert('Не выбрано значение !');   else  location.href = url; } -->

Также я пробовал вот в этой строке описать id

Код

<a href="javascript: makeLink(1);" id='form1'>Отправить</a>

Но это я думаю даже непричем, и в этой строке даже не хотелось бы применять id='form1', (но если вариант может быть только такой, то все равно хорошо) потому что здесь id = стилю css:
<a href="javascript: makeLink(1);" id="color_order">Отправить</a>

Помогите пожалуйста с функцией function makeLink().

А вот результат, с функцией function selectView(id):

Код

<form name='form1' id="form1" method="get" action=""> <select name="razmer" size="1" id='select' onChange="selectView(1);"> <option>Выберите модель:</option> <option value="small">детская</option> <option value="big">взрослая</option> </select><br> <select name="new0" size="1"> <option>Выберите размер:</option> </select> <select name="new1" size="1" style="display: none"> <option>Выберите размер:</option> <option value="r1">размер 1</option> <option value="r2">размер 2</option> <option value="r3">размер 3</option> </select><select name="new2" size="1" style="display: none"> <option>Выберите размер:</option> <option value="r4">размер 1</option> <option value="r5">размер 2</option> <option value="r6">размер 3</option> </select>     </form> <p><a href="javascript: makeLink();" id="cost_red">Отправить</a></p>     <script language='JavaScript'> <!-- function selectView(id) { var obj = document.getElementById('form'+id); var val = document.getElementById('select'+id).value; var sel0_st = obj.elements['new0'].style; var sel1_st = obj.elements['new1'].style; var sel2_st = obj.elements['new2'].style;      if (val == 'small') {     sel0_st.display = 'none';     sel1_st.display = '';     sel2_st.display = 'none';       }   else if (val == 'big') {     sel0_st.display = 'none';     sel1_st.display = 'none';     sel2_st.display = '';      }   else {     sel0_st.display = '';     sel1_st.display = 'none';     sel2_st.display = 'none';     } } function makeLink() { var fm = document.getElementById('form1'); var elem1 = fm.elements['new1']; var elem2 = fm.elements['new2']; var url = '/get_order/cart.php?';   if (elem1.style.display == '')  url += 'new='+elem1.options[elem1.selectedIndex].value;   else if (elem2.style.display == '')  url += 'new='+elem2.options[elem2.selectedIndex].value;        if (url.indexOf('?') == url.length-1 || url.indexOf('=') == url.length-1)  alert('Не выбрано значение !');   else  location.href = url; } --> </script>

Это сообщение отредактировал(а) Гриша - 29.6.2005, 21:39

Короче, решил написать готовый пример с полностью переработанной идеей:

Код

<!-- Над страницей химичил PHP-DIRECTOR --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru"> <head> <title>.: КРУТО !!! :.</title> <script type="text/javascript"> function makeLink() { var select1 = document.getElementById('select1'); var select2 = document.getElementById('select2'); if(select1.value=='' || select2.value=='') { alert('Не выбрано значение'); return false; } if(select1.value=='small') { location.href = '/get_order/cart.php?new=r'+select2.value; } if(select1.value=='big') {   location.href = '/get_order/cart.php?new=r'+(eval(select2.value)+3); } } function selectView() { if(document.getElementById('select1').value!='')       { document.getElementById('select2').style['visibility'] = 'visible'; document.getElementById('title').innerHTML = '<br />Выберите размер:'; } else  { document.getElementById('select2').style['visibility'] = 'hidden'; document.getElementById('title').innerHTML = ''; } } </script> </head> <body style='background: #c0c0c0; font-size: 12px; font-family: verdana;'> <div align='center'> <select id='select1' onclick='selectView()' size='1'> <option value=''>Выберите модель:</option> <option value='small'>детская</option> <option value='big'>взрослая</option> </select> <br /> <span id='title'></span> <select id='select2' size='1' style='visibility: hidden;'> <option value='1'>размер 1</option> <option value='2'>размер 2</option> <option value='3'>размер 3</option> </select> <br /><br /> <button onclick='makeLink()'>Отправить !!!</button> </div> </body> </html>

PHP-DIRECTOR спасибо большое за ответ и за пример. Пример кстати вы привели серьезный, сложный, для меня он тежеловат.
Я вас очень хочу попросить, помочь мне сделать function makeLink() также как function selectView(id).
Мне эта функция очень подходит и она делает нужные мне ссылки, и использует вместо кнопки, гиперссылку.
Помогите пожалуйста ее также подстроить как и function makeLink().

Код

function makeLink() { var fm = document.getElementById('form1'); var elem1 = fm.elements['new1']; var elem2 = fm.elements['new2']; var url = '/get_order/cart.php?';   if (elem1.style.display == '')  url += 'new='+elem1.options[elem1.selectedIndex].value;   else if (elem2.style.display == '')  url += 'new='+elem2.options[elem2.selectedIndex].value;        if (url.indexOf('?') == url.length-1 || url.indexOf('=') == url.length-1)  alert('Не выбрано значение !');   else  location.href = url; } -->

Это сообщение отредактировал(а) Гриша - 30.6.2005, 00:41

Все я разобрался в чем была пробелма в функции function makeLink(id):
Ошибка была в этой строчке:
var fm = document.getElementById('form'+id');
Правильно вот так:
var fm = document.getElementById('form'+id);


Вот итоговый результат.

Код

<form name="form1" id="form1" method="get" action=""> <select name="razmer" size="1" id='select1' onChange="selectView(1);"> <option>Выберите модель:</option> <option value="small">детская</option> <option value="big">взрослая</option> </select><br> <select name="new0" size="1"> <option>Выберите размер:</option> </select> <select name="new1" size="1" style="display: none"> <option>Выберите размер:</option> <option value="r1">размер 1</option> <option value="r2">размер 2</option> <option value="r3">размер 3</option> </select><select name="new2" size="1" style="display: none"> <option>Выберите размер:</option> <option value="r4">размер 1</option> <option value="r5">размер 2</option> <option value="r6">размер 3</option> </select>     </form> <p><a href="javascript: makeLink(1);">Отправить</a></p>     <script language='JavaScript'> <!-- function selectView(id) { var obj = document.getElementById('form'+id); var val = document.getElementById('select'+id).value; var sel0_st = obj.elements['new0'].style; var sel1_st = obj.elements['new1'].style; var sel2_st = obj.elements['new2'].style;      if (val == 'small') {     sel0_st.display = 'none';     sel1_st.display = '';     sel2_st.display = 'none';       }   else if (val == 'big') {     sel0_st.display = 'none';     sel1_st.display = 'none';     sel2_st.display = '';      }   else {     sel0_st.display = '';     sel1_st.display = 'none';     sel2_st.display = 'none';     } } function makeLink(id) { var fm = document.getElementById('form'+id); var elem1 = fm.elements['new1']; var elem2 = fm.elements['new2']; var url = '/get_order/cart.php?';   if (elem1.style.display == '')  url += 'new='+elem1.options[elem1.selectedIndex].value;   else if (elem2.style.display == '')  url += 'new='+elem2.options[elem2.selectedIndex].value;        if (url.indexOf('?') == url.length-1 || url.indexOf('=') == url.length-1)  alert('Не выбрано значение !');   else  location.href = url; } --> </script>