Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.12.2017, 19:46
Новичок на форуме
Отправить личное сообщение для daramylove Посмотреть профиль Найти все сообщения от daramylove
 
Регистрация: 21.12.2017
Сообщений: 4

ПРОБЛЕМА С FORM КОТОРОЙ НЕТ ПРИ DIV
Всем привет ! Вопрос следующий (прошу не судить строго так как только только начал изучать JS). Пишу форму и когда меняю форму на див данный код работает а при форме нет =( обьясните почему


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>form 2</title>
	<link rel="stylesheet" type="text/css" href="css/form.css">
	<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
</head>
<body>
		<form class="form-wrap">
					<div class="input-wrap">
						<input type="text" name="text" placeholder="Name">
						<input type="email" name="email" placeholder="Email">
					</div>
					<div class="textarea-wrap">
						<textarea name="textarea" placeholder="Message"></textarea>
					</div>
					<label class="backg">
						<div class="air-wrap">
							<input type="submit" class="submit" id="input" onclick="clickMe()">
							<i class="fa fa-paper-plane-o" aria-hidden="true" id="icon"></i>
						</div>	
					</label>
		
		</form>	
	<script type="text/javascript">
function clickMe () {
	// body...
	var icon = document.getElementById('icon');
		icon.classList.add('icon');

		function removeClass () {
			icon.classList.remove('icon');
		};
		setTimeout(removeClass, 2000);
};

	</script>
</body>
</html>


* {
	padding: 0;
	margin: 0;
}

body {
	padding: 0;
	margin: 0;
}

form {
	
}

.form-wrap {
	width: 650px;
	height: 350px;
	box-sizing: border-box;
	left: 50%;
	margin-top: 200px;
	margin-left: -325px;
	position: relative;
	box-shadow: -22px 11px 43px -11px rgba(0,0,0,0.75);
}

.backg {
	position: absolute;
	width: 70px;
	height: 100%;
	top: 0;
	right: 0;
	overflow: hidden;
	cursor: pointer;
}

.backg input {
	opacity: 0;
	visibility: 0;
}

.backg:after {
	top: 0;
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	background: pink;
	opacity: 0;
	transition: opacity 1s;
}

.backg:hover:after {
	opacity: 1;
}

.input-wrap {
	width: 89%;
	display: flex;
	justify-content: space-around;
	padding-top: 60px;
}

.input-wrap input {
	outline: none;
	display: flex;
	width: 207px;
	height: 41px;
	font-size: 16px;
	border: 0;
	border-bottom: 1px solid #999; 
}

.textarea-wrap {
	width: 89%;
	display: flex;
	justify-content: space-around;
	padding-top: 60px;
}

.textarea-wrap textarea {
	outline: none;
	display: flex;
	width: 73%;
	height: 133px;
	font-size: 16px;
	border: 0;
	border-bottom: 1px solid #999;
	list-style-type: none;
	resize: none; 
}

.air-wrap {
	position: relative;
	width: 100%;
	height: 100%;
}

.backg i {

	color: white;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 10;
	font-size: 40px;
	transition: all 1s;
}

.input-wrap input[placeholder="Name"]:hover,
.input-wrap input[placeholder="Email"]:hover {
	
}

.icon {
 margin-top: -100px;
 opacity: 0;
 margin-left: 100px; 
}



	/* SUBMIT BACKGROUND */
.backg:after {
background: rgba(210,155,242,1);
background: -moz-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 41%, rgba(245,220,245,1) 83%, rgba(255,255,255,1) 99%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(210,155,242,1)), color-stop(41%, rgba(210,155,242,1)), color-stop(83%, rgba(245,220,245,1)), color-stop(99%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1)));
background: -webkit-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 41%, rgba(245,220,245,1) 83%, rgba(255,255,255,1) 99%, rgba(255,255,255,1) 100%);
background: -o-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 41%, rgba(245,220,245,1) 83%, rgba(255,255,255,1) 99%, rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 41%, rgba(245,220,245,1) 83%, rgba(255,255,255,1) 99%, rgba(255,255,255,1) 100%);
background: linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 41%, rgba(245,220,245,1) 83%, rgba(255,255,255,1) 99%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d29bf2', endColorstr='#ffffff', GradientType=1 );
}

.backg {
background: rgba(210,155,242,1);
background: -moz-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 25%, rgba(245,220,245,1) 62%, rgba(255,255,255,1) 85%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(210,155,242,1)), color-stop(25%, rgba(210,155,242,1)), color-stop(62%, rgba(245,220,245,1)), color-stop(85%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1)));
background: -webkit-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 25%, rgba(245,220,245,1) 62%, rgba(255,255,255,1) 85%, rgba(255,255,255,1) 100%);
background: -o-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 25%, rgba(245,220,245,1) 62%, rgba(255,255,255,1) 85%, rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 25%, rgba(245,220,245,1) 62%, rgba(255,255,255,1) 85%, rgba(255,255,255,1) 100%);
background: linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 25%, rgba(245,220,245,1) 62%, rgba(255,255,255,1) 85%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d29bf2', endColorstr='#ffffff', GradientType=1 );

}

Последний раз редактировалось daramylove, 22.12.2017 в 06:01.
Ответить с цитированием
  #2 (permalink)  
Старый 21.12.2017, 20:22
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Сообщение от daramylove
когда меняю форму на див данный код работает
Точно работает, даже при таком написании?

var icon document.getElementById('icon');
var input document.getElementById('input');
Ответить с цитированием
  #3 (permalink)  
Старый 21.12.2017, 20:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,125

daramylove,
Цитата:
Многие события автоматически влекут за собой действие браузера.
●Нажатие на кнопку «отправить» в форме – отсылку ее на сервер.
как с этим бороться и ещё много интересного тут
Действия браузера по умолчанию

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #4 (permalink)  
Старый 22.12.2017, 06:06
Новичок на форуме
Отправить личное сообщение для daramylove Посмотреть профиль Найти все сообщения от daramylove
 
Регистрация: 21.12.2017
Сообщений: 4

отформатировал
Ответить с цитированием
  #5 (permalink)  
Старый 22.12.2017, 09:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,125

daramylove,
форма отправляется на сервер, нужна отмена отправки!!! читайте про
ajax

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>form 2</title>
  <style type="text/css">
  * {
  padding: 0;
  margin: 0;
}

body {
  padding: 0;
  margin: 0;
}

form {

}

.form-wrap {
  width: 650px;
  height: 350px;
  box-sizing: border-box;
  left: 50%;
  margin-top: 200px;
  margin-left: -325px;
  position: relative;
  box-shadow: -22px 11px 43px -11px rgba(0,0,0,0.75);
}

.backg {
  position: absolute;
  width: 70px;
  height: 100%;
  top: 0;
  right: 0;
  overflow: hidden;
  cursor: pointer;
}

.backg input {
  opacity: 0;
  visibility: 0;
}

.backg:after {
  top: 0;
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: pink;
  opacity: 0;
  transition: opacity 1s;
}

.backg:hover:after {
  opacity: 1;
}

.input-wrap {
  width: 89%;
  display: flex;
  justify-content: space-around;
  padding-top: 60px;
}

.input-wrap input {
  outline: none;
  display: flex;
  width: 207px;
  height: 41px;
  font-size: 16px;
  border: 0;
  border-bottom: 1px solid #999;
}

.textarea-wrap {
  width: 89%;
  display: flex;
  justify-content: space-around;
  padding-top: 60px;
}

.textarea-wrap textarea {
  outline: none;
  display: flex;
  width: 73%;
  height: 133px;
  font-size: 16px;
  border: 0;
  border-bottom: 1px solid #999;
  list-style-type: none;
  resize: none;
}

.air-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

.backg i {

  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 10;
  font-size: 40px;
  transition: all 1s;
}

.input-wrap input[placeholder="Name"]:hover,
.input-wrap input[placeholder="Email"]:hover {

}

.icon {
 margin-top: -100px;
 opacity: 0;
 margin-left: 100px;
}



  /* SUBMIT BACKGROUND */
.backg:after {
background: rgba(210,155,242,1);
background: -moz-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 41%, rgba(245,220,245,1) 83%, rgba(255,255,255,1) 99%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(210,155,242,1)), color-stop(41%, rgba(210,155,242,1)), color-stop(83%, rgba(245,220,245,1)), color-stop(99%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1)));
background: -webkit-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 41%, rgba(245,220,245,1) 83%, rgba(255,255,255,1) 99%, rgba(255,255,255,1) 100%);
background: -o-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 41%, rgba(245,220,245,1) 83%, rgba(255,255,255,1) 99%, rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 41%, rgba(245,220,245,1) 83%, rgba(255,255,255,1) 99%, rgba(255,255,255,1) 100%);
background: linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 41%, rgba(245,220,245,1) 83%, rgba(255,255,255,1) 99%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d29bf2', endColorstr='#ffffff', GradientType=1 );
}

.backg {
background: rgba(210,155,242,1);
background: -moz-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 25%, rgba(245,220,245,1) 62%, rgba(255,255,255,1) 85%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(210,155,242,1)), color-stop(25%, rgba(210,155,242,1)), color-stop(62%, rgba(245,220,245,1)), color-stop(85%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1)));
background: -webkit-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 25%, rgba(245,220,245,1) 62%, rgba(255,255,255,1) 85%, rgba(255,255,255,1) 100%);
background: -o-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 25%, rgba(245,220,245,1) 62%, rgba(255,255,255,1) 85%, rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 25%, rgba(245,220,245,1) 62%, rgba(255,255,255,1) 85%, rgba(255,255,255,1) 100%);
background: linear-gradient(45deg, rgba(210,155,242,1) 0%, rgba(210,155,242,1) 25%, rgba(245,220,245,1) 62%, rgba(255,255,255,1) 85%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d29bf2', endColorstr='#ffffff', GradientType=1 );

}

  </style>
</head>
<body>
    <form class="form-wrap">
          <div class="input-wrap">
            <input type="text" name="text" placeholder="Name">
            <input type="email" name="email" placeholder="Email">
          </div>
          <div class="textarea-wrap">
            <textarea name="textarea" placeholder="Message"></textarea>
          </div>
          <label class="backg">
            <div class="air-wrap">
              <input type="submit" class="submit" id="input" onclick="return clickMe()">
              <i class="fa fa-paper-plane-o" aria-hidden="true" id="icon">✉</i>
            </div>
          </label>

    </form>
  <script type="text/javascript">
function clickMe () {
  // body...
  var icon = document.getElementById('icon');
    icon.classList.add('icon');

    function removeClass () {
      icon.classList.remove('icon');
    };
    setTimeout(removeClass, 2000);
    return false
};

  </script>
</body>
</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При наведении на определенный блок, DIV, появляется скрытое сожержимое kismedia Элементы интерфейса 9 22.05.2015 19:15
Скрыть div при нажатии на картинку SLameN jQuery 6 14.04.2014 21:27
Как отправить div внутри form ruslite AJAX и COMET 38 05.03.2014 03:48
При нажатии на ссылку раскрываются все div anonimous jQuery 1 09.08.2012 14:49
проблема с событиями при работе с Ext.extend slavik27 ExtJS 1 04.09.2011 13:05