Форум

Sergey312 · #1 (**permalink**) 05.04.2017, 13:22

Новичок, прошу строго не судить.
Соорудил страницу с кнопкой, после нажатия на которую поверх окна выводится div с формой для ввода имени, кнопки "ОК", "Отмена". Далее, проводится валидация на предмет заполненности поля формы.

Хочу, чтобы при нажатии ОК, после валидации, текст из формы выводился обратно в окно стартовой страницы. А при "Отмена" выходило предупреждение.

Благодарю, ksa, laimas

<head>
      <title>Всплывающая контактная форма</title>
   <style>
   .block { 
      position: relative;
      margin:4px auto;
      z-index:2;
      width:200px;
      padding:40px 20px;
      background:#FFFFFF;
      border:1px solid #666666;
      border-radius:20px;
      box-shadow:0 0 2px rgba(0,0,0,0.5);
      }
	.popup {
      position: absolute;
      height:100%;
      width:100%;
      top:0;
      left:0;
      display:none;
      }
    </style>
	<script src="https://code.jquery.com/jquery-3.0.0.min.js"> </script>
	
	<script>
	
	  function showPopup() 
	  {
	   $(".popup").fadeIn(800);
      }

      function validate_form()
{
	  valid = true;

      if ( document.contact_form.contact_name.value == "" )
      {
        alert ( "Вы  не заполнили поле Имя" );
        valid = false;
      }
  	
	return valid;
    }
	</script>
   </head>

<body>

    <button onclick="showPopup();">Форма ввода данных</button><br>
<div class="popup">     
       <div class="block">
        <form name="contact_form" onsubmit="return validate_form();">
		<h3>Заполните форму <br>(Все поля обязательны)</h3>
           <input type="text" name="contact_name" placeholder="Имя"><br>
		  
           <input type="submit" value="OK"> <input type="submit" value="Отмена">
        </form>
      </div>
</div>

</body>

ksa · #2 (**permalink**) 05.04.2017, 16:06

Как вариант...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.block { 
	position: relative;
	margin:4px auto;
	z-index:2;
	width:200px;
	padding:40px 20px;
	background:#FFFFFF;
	border:1px solid #666666;
	border-radius:20px;
	box-shadow:0 0 2px rgba(0,0,0,0.5);
}
.popup {
	position: absolute;
	height:100%;
	width:100%;
	top:0;
	left:0;
	display:none;
}
</style>
<script type='text/javascript'>
function showPopup() {
	$(".popup").fadeIn(800);
}
function cancel() {
	alert('А жаль...');
	$(".popup").fadeOut(800);
}
function validate_form(){
	var name=$('#contact_name').val();
	if (name=='') {
		alert ( "Вы  не заполнили поле Имя" );
	} else {
		$('#names').append('<p>'+name+'</p>');
		$(".popup").fadeOut(800);
	};
	return false;
}
</script>
</head>
<body>
<button onclick="showPopup();">Форма ввода данных</button>
<div id='names'></div>
<div class="popup">     
	<div class="block">
		<form name="contact_form" onsubmit="return validate_form();">
			<h3>Заполните форму <br>(Все поля обязательны)</h3>
			<input type="text" name="contact_name" id="contact_name" placeholder="Имя"><br>
			<input type="submit" value="OK"> 
			<input type="button" onclick='cancel();' value="Отмена">
		</form>
	</div>
</div>
</body>
</html>

laimas · #3 (**permalink**) 05.04.2017, 16:26

Сообщение от ksa

var name=$('#contact_name').val();

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

Форум

Справочник

Discord чат

Курсы javascript