Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.03.2020, 16:14
Интересующийся
Отправить личное сообщение для Rudman Посмотреть профиль Найти все сообщения от Rudman
 
Регистрация: 25.03.2020
Сообщений: 17

Вывод select и флажка
Есть форма заказа билетов на поезд
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Train - Tickets</title>
</head>
<body>
	<script src="js/script.js"></script>
<style>
	*{
	background-color: #fbf3ea;

}

div.cont{
	margin-left: 15px;
	margin-right: 15px;
}

h4{
	font-family: fantasy;
	font-size: 2em;
	font-weight: 300;
	text-align: center;
}

.form label{
	width: 120px;
	float: left;
	font-size: 1.2em;
	font-family: Arial;
	font-weight: 700;
}

.form input, textarea{
	width: 500px;
	text-align: center;
	font-family: Arial;
	font-weight: 700;
}

.form input, textarea{
	padding: 9px;
	border: 1px solid #E5E5E5;
	border-radius: 5px;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
	background: white;
}

div.sumbit{
	border: 1px solid #E5E5E5;
	border-radius: 5px;
	background: #c7c7c7;
	width: 500px;
	text-align: center;
	font-family: Arial;
	font-weight: 700;
	margin-left: 7.5em;
	padding: 5px;
}

div.sumbit:hover{
	border: 1px solid black;
	border-radius: 5px;
	background: #d6d6d6;

	width: 500px;
	text-align: center;
	font-family: Arial;
	font-weight: 700;
	margin-left: 7.5em;
	padding: 5px;
}

#res {
	margin-top: 25px;
	font-family: Arial;
	font-weight: bold;
}


label .derect{
	font-size: 1.2em;
	font-family: Arial;
	font-weight: 700;
}

.form select{
	width: 500px;
	font-size: 1em;
	border-radius: 8px;
	font-family: Arial;
	font-weight: 700;
	text-align: center;
	padding: 9px;
	border: 1px solid #E5E5E5;
	border-radius: 5px;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
	background: white;
}

.form option{
	border-radius: 8px;
	text-align: center;
	background: white;

}

input.sumbit{
	border: 1px solid #E5E5E5;
	border-radius: 5px;
	background: #c7c7c7;
	width: 500px;
	text-align: center;
	font-family: Arial;
	font-weight: 700;
	margin-left: 7.5em;
	padding: 5px;
}

#Place{
display: none;

}

.mesto p{
	font-family: Arial;
	font-weight: 700;
	display: inline-block;
	box-sizing: border-box;
	padding: 5px 5px;
}

.mesto {
  font-family: Arial;
}
.mesto  p {
  margin-bottom: 8px;
  text-align: center;
}
 
.box-row,
.box {
  display: flex;
  flex-wrap: wrap;
}
 
.box {
  margin-right: 8px;
  flex-grow: 1;
  font-family: Arial;
}
.box:last-child {
  margin-right: 0;
}
.box p {
  padding: 5px;
  border: 1px solid #ccc;
  width: 50%;
  margin-bottom: 2px;
}
.box p:nth-child(3), .box p:nth-child(4) {
  margin-bottom: 0;
}

div .order{
	border: 1px solid #E5E5E5;
	border-radius: 5px;
	background: #c7c7c7;
	width: 500px;
	text-align: center;
	font-family: Arial;
	font-weight: 700;
	margin-left: 7.5em;
	padding: 5px;
	margin-top: 20px;
}

#tick{
	margin-top: 25px;
	font-family: Arial;
	font-weight: bold;
	color: red;
}
</style>

	<h4>Ticket</h4>
	<div class="cont">

  <form class="form">
  	<p>
    <label for="derect"> Derection:</label>
    <select id="city">   //от сюда
	    <option disabled>  Куда ехать?</option>
	    <option>Одесса - Львов</option>
	    <option>Харьков - Киев</option>
	    <option>Луганск - Днепр</option>
	    <option>Харьков - Хмельницк</option>
	    <option>Киев - Запорожье</option>
	    <option>Николаев - Сумы</option>
	    <option>Чернигов - Тернополь</option>
    </select>
    </p>

    <p>
    <label for="date"> Date:</label>
    <select id="date">     //от сюда
    	
	    <option disabled>На какую дату?</option>
	    <option>24.03.2020</option>
	    <option>30.03.2020</option>
	    <option>05.04.2020</option>
	    <option>10.04.2020</option>
	    <option>27.05.2020</option>
	    <option>16.07.2020</option>
	    <option>30.07.2020</option>
    </select>
    </p>
  </form>

  <input type="button" class="sumbit" value="Search" onclick="viewPlace()">
  <hr>

  <div id="Place">
   <form class="mesto">
     <p>Выберите место в поезде:</p>
     <div class="box-row">
       <div class="box">
         <p><input type="checkbox" name="n"> 1</p>
         <p><input type="checkbox" name="n"> 2</p>
         <p><input type="checkbox" name="n"> 3</p>
         <p><input type="checkbox" name="n"> 4</p>
       </div>
       <div class="box">
         <p><input type="checkbox" name="n"> 5</p>
         <p><input type="checkbox" name="n"> 6</p>
         <p><input type="checkbox" name="n"> 7</p>
         <p><input type="checkbox" name="n"> 8</p>
       </div>
       <div class="box">
         <p><input type="checkbox" name="n"> 9</p>
         <p><input type="checkbox" name="n"> 10</p>
         <p><input type="checkbox" name="n"> 11</p>
         <p><input type="checkbox" name="n"> 12</p>
       </div>
       <div class="box">
         <p><input type="checkbox" name="n"> 13</p>
         <p><input type="checkbox" name="n"> 14</p>
         <p><input type="checkbox" name="n"> 15</p>
         <p><input type="checkbox" name="n"> 16</p>
       </div>
       <div class="box">
         <p><input type="checkbox" name="n"> 17</p>
         <p><input type="checkbox" name="n"> 18</p>
         <p><input type="checkbox" name="n"> 19</p>
         <p><input type="checkbox" name="n"> 20</p>
       </div>
     </div>
 
   </form>
 
    <input type="button" class="order" value="To order" onclick=""><hr> //нажать сюда 
</div>
    <div id="tick"></div>   //сюда 


    </div>
 </body>
</html>

Нужно сделать вывод билета с помощью js в котором выбраное направление, дата(selecet) и место в поезде

Что тут не так?
document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('.order').addEventListener('click', () => {
    document.getElementById('tick').innerHTML+=
    `
      ${ document.querySelector('city').value }<br><hr>
      ${ document.querySelector('date').value }<br><br>
    `
  })
})

Последний раз редактировалось Rudman, 26.03.2020 в 16:54.
Ответить с цитированием
  #2 (permalink)  
Старый 26.03.2020, 16:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Rudman, если селектор id
querySelector('#
Ответить с цитированием
  #3 (permalink)  
Старый 26.03.2020, 16:58
Интересующийся
Отправить личное сообщение для Rudman Посмотреть профиль Найти все сообщения от Rudman
 
Регистрация: 25.03.2020
Сообщений: 17

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('.order').addEventListener('click', () => {
    document.getElementById('#tick').innerHTML+=
    `
      ${ document.querySelector('#city').value }<br><hr>
      ${ document.querySelector('#date').value }<br><br>
    `
  })
})
Ответить с цитированием
  #4 (permalink)  
Старый 26.03.2020, 17:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Rudman
document.getElementById('#tick').
а здесь решётка лишняя
Ответить с цитированием
  #5 (permalink)  
Старый 26.03.2020, 17:25
Интересующийся
Отправить личное сообщение для Rudman Посмотреть профиль Найти все сообщения от Rudman
 
Регистрация: 25.03.2020
Сообщений: 17

Работает, а как быть с флажком(местом)? там же может быть 2 или 3 места

Последний раз редактировалось Rudman, 26.03.2020 в 17:27.
Ответить с цитированием
  #6 (permalink)  
Старый 26.03.2020, 18:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Rudman,
document.addEventListener('DOMContentLoaded', () => {
    document.querySelector('.order').addEventListener('click', () => {
        document.getElementById('tick').innerHTML +=
            `
      ${ document.querySelector('#city').value }<br><hr>
      ${ document.querySelector('#date').value }<br><br>
      ${ [...document.querySelectorAll('[name="n"]:checked')].map( el => +el.parentNode.textContent) }<br><br>
    `
    })
})
Ответить с цитированием
  #7 (permalink)  
Старый 26.03.2020, 19:03
Интересующийся
Отправить личное сообщение для Rudman Посмотреть профиль Найти все сообщения от Rudman
 
Регистрация: 25.03.2020
Сообщений: 17

рони, то что нужно, спасибо за помощь
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вывод значений в зависимости от Select ElAxander Общие вопросы Javascript 37 28.10.2017 19:24
Вывод городов по популярности в select tvixa Элементы интерфейса 2 11.11.2015 11:06
Вывод информации в зависимости от выбранных значений select Batyabest Events/DOM/Window 1 01.10.2014 05:20
вывод текста из select ioane Элементы интерфейса 1 12.05.2013 16:19
Нестандартный вывод select и option utb jQuery 2 23.01.2013 09:16