Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Форма для отправки данных на сервер с условиями!


Автор: Гриша 14.6.2005, 03:43
Я случайно как-то создал две темы одинаковые, эту не удаляйте (модераторы) пожалуйста, удалите ту которая без знака вопроса. Я сам не могу удаить чего-то.

Помогите пожалуйста сделать форму для отправки даннх, с описанными ниже условиями.

1. Есть форма для отправки данных (например):
Код

<form name="form1" id="form1" method="get" action="/get_order/cart.php">


<br><a href="javascript:document.getElementById('form1').submit();">Отправить<a/>
</form>


2. В форме есть два ниспадающих меню. Одно меню всегда такое (меню 1):
Код

<select name="razmer" size="1">
<option value="small">размер детский</option>
<option value="big">размер взрослый</option>                                                                           
</select>


3. Второе меню (меню 2) должно меняться в зависимости от выбора.
Если в меню 1 выбрать пункт "размер детский", то меню 2 будет таким (вариант 2-1):
Код

<select name="new" size="1">
<option value="r1">размер 1</option>
<option value="r2">размер 2</option>                                       
<option value="r3">размер 3</option>
</select>


Если в меню 1 выбрать пункт "размер взрослый", то меню 2 будет таким (вариант 2-2):
Код

<select name="new" size="1">
<option value="r4">размер 4</option>
<option value="r5">размер 5</option>                                       
<option value="r6">размер 6</option>
</select>


4. На сервер должны отправляться данные методом get только из меню 2, т.е. значения name="new" и value=r1 или r2 или r3 или r4 или r5 или r6.
А значения name="razmer" и value=small или big; из меню 1 не должны отправляться,
возможно меню 1 должно быть таким:
<select size="1">
<option>размер детский</option>
<option>размер взрослый</option>
</select>

У меня есть один похожий код javascript, попробую с ним разобраться и днем вылажить, если что получиться.

Автор: Ciber SLasH 14.6.2005, 05:00
Оно ?
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV=Content-Type CONTENT='text/html; CHARSET=windows-1251'>
</head>

<body>
<form name="form1" id="form1" method="get" action="">

<select name="razmer" size="1" onChange="selectView(this);">
<option value="small">размер детский</option>
<option value="big">размер взрослый</option>
</select>

<select name="new1" size="1" style="display: none">
<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 value="r4">размер 4</option>
<option value="r5">размер 5</option>
<option value="r6">размер 6</option>
</select>

<br><a href="javascript: makeLink();">Отправить<a/>
</form>

<script language='JavaScript'>
function selectView(obj) {
var val = obj.options[obj.selectedIndex].value;
var sel1_st = document.getElementById('form1').elements['new1'].style;
var sel2_st = document.getElementById('form1').elements['new2'].style;

  if (val == 'small') {
    sel1_st.display = '';
    sel2_st.display = 'none';
  }
  else {
    sel2_st.display = '';
    sel1_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 += 'name="new"&value='+elem1.options[elem1.selectedIndex].value;
  else if (elem2.style.display == '')  url += 'name="new"&value='+elem2.options[elem2.selectedIndex].value;
  location.href = url;
}
</script>
</body>
</html>

Автор: o.s.a. 14.6.2005, 05:20
Ciber SLasH не мог бы ты пояснить как работает свойство display, и чем оно отличается от visibality?

Автор: Ciber SLasH 14.6.2005, 05:39
2o.s.a.:
  • Свойство visibility управляет видимостью генерируемого бокса.
    visible - Генерируемый бокс виден.
    hidden - Генерируемый бокс невидим (полностью прозрачен), но влияет на структуру.
  • Свойство display описывает, показывается ли элемент на холсте и каким образом.
    block - Элемент генерирует основной бокс блока.
    inline - Элемент генерирует один или более инлайн-боксов.
    list-item - Элемент (например, LI в HTML) генерирует основной бокс блока и инлайн-бокс элемента списка.
    none - Элемент не генерирует боксы в структуре форматирования (т.е. элемент не влияет на вид документа). Отображение 'none' не создаёт невидимый бокс; боксы вообще не создаются.

Фактически, для скрытия и показа блока можно применять и то и другое свойство (выбирай чё хош).

Более подробно смотри спецификацию CSS2, например вот тут: http://pyramidin.narod.ru/defmse.htm

Автор: o.s.a. 14.6.2005, 05:56
Ciber SLasH спасибо за объяснение и за ссылку

Автор: Гриша 14.6.2005, 12:57
Спасибо большое Ciber SLasH.
Я сделал некоторые изменения:
1. Добавил в меню 1 пункт "выберите модель" и в меню 2 (во все варианты меню) пункт "Выберите размер"

2. Сделал, чтобы Меню 2 было видно всегда, но если в меню 1 ничего не выбрано, то в меню 2 должно быть только видно поле "Выберите размер", для этого сделал вариант 2-0 для меню 2:
Код

    <br><select name="new0" size="1" style="display: yes">
    <option>Выберите размер:</option>
    </select>


3. Изменил вот эти строки (чтобы после в строке браузера, после отправки были видны такие данные: .../get_order/cart.php?new=r1, т.е. передаются данные name равный new и value равный r1):
Код

  if (elem1.style.display == '')  url += 'new='+elem1.options[elem1.selectedIndex].value;
  else if (elem2.style.display == '')  url += 'new='+elem2.options[elem2.selectedIndex].value;
  location.href = url;


В ИТОГЕ ПОЛУЧИЛОСЬ ТАК:
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV=Content-Type CONTENT='text/html; CHARSET=windows-1251'>
</head>

<body>
<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" style="display: yes">
    <option>Выберите размер:</option>
</select>

    <br><select name="new1" size="1" style="display: none">
    <option value="0">Выберите размер:</option>
<option value="r1">размер 1</option>
<option value="r2">размер 2</option>
<option value="r3">размер 3</option>
</select>

    <br><select name="new2" size="1" style="display: none">
<option value="0">Выберит размер:</option>
<option value="r4">размер 4</option>
<option value="r5">размер 5</option>
<option value="r6">размер 6</option>
</select>

<br><a href="javascript: makeLink();">Отправить</a>
    </form>

<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;
  location.href = url;
}
-->
</script>
</body>
</html>


НО ПРОБЛЕМА В ТОМ, ЧТО ПРИ ВЫБОРЕ ИЗ МЕНЮ 1 НАПРИМЕР ПУНКТА РАЗМЕР ДЕТСКИЙ, МЕНЮ 2 СМЕЩАЕТСЯ ВНИЗ (НА УРОВЕНЬ <BR>), ПРИ ВЫБОРЕ ПУНКТА РАЗМЕР ВЗРОСЛЫЙ, ПУНКТ РАЗМЕР ВЗРОСЛЫЙ, МЕНЮ 2 СМЕЩАЕТСЯ ЕЩЕ ВНИЗ.
ПОМОГИТЕ ПОЖАЛУЙСТА ИСПРАВИТЬ ЭТУ НЕПРИЯТНОСТЬ?

Автор: Ciber SLasH 14.6.2005, 14:37
Можно сделать 2-мя путями (возможно есть ещё smile):
1) установи у SELECT'ов с именами new0-new2 класс, например class="sel"
перед </head> добавь стиль:
Код

<style>
.sel {position: absolute; top: 7%}
</style>

2) после 1-го SELECT'а вставь DIV и убери все скрытые SELECT'ы. А как нужно вывести скрытый SELECT, то через JS выводи его в DIV.

ЗЫ: свойство display по умолчанию установлено в block поэтому если не нужно скрывать элемент, то просто не пиши вообще это свойство в стиле. Т.е. то что ты написал style="display: yes" -- неверно, нужно вообще этот стиль убрать.

Автор: Гриша 14.6.2005, 15:06
Спасибо Ciber SLasH. Я сделал так, в меню втором, все три варианта поставил друг за другом, без отступов и пробелов.
Т.е. заканчивается </select> и сразу на этойже строчке <select> (<select>...</select><select>..</select>)

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV=Content-Type CONTENT='text/html; CHARSET=windows-1251'>
</head>

<body>
<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>

   <p><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">размер 4</option>
<option value="r5">размер 5</option>
<option value="r6">размер 6</option>
</select></p>

<p><a href="javascript: makeLink();">Отправить</a>
 </form>

<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;
  location.href = url;
}
-->
</script>
</body>
</html>


Подскажите, пожалуйста, как сделать так, что если например в меню 1 ничего не выбрано (или выбрано поле: выберите модель) или в меню 2 ничего не выбрано (или выбрано поле: Выберите размер), то при нажатии на ссылку отправить, данные отправляться небудут и выскочить окно предупреждения (например, с надписью вы выбрали не все поля!).

Автор: Ciber SLasH 14.6.2005, 15:23
Замени строку: location.href = url;
на:
Код

  if (url.indexOf('?') == url.length-1)  alert('Не выбрано значение !');
  else  location.href = url;

Автор: Гриша 14.6.2005, 15:41
Ciber SLasH c этим кодом получается так, что если я выбиру что-нибудь в меню 1, то даже, есди в меню два ничего не выбраны, то все равно, идет отправка даннхы скрипту (хоть они и не выбраны.)
Как тут сделать, что если хоть в одлном меню не выбрано значение, то будет выводится сообщение об ошибки.

Вообще я щас проверяю, и получается, что когда во втором меню ничего не выбрано, а в первом выюрано, то alert то срабатывает, а то нет.

ПОЛУЧАЕТСЯ ТАК, ЧТО ЕСЛИ В МЕНЮ 1 ВЫБРАТЬ ПУНКТ ДЕТСКИЙ РАЗМЕР И НАЖАТЬ НА КНОПКУ ОТПРАВИТЬ, ТО ВЫСКОЧИТЬ СООБЩЕНИЕ О ТОМ, ЧТО ЗНАЧЕНИЕ НЕ ВЫБРАНО, А ЕСЛИ ПОСЛЕ ЭТОГО ВЫБРАТЬ, ПУНКТ РАЗМЕР ВЗРОСЛЫЙ, ТО ИДЕТ ОТСЫЛКА ДАННЫХ НА СЕРВЕР, Т.Е. ALERT НЕ СРАБАТЫВАЕТ.

Автор: Ciber SLasH 14.6.2005, 15:49
Тогда так...
замени:
Код

 if (url.indexOf('?') == url.length-1)  alert('Не выбрано значение !');

на:
Код

if (url.indexOf('?') == url.length-1 || url.indexOf('=') == url.length-1)  alert('Не выбрано значение !');

Автор: Гриша 14.6.2005, 15:57
Ciber SLasH с таким кодом получается так, что даже если я и выбиру, что-то во втором меню, то всеравно выскакивает alert, а если я ничего не выберу во 2 меню, то иногда получается так, что выбрав в меню1 пункт размер детский, отправка данных идет все равно.


ЩАС ЕЩЕ РАЗ ВСЕ ПОСТАВИЛ, В ИТОГЕ ПОЛУЧАЕТСЯ ТАК. ЧТО ВСЕРАВНО ПОЛУЧАЕТСЯ ИНОГДА, ВЫБРАВ ПУНКТЫ ТОЛЬКО В 1 МЕНЮ, НИЧЕГО НЕ ВЫБИРАТЬ ВО ВТОРОМ И КНОПКА ОТПРАВИТЬ РАБОТАЕТ ВСЕ РАВНО.

Автор: Ciber SLasH 14.6.2005, 16:04
Проверь ещё раз, у меня таким образом всё работает:
Код

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;
}

Автор: Гриша 14.6.2005, 16:16
ДА, ВСЕ РАБОТАЕТ, СПАСИБО БОЛЬШОЕ.
Я ПОНЯЛ ЧТО БЫЛО НЕ ТАК.

У МЕНЯ ЕЩЕ ОДИН ВОПРОС ОСТАЛСЯ ТОЛЬКО:
можно ли так сделать, чтобы если в меню 1 ничего не выбрано, то в меню два, вместо варианта 2-0, пунката Выберите размер, было пустое поле, но, чтобы ширина меню, была такой же, как и с пунктом Выберит размер.

Автор: Ciber SLasH 14.6.2005, 16:25
Код

<select name="new1" size="1" style="width: 145px; display: none">
<option></option>

Автор: Гриша 14.6.2005, 16:38
Спасибо Ciber SLasH, результат прилестный, то что я хотел.

Код формы для отправки данных на сервер с условиями (вставляйте и проверяйте):

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV=Content-Type CONTENT='text/html; CHARSET=windows-1251'>
</head>

<body>
<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>

<p>
<select name="new0" size="1" style='width: 145px'>
<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>
</body>
</html>

Автор: Aliance 16.6.2005, 12:55
Цитата(o @ 14.6.2005, 06:20)
Ciber SLasH не мог бы ты пояснить как работает свойство display, и чем оно отличается от visibality?

Я это уже объяснял подробно. Учимся поиском пользоваться :-) Но, впринципе, еще раз не повредит, но все же это был оффтоп, что протеворечит правилам форума!

Гриша
Не пользуйтесь буквами верхнего регистра. Это раздражает.
Кроме того, в вашем первом сообщении. в первом коде. в 4ой строчки неверна разметка HTML.

Автор: o.s.a. 16.6.2005, 15:33
Aliance извиняюсь smile
Код

<a href="javascript:document.getElementById('form1').submit();">Отправить<a/>

это здесь что ли ошибка?

Автор: Aliance 17.6.2005, 12:07
ага, посмотри на закрывающий тег smile

Автор: o.s.a. 17.6.2005, 16:35
Это мелочь, я уж думал ошибка где-то в функции JS

Автор: Гриша 18.6.2005, 05:30
Javaкод, Javaкод, "а" стоит наоборот ( </a> ).
Код

<a href="javascript:document.getElementById('form1').submit();">Отправить</a>

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)