javascript и несколько input text

216

13 августа 2018, 18:10

Прошу помочь решить проблему. Есть два поля ввода, которые затем формируют список. Но в случае со вторым полем ввода не записываются строки в колонку, т. е. сама строка появляется, но введеного в нее текста нет.

Не могу найти причину, прошу подсказать.

Если задать для второго поля ввода (input type="password") вместо (input type="text"), то все начинает работать корректно, но появляется другая проблема -- все что мы вводим в строку "password" скрывается, что неудобно.

Во вложении архив, необходимо смотреть листы "nеw recept.html/js"

$(function (){ 
 
var $list, $stranica, $newItemForm1, $newItemForm2, $newItemButton; 
  $newItemForm1 = $('#newItemForm1'); 
  $newItemForm2 = $('#newItemForm2'); 
  $list = $('ul#one'); 
  $stranica = $('ul#two'); 
 
 $newItemForm1.on('submit', function(e) {       // При отправке нового пункта 
    e.preventDefault();                         // Предотвращаем отправку формы 
    var text1 = $('input:text').val();           // Получаем значение текстового поля 
    $list.append('<li>' + text1 + '</li>');      // Добавляем элемент в конец списка 
    $('input:text').val('');                    // Очищаем поле ввода 
  }); 
 
 
$newItemForm2.on('submit', function(e) {       // При отправке нового пункта 
    e.preventDefault();                         // Предотвращаем отправку формы 
    var text2 = $('input:text').val();           // Получаем значение текстового поля 
    $stranica.append('<li>' + text2 + '</li>');      // Добавляем элемент в конец списка 
    $('input:text').val('');                    // Очищаем поле ввода 
  }); 
 
 
  });

body{ 
background-image: url(images/fon777.jpg); 
background-repeat: no-repeat; 
background-attachment: fixed; 
background-position: center top; 
font-family:'Roboto Roboto-Regular', sans-serif; 
} 
 
 
 
@font-face { 
font-family: Roboto Regular; 
src: url(Roboto-Regular.ttf); 
} 
 
.str{ 
width: 970px; 
height: auto; 
margin: 0 auto; 
background-color: #efefef; 
background-repeat: no-repeat; 
background-attachment: scroll; 
background-position: center top; 
 
} 
 
h4, h6{ 
	text-align: right; 
	font-style: italic;  
} 
 
h3{ 
	text-align: center; 
	font-weight: bold; 
	font-style: italic;  
	text-decoration: underline; 
} 
 
h1{ 
	text-align: center; 
	font-weight: bold; 
	font-style: italic;  
} 
 
div.lin { 
  border-bottom: 2px solid #5bc0de; 
} 
 
h5{ 
color: black;	 
} 
 
.btn-group{ 
margin: 0px; 
padding: 1px 1px 1px 1px; 
 
border: 10px; 
} 
 
#content1  
{ 
	height: 100%; 
	overflow: auto; 
	text-transform: uppercase; 
} 
 
#ot{ 
	padding: 10px; 
	border-radius: 25px;  
} 
 
#carousel-example-generic1, 
#carousel-example-generic2, 
#carousel-example-generic3 
{ 
	margin: 10px; 
    float: left; 
} 
 
@keyframes animate{  
from {  
opacity: 0;  
transform: translateY(-100%)  
}  
to {  
opacity: 1;  
transform: unset;  
}  
}  
 
#pic{ 
border-radius: 25px;  
animation-name: animate;  
animation-duration: 500ms;  
opacity: 1.0;  
} 
 
.colon  
{ 
	width: 290px; 
	float: left; 
	margin: 10px; 
	text-align: center; 
    border-radius: 25px;  
} 
 
div.colon:hover { 
background-color: #b1c6b2;}

<html> 
 
<head> 
 
<title>???</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
<link href="csstitle.css" type="text/css" rel="stylesheet" /> 
 <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
</head> 
 
<body> 
<div class="str"> 
<h1><i>???</i></h1> 
<hr /> 
<a href="title.html"><button type="button" class="btn btn-success btn-sm btn-block">Вернуться на главную страницу</button></a> 
<hr /> 
 
<div id="ingridients"> 
<h3>Ингредиенты:</h3> 
 
<ul id="one"> 
</ul> 
  
<form id="newItemForm1"> 
    <input type="text" id="itemDescription1" placeholder="Добавьте описание" /> 
    <input type="submit" id="add1" value="добавить" /> 
</form> 
     
</div> 
 
 
<hr /> 
 
<div id="prigotovlenie"> 
<h3>Приготовление:</h3> 
 
<ul id="two"> 
</ul> 
 
<form id="newItemForm2"> 
    <input type="text" id="itemDescription2" placeholder="Добавьте описание" /> 
    <input type="submit" id="add2" value="добавить" /> 
</form> 
 
<h5 id="ot">Приятного аппетита!</h5> 
</div> 
 
 
<a href="title.html"><button type="button" class="btn btn-success btn-sm btn-block">Вернуться на главную страницу</button></a> 
</div> 
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script> 
    <script src="new recept.js"></script> 
</body> 
</html>

введите сюда описание изображения

Answer 1

$(function (){ 
 
var $list, $stranica, $newItemForm1, $newItemForm2, $newItemButton; 
  $newItemForm1 = $('#newItemForm1'); 
  $newItemForm2 = $('#newItemForm2'); 
  $list = $('ul#one'); 
  $stranica = $('ul#two'); 
 
 $newItemForm1.on('submit', function(e) {       // При отправке нового пункта 
    e.preventDefault();                         // Предотвращаем отправку формы 
    var text1 = $('input:text').val();           // Получаем значение текстового поля 
    $list.append('<li>' + text1 + '</li>');      // Добавляем элемент в конец списка 
    $('input:text').val('');                    // Очищаем поле ввода 
  }); 
 
 
$newItemForm2.on('submit', function(e) {       // При отправке нового пункта 
    e.preventDefault();                         // Предотвращаем отправку формы 
    var text2 = $('#itemDescription2').val();           // Получаем значение текстового поля 
    $stranica.append('<li>' + text2 + '</li>');      // Добавляем элемент в конец списка 
    $('#itemDescription2').val('');                    // Очищаем поле ввода 
  }); 
 
 
  });

body{ 
background-image: url(images/fon777.jpg); 
background-repeat: no-repeat; 
background-attachment: fixed; 
background-position: center top; 
font-family:'Roboto Roboto-Regular', sans-serif; 
} 
 
 
 
@font-face { 
font-family: Roboto Regular; 
src: url(Roboto-Regular.ttf); 
} 
 
.str{ 
width: 970px; 
height: auto; 
margin: 0 auto; 
background-color: #efefef; 
background-repeat: no-repeat; 
background-attachment: scroll; 
background-position: center top; 
 
} 
 
h4, h6{ 
	text-align: right; 
	font-style: italic;  
} 
 
h3{ 
	text-align: center; 
	font-weight: bold; 
	font-style: italic;  
	text-decoration: underline; 
} 
 
h1{ 
	text-align: center; 
	font-weight: bold; 
	font-style: italic;  
} 
 
div.lin { 
  border-bottom: 2px solid #5bc0de; 
} 
 
h5{ 
color: black;	 
} 
 
.btn-group{ 
margin: 0px; 
padding: 1px 1px 1px 1px; 
 
border: 10px; 
} 
 
#content1  
{ 
	height: 100%; 
	overflow: auto; 
	text-transform: uppercase; 
} 
 
#ot{ 
	padding: 10px; 
	border-radius: 25px;  
} 
 
#carousel-example-generic1, 
#carousel-example-generic2, 
#carousel-example-generic3 
{ 
	margin: 10px; 
    float: left; 
} 
 
@keyframes animate{  
from {  
opacity: 0;  
transform: translateY(-100%)  
}  
to {  
opacity: 1;  
transform: unset;  
}  
}  
 
#pic{ 
border-radius: 25px;  
animation-name: animate;  
animation-duration: 500ms;  
opacity: 1.0;  
} 
 
.colon  
{ 
	width: 290px; 
	float: left; 
	margin: 10px; 
	text-align: center; 
    border-radius: 25px;  
} 
 
div.colon:hover { 
background-color: #b1c6b2;}

<html> 
 
<head> 
 
<title>???</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
<link href="csstitle.css" type="text/css" rel="stylesheet" /> 
 <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
</head> 
 
<body> 
<div class="str"> 
<h1><i>???</i></h1> 
<hr /> 
<a href="title.html"><button type="button" class="btn btn-success btn-sm btn-block">Вернуться на главную страницу</button></a> 
<hr /> 
 
<div id="ingridients"> 
<h3>Ингредиенты:</h3> 
 
<ul id="one"> 
</ul> 
  
<form id="newItemForm1"> 
    <input type="text" id="itemDescription1" placeholder="Добавьте описание" /> 
    <input type="submit" id="add1" value="добавить" /> 
</form> 
     
</div> 
 
 
<hr /> 
 
<div id="prigotovlenie"> 
<h3>Приготовление:</h3> 
 
<ul id="two"> 
</ul> 
 
<form id="newItemForm2"> 
    <input type="text" id="itemDescription2" placeholder="Добавьте описание" /> 
    <input type="submit" id="add2" value="добавить" /> 
</form> 
 
<h5 id="ot">Приятного аппетита!</h5> 
</div> 
 
 
<a href="title.html"><button type="button" class="btn btn-success btn-sm btn-block">Вернуться на главную страницу</button></a> 
</div> 
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script> 
    <script src="new recept.js"></script> 
</body> 
</html>

Answer 2

вот скрипт, который я давно написал. можешь под свои нужды подредактировать...

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Document</title> 
	<style> 
 
		body { 
			font-family: sans-serif; 
		} 
 
		button#myButton { 
			background-color: #7cacf9; 
			padding: 10px; 
			border-radius: 5px; 
			border:none; 
			color: white; 
			box-shadow: 1px 1px black; 
		} 
 
		ul { 
			padding-left: 20px; 
		} 
 
		ul li { 
			padding:10px 0; 
			border-bottom: 1px solid lightgrey; 
		} 
	</style> 
</head> 
<body> 
	 
<h1>Todo List</h1> 
<form action="" id="myForm"> 
	<input type="text" style="height: 30px;margin-right: 20px;" id="inputTodoList"> 
	 
</form> 
 
 
<button id="myButton">Add new item</button> 
 
 
 
<ul id="lol"></ul> 
<script> 
var x = document.forms['myForm']; 
	document.querySelector('#myButton').onclick = function () { 
		/* body... */ 
		 
		for (var i = x.length - 1; i >= 0; i--) { 
			document.querySelector('#lol').innerHTML += '<li>' + x[i].value + '</li>'; 
 
		} 
		document.querySelector('#inputTodoList').value = ''; 
 
		removeTask(); 
		 
	} 
 
	 
	function removeTask ()  
	{ 
		var bzz = document.getElementsByTagName('li'); 
		for (var i = bzz.length - 1; i >= 0; i--)  
		{ 
				bzz[i].onclick = function ()  
				{ 
					this.parentNode.removeChild(this); 
				} 
			 
				bzz[i].onmouseover = function ()  
				{ 
					this.style.backgroundColor = '#FBF2EF'; 
				} 
				bzz[i].onmouseout = function () 
				{ 
					this.style.backgroundColor = 'white'; 
				} 
		} 
	} 
 
</script> 
 
 
 
 
 
</body> 
</html>