1

Доброй ночи! Нужна ваша помощь! Например, у меня есть форма, которая состоит из: Имя, Фамилия, Электронная почта, выпадающий список и 8 div'ов с временем. Когда вы нажимаете кнопку отправки, предупреждение отображает информацию о значениях, введенных пользователем. Пример сообщения: «Имя Фамилия» забронировал прослушивание на фильма «Человек-паук» на «Главную роль». Ждем вас в «17:00 - 18: 00». Подробная информация, отправленная на ваш «электронный адрес». Как вывести текст из input разобрался. Но что делать с div'ами и выпадающем списком?

function myFunction() {
  var fName = document.getElementById("firstName").value;
  var lName = document.getElementById("lastName").value;
  var Email = document.getElementById("email").value;

  alert(fName + ' ' + lName + ' ' + 'Your email is ' + Email); //this will alert the first name and the last name.
}
.demo {
  border: 1px solid black;
  width: 100px;
  text-align: center;
  float: left;
  margin: 10px;
}
<form action="" name="formName" onsubmit="complete(this)">
  <label for="firstName">Firstname : </label>
  <input type="text" name="name" id="firstName" placeholder="Enter your firstname" required>
  <br>
  <br>
  <label for="lastName">Lastname : </label>
  <input type="text" name="name" id="lastName" placeholder="Enter your lastname" required>
  <br>
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email">

  <label for="movie">Movie</label>
  <select name="movie" id="movie">
    <option value=""></option>
    <option value="Spider man">Spiderman</option>
    <option value="Iron man">Ironman</option>
    <option value="Super man">Superman</option>
  </select>
  <br>
  <br>
  <label for="movie_role">Role in the movie</label>
  <select name="role" id="movie_role">
    <option value=""></option>
    <option value="main">the main role</option>
    <option value="stuntman">stuntman</option>
    <option value="extras">extras</option>
    <option value="supporting role">supporting role</option>
  </select>
  <br>
  <br>
  <div onclick="myFunction()" class="demo">
    <p>9:00 - 10:00</p>
  </div>

  <div onclick="myFunction()" class="demo">
    <p>10:00 - 11:00</p>
  </div>

  <div onclick="myFunction()" class="demo">
    <p>11:00 - 12:00</p>
  </div>

  <div onclick="myFunction()" class="demo">
    <p>12:00 - 13:00</p>
  </div>

  <div onclick="myFunction()" class="demo">
    <p>14:00 - 15:00</p>
  </div>
  <div onclick="myFunction()" class="demo">
    <p>15:00 - 16:00</p>
  </div>
  <div onclick="myFunction()" class="demo">
    <p>16:00 - 17:00</p>
  </div>
  <div onclick="myFunction()" class="demo">
    <p>17:00 - 18:00</p>
  </div>
  <br>
  <br>
  <br>
  <br>
  <input type="submit" onclick="myFunction()">
</form>

Помогите пожалуйста!

2
  • А что с div сделать надо?
    – doox911
    23 ноя 2018 в 21:41
  • При нажатии на него человек выбирает время (типо временного отрезка, если див красный то извините это время занято). Если нет то ок. Принажатии на Submit. Alert ваше время (выбранное пользователем) 23 ноя 2018 в 21:46

2 ответа 2

0

function myFunction() {
  var fName = document.getElementById("firstName").value;
  var lName = document.getElementById("lastName").value;
  var Email = document.getElementById("email").value;

  var role = document.getElementById("movie_role");
  var text = fName + ' ' + lName + ' ' + 'Your email is ' + 
    Email + "\nYour role is: " + role.options[role.selectedIndex].textContent;

  document.querySelectorAll("form[name='formName'] div.demo.active-time p").forEach(
    i => text += "\nSee you at " + i.textContent);

  alert(text);
}

function selectTime(timeDiv) {
  document.querySelectorAll("form[name='formName'] div.demo").forEach(
    i => i.classList.remove("active-time"));
  timeDiv.classList.add("active-time")
}
.demo {
  border: 1px solid black;
  width: 100px;
  text-align: center;
  float: left;
  margin: 10px;
}
.active-time {
  background:pink;
}
<form action="" name="formName" onsubmit="complete(this)">
  <label for="firstName">Firstname : </label>
  <input type="text" name="name" id="firstName" placeholder="Enter your firstname" required>
  <br>
  <br>
  <label for="lastName">Lastname : </label>
  <input type="text" name="name" id="lastName" placeholder="Enter your lastname" required>
  <br>
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email">

  <label for="movie">Movie</label>
  <select name="movie" id="movie">
    <option value=""></option>
    <option value="Spider man">Spiderman</option>
    <option value="Iron man">Ironman</option>
    <option value="Super man">Superman</option>
  </select>
  <br>
  <br>
  <label for="movie_role">Role in the movie</label>
  <select name="role" id="movie_role">
    <option value=""></option>
    <option value="main">the main role</option>
    <option value="stuntman">stuntman</option>
    <option value="extras">extras</option>
    <option value="supporting role">supporting role</option>
  </select>
  <br>
  <br>
  <div onclick="selectTime(this)" class="demo">
    <p>9:00 - 10:00</p>
  </div>

  <div onclick="selectTime(this)" class="demo">
    <p>10:00 - 11:00</p>
  </div>

  <div onclick="selectTime(this)" class="demo">
    <p>11:00 - 12:00</p>
  </div>

  <div onclick="selectTime(this)" class="demo">
    <p>12:00 - 13:00</p>
  </div>

  <div onclick="selectTime(this)" class="demo">
    <p>14:00 - 15:00</p>
  </div>
  <div onclick="selectTime(this)" class="demo">
    <p>15:00 - 16:00</p>
  </div>
  <div onclick="selectTime(this)" class="demo">
    <p>16:00 - 17:00</p>
  </div>
  <div onclick="selectTime(this)" class="demo">
    <p>17:00 - 18:00</p>
  </div>
  <br>
  <br>
  <br>
  <br>
  <input type="submit" onclick="myFunction()">
</form>

0
0

Вот такое решение (при помощи Jquery):

"use strict";
    $('input[type="submit"]').on('click',function(){
        // Собрали значения
        let fn = $('#firstName').val();
        let ln = $('#lastName').val();
        let email = $('#email').val();
        let m = $('#movie').val();
        let mr = $('#movie_role').val();
        let t = $('.demo.checked p').text();
        // В alert() вы знаете что делать
        alert();
    });
    $('div.demo').on('click',function(){
        $('div.demo').removeClass('checked');
        $(this).addClass('checked');
    });

Логика такова: Мы вешаем обработчик на нажатие кнопки. После нажатия кнопки собираем значения. Для div так же вешаем обработчик. Когда мы кликаем по любому из div с классом demo, то по тому которому кликнули ставим класс checked, а у всех остальных элементов этого же класса -удаляем. Потом по этому классу (checked), берём значение выбранного времени.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.