Как вывести текст форм и div'ов в alert

214

08 мая 2019, 22:50

Доброй ночи! Нужна ваша помощь! Например, у меня есть форма, которая состоит из: Имя, Фамилия, Электронная почта, выпадающий список и 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>

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

Answer 1

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>

Answer 2

Вот такое решение (при помощи 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), берём значение выбранного времени.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как называется/реализовать sroll эффект?

На сайте есть header, внутри которого есть list с якорями на секцииНеобходимо менять их состояние (цвет текста, ну или что - то другое), при достижении...

174

javascript