Страница 1 из 3 1 23 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Появление формы при выборе пункта выпадающего списка (https://javascript.ru/forum/dom-window/63908-poyavlenie-formy-pri-vybore-punkta-vypadayushhego-spiska.html)

MadMaxZZZ 07.07.2016 16:24
Появление формы при выборе пункта выпадающего списка
 
Добрый день, Уважаемые.

Дан вот такой код: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Select со скрытыми блоками div</title>
</head>
 
<body>
 
<script>
function Selected(a) {
        var label = a.value;
        if (label==1) {
            document.getElementById("Block1").style.display='block';
            document.getElementById("Block2").style.display='none';
            document.getElementById("Block3").style.display='none';
            document.getElementById("Block4").style.display='none';
            document.getElementById("Block5").style.display='none';
        } else if (label==2) {
            document.getElementById("Block1").style.display='none';
            document.getElementById("Block2").style.display='block';
            document.getElementById("Block3").style.display='none';
            document.getElementById("Block4").style.display='none';
            document.getElementById("Block5").style.display='none';
        } else if (label==3) {
            document.getElementById("Block1").style.display='none';
            document.getElementById("Block2").style.display='none';
            document.getElementById("Block3").style.display='block';
            document.getElementById("Block4").style.display='none';
            document.getElementById("Block5").style.display='none';
        } else if (label==4) {
            document.getElementById("Block1").style.display='none';
            document.getElementById("Block2").style.display='none';
            document.getElementById("Block3").style.display='none';
            document.getElementById("Block4").style.display='block';
            document.getElementById("Block5").style.display='none';
        } else if (label==5) {
            document.getElementById("Block1").style.display='none';
            document.getElementById("Block2").style.display='none';
            document.getElementById("Block3").style.display='none';
            document.getElementById("Block4").style.display='block';
            document.getElementById("Block5").style.display='none';
        } else {
            document.getElementById("Block1").style.display='none';
            document.getElementById("Block2").style.display='none';
            document.getElementById("Block3").style.display='none';
            document.getElementById("Block4").style.display='none';
            document.getElementById("Block5").style.display='none';
        }
         
}
</script>
<div>Выберите тип документа из выпадающего списка:</div></br>
<select id="actSelect" class="Validate_Required " name="actSelect" aria-required="true" onChange="Selected(this)">
       <option value="" selected="selected">-</option>
       <option value="1">Бухгалтерский документ</option>
       <option value="2">Договор</option>
       <option value="3">Дополнительное соглашение</option>
       <option value="4">Письмо</option>
       <option value="5">Приказ</option>
       <option value="6">Распоряжение</option>
</select>
     
    
    <div id='Block1' style='display: none;'></br>
      Выберите документ:
            <select>
                   <option value="" selected="selected">-</option>
                   <option value="a">Акт</option>
                   <option value="b">Накладная</option>
                   <option value="c">Счет-фактура</option>
            </select>
    </div>
    
    <div id='Block2' style='display: none;'></br>
        Предмет договора:
            <select>
                   <option value="" selected="selected">-</option>
                   <option value="a">Выполнение работ</option>
                   <option value="b">Оказание услуг</option>
                   <option value="c">Поставка</option>
            </select>
    </div>
    
    <div id='Block3' style='display: none;'></br>
      Предмет соглашения:
            <select>
                    <option value="" selected="selected">-</option>
                    <option value="a">Изменение цены</option>
                    <option value="b">Изменение сроков</option>
                    <option value="b">Изменение объемов</option>
            </select>
    </div>
    
    <div id='Block4' style='display: none;'></br>
      Выберите тип письма:
            <select>
                    <option value="" selected="selected">-</option>
                    <option value="a">Входящее</option>
                    <option value="b">Исходящее</option>
            </select>
    </div>
 
<div id='Block5' style='display: none;'></br>   
<form method="post" action="index.php">
 
 
        Полное название организации <br/>
        <textarea cols="40" rows="2" name="fullname"></textarea><br/>
        Короткое название организации <br/>
        <input type="text" name="smallname" /><br/>
        ИНН организации <br/>
        <input type="text" name="inn" /><br/>
        КПП организации <br/>
        <input type="text" name="kpp" /><br/>
        Индекс организации <br/>
        <input type="text" name="ind" /><br/>
        Страна расположения организации <br/>
        <input type="text" name="strana" /><br/>
        Город организации <br/>
        <input type="text" name="gorod" /><br/>
        Адрес организации <br/>
        <input type="text" name="adress" /><br/><br/>
        <input type="submit" name="add" value="Добавить организацию" />
        
<?php
include_once("db.php");
 
if(isset($_POST['add']))
{
$fullname = strip_tags(trim($_POST['fullname']));
$smallname = strip_tags(trim($_POST['smallname']));
$inn = strip_tags(trim($_POST['inn']));
$kpp = strip_tags(trim($_POST['kpp']));
$ind = strip_tags(trim($_POST['ind']));
$strana = strip_tags(trim($_POST['strana']));
$gorod = strip_tags(trim($_POST['gorod']));
$adress = strip_tags(trim($_POST['adress']));
 
$query = "SELECT `fullname` FROM `kontragent` WHERE `fullname` = '$fullname'";
$result = mysql_query($query);
    if(mysql_num_rows($result) > 0) echo 'Контрагент с таким именем присутствует в базе';
    else {
        mysql_query("INSERT INTO kontragent (fullname, smallname, inn, kpp, ind, strana, gorod, adress) 
            VALUES ('$fullname', '$smallname', '$inn', '$kpp', '$ind', '$strana', '$gorod', '$adress'");
        echo "Контрагент добавлен в базу данных!";
    }
mysql_close();
}
?>
</div>  
 
</body>
</html>


Подскажите, как вывести Block5 при выборе, допустим "Акт" или "Выполнение работ"?

ЗЫ. Прошу не пинать, учусь, пишу небольшую форму для электронного архива.

laimas 07.07.2016 19:01
Для какой цели служат эти списки?

MadMaxZZZ 07.07.2016 20:13
Цитата:
Сообщение от laimas (Сообщение 421530)
Для какой цели служат эти списки?
Логика такая должна быть: пользователь выбирает из выпадающего списка тип документа -> подтип (письмо - входящее\исходящее) -> и в зависимости от выбора, будет появляться форма с необходимыми полями -> появляется форма выбора файла для загрузки -> после нажатия кнопки, файл льется на сервер, информация о типе документа пишется в БД вместе со ссылкой на документ.
ЗЫ. на пхп форму не обращайте внимание, я взял ее для примера (написана для добавления контрагента в БД).

laimas 07.07.2016 20:45
Можно и не обращать внимания, но показывается код причем с кодом серверной стороны, и в коде ошибка - форма не закрыта. Форма одна, списки в нее не входят, а посему какой-то выбор в этих списках лишен смысла.

Но если списки определяют форму, а опций у них не одна, и если каждый набор этих опций, это своя форма, то сколько же их будет на клиенте даже представить трудно. Такие вещи лучше делать асинхронными запросами к серверу, который и будет отдавать необходимые данные - форма или еще чего либо.

if (label==1) { document.getElementById("Block1").style.display='b lock';
...
и т.д. не требуется, достаточно вместо всех проверок и повторений действий:

nChange="Selected(this.value)"

и

function Selected(a) {
if(a) document.getElementById("Block"+a).style.display=' block';
else alert("Not selected");
}

А все иные блоки скрыть - проходом в цикле по массиву элементов, но можно запоминать текущий выбор, а при следующем выборе скрывать только этот элемент, как предыдущий выбор.

Непосредственно в базу данные так заносить нельзя, этот минимум нужно обязательно знать.

MadMaxZZZ 07.07.2016 21:28
Цитата:
Сообщение от laimas (Сообщение 421542)
А все иные блоки скрыть - проходом в цикле по массиву элементов, но можно запоминать текущий выбор, а при следующем выборе скрывать только этот элемент, как предыдущий выбор.
Как это сделать?

Поправил вот так :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Select со скрытыми блоками div</title>
</head>

<body>

<script>
function Selected(a) {
if(a) document.getElementById("Block"+a).style.display=' block';
else alert("Not selected");
}
         

</script>
<div>Выберите тип документа из выпадающего списка:</div></br>
<select id="actSelect" class="Validate_Required " name="actSelect" aria-required="true" onChange="Selected(this.value)">
       <option value="" selected="selected">-</option>
       <option value="1">Бухгалтерский документ</option>
       <option value="2">Договор</option>
       <option value="3">Дополнительное соглашение</option>
	   <option value="4">Письмо</option>
       <option value="5">Приказ</option>
       <option value="6">Распоряжение</option>
</select>
     
    
    <div id='Block1' style='display: none;'></br>
      Выберите документ:
			<select>
				   <option value="" selected="selected">-</option>
				   <option value="a">Акт</option>
				   <option value="b">Накладная</option>
				   <option value="c">Счет-фактура</option>
			</select>
    </div>
	
    <div id='Block2' style='display: none;'></br>
        Предмет договора:
			<select>
				   <option value="" selected="selected">-</option>
				   <option value="a">Выполнение работ</option>
				   <option value="b">Оказание услуг</option>
				   <option value="c">Поставка</option>
	        </select>
	</div>
	
	<div id='Block3' style='display: none;'></br>
      Предмет соглашения:
			<select>
					<option value="" selected="selected">-</option>
					<option value="a">Изменение цены</option>
					<option value="b">Изменение сроков</option>
					<option value="b">Изменение объемов</option>
			</select>
    </div>
	
	<div id='Block4' style='display: none;'></br>
      Выберите тип письма:
			<select>
					<option value="" selected="selected">-</option>
					<option value="a">Входящее</option>
					<option value="b">Исходящее</option>
			</select>
    </div>

<div id='Block5' style='display: none;'></br>	
<form method="post" action="index.php">


		Полное название организации <br/>
		<textarea cols="40" rows="2" name="fullname"></textarea><br/>
		Короткое название организации <br/>
		<input type="text" name="smallname" /><br/>
		ИНН организации <br/>
		<input type="text" name="inn" /><br/>
		КПП организации <br/>
		<input type="text" name="kpp" /><br/>
		Индекс организации <br/>
		<input type="text" name="ind" /><br/>
		Страна расположения организации <br/>
		<input type="text" name="strana" /><br/>
		Город организации <br/>
		<input type="text" name="gorod" /><br/>
		Адрес организации <br/>
		<input type="text" name="adress" /><br/><br/>
		<input type="submit" name="add" value="Добавить организацию" />
		</form>
<?php
include_once("db.php");

if(isset($_POST['add']))
{
$fullname = strip_tags(trim($_POST['fullname']));
$smallname = strip_tags(trim($_POST['smallname']));
$inn = strip_tags(trim($_POST['inn']));
$kpp = strip_tags(trim($_POST['kpp']));
$ind = strip_tags(trim($_POST['ind']));
$strana = strip_tags(trim($_POST['strana']));
$gorod = strip_tags(trim($_POST['gorod']));
$adress = strip_tags(trim($_POST['adress']));

$query = "SELECT `fullname` FROM `kontragent` WHERE `fullname` = '$fullname'";
$result = mysql_query($query);
    if(mysql_num_rows($result) > 0) echo 'Контрагент с таким именем присутствует в базе';
    else {
        mysql_query("INSERT INTO kontragent (fullname, smallname, inn, kpp, ind, strana, gorod, adress) 
			VALUES ('$fullname', '$smallname', '$inn', '$kpp', '$ind', '$strana', '$gorod', '$adress'");
        echo "Контрагент добавлен в базу данных!";
    }
mysql_close();
}
?>
</div>	

</body>
</html>

laimas 07.07.2016 21:50 
<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style>
.box {
    display: none;
}
</style> 
<script>
var currBox = 0;
function Selected(a) {
    if(a) {
        document.getElementById("Block"+a).style.display = "block";
        if(currBox) document.getElementById("Block"+currBox).style.display = "none"; 
        currBox = a; 
    } else alert("Not selected");
}
</script>    
</head> 

<body>
<div>Выберите тип документа из выпадающего списка:</div><br/>
<select id="actSelect" class="Validate_Required " name="actSelect" onchange="Selected(this.value)">
       <option value="" selected="selected">-</option>
       <option value="1">Бухгалтерский документ</option>
       <option value="2">Договор</option>
       <option value="3">Дополнительное соглашение</option>
       <option value="4">Письмо</option>
       <option value="5">Приказ</option>
</select>
      
     
    <div id="Block1" class="box"><br/>
      Выберите документ:
            <select>
                   <option value="" selected="selected">-</option>
                   <option value="a">Акт</option>
                   <option value="b">Накладная</option>
                   <option value="c">Счет-фактура</option>
            </select>
    </div>
     
    <div id="Block2" class="box"><br/>
        Предмет договора:
            <select>
                   <option value="" selected="selected">-</option>
                   <option value="a">Выполнение работ</option>
                   <option value="b">Оказание услуг</option>
                   <option value="c">Поставка</option>
            </select>
    </div>
     
    <div id="Block3" class="box"><br/>
      Предмет соглашения:
            <select>
                    <option value="" selected="selected">-</option>
                    <option value="a">Изменение цены</option>
                    <option value="b">Изменение сроков</option>
                    <option value="b">Изменение объемов</option>
            </select>
    </div>
     
    <div id="Block4" class="box"><br/>
      Выберите тип письма:
            <select>
                    <option value="" selected="selected">-</option>
                    <option value="a">Входящее</option>
                    <option value="b">Исходящее</option>
            </select>
    </div>
 
<div id="Block5" class="box"><br/>  
<form method="post" action="index.php">
 
 
        Полное название организации <br/>
        <textarea cols="40" rows="2" name="fullname"></textarea><br/>
        Короткое название организации <br/>
        <input type="text" name="smallname" /><br/>
        ИНН организации <br/>
        <input type="text" name="inn" /><br/>
        КПП организации <br/>
        <input type="text" name="kpp" /><br/>
        Индекс организации <br/>
        <input type="text" name="ind" /><br/>
        Страна расположения организации <br/>
        <input type="text" name="strana" /><br/>
        Город организации <br/>
        <input type="text" name="gorod" /><br/>
        Адрес организации <br/>
        <input type="text" name="adress" /><br/><br/>
        <input type="submit" name="add" value="Добавить организацию" />
 </form>
</div>
</body> 
</html>


Элемента </br> не существует.

MadMaxZZZ 07.07.2016 21:59
Цитата:
Сообщение от laimas (Сообщение 421545)

Элемента </br> не существует.
Спасибо! Появляющийся блок Block5 при выборе, допустим, "Акт" не получится вывести?

laimas 07.07.2016 22:10
Цитата:
Сообщение от MadMaxZZZ
Появляющийся блок Block5 при выборе, допустим, "Акт" не получится вывести?
Список actSelect связан значениями опций с соответствующими блоками, а значит и для их управления не требуется громоздких условий в коде. Но блока Block6 не существует, а посему опция с таким значением удалена из списка. Как в этом случае должно быть (?), я не в курсе.

Из этого следует, что если опции других списков также будут связаны с некими блоками, то можно использовать этот же скрипт управления. Вообще возникает вопрос - с чего вдруг эти опции имеют значения "a", "b", ...? Продумайте связи, которые бы "сами отвечали на условия" и все будет просто.

Замечание:

$query = "SELECT `fullname` FROM `kontragent` WHERE `fullname` = '$fullname'";
$result = mysql_query($query);
if(mysql_num_rows($result) > 0) echo 'Контрагент с таким именем присутствует в базе';

Не знаю, что есть fullname, но если Иванов Иван Иванович, то это еще не означает уникальность.

MadMaxZZZ 07.07.2016 22:21
Цитата:
Сообщение от laimas (Сообщение 421548)
Список actSelect связан значениями опций с соответствующими блоками, а значит и для их управления не требуется громоздких условий в коде. Но блока Block6 не существует, а посему опция с таким значением удалена из списка. Как в этом случае должно быть (?), я не в курсе.

Из этого следует, что если опции других списков также будут связаны с некими блоками, то можно использовать этот же скрипт управления. Вообще возникает вопрос - с чего вдруг эти опции имеют значения "a", "b", ...? Продумайте связи, которые бы "сами отвечали на условия" и все будет просто.

Замечание:

$query = "SELECT `fullname` FROM `kontragent` WHERE `fullname` = '$fullname'";
$result = mysql_query($query);
if(mysql_num_rows($result) > 0) echo 'Контрагент с таким именем присутствует в базе';

Не знаю, что есть fullname, но если Иванов Иван Иванович, то это еще не означает уникальность.
Не Block6, а Block 5, это див с формой.
fullname это полное наименование контрагента не ООО Ромашка, а Общество с Ограниченной Ответственностью "Ромашка"

laimas 07.07.2016 22:26
Цитата:
Сообщение от MadMaxZZZ
Не Block6, а Block 5, это див с формой.
<option value="5">Приказ</option>
<option value="6">Распоряжение</option>

это же не я придумал.


Часовой пояс GMT +3, время: 03:27.
Страница 1 из 3 1 23 >
Показывать 40 сообщений этой темы на одной странице