рони,
вот решил добавить список селект, и что то ни как не получается
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Генератор ключа</title>
<style>
body {
padding: 10px 0 0 100px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
h2, h3, h4, p, ol, ul {
margin: 10px 0;
padding: 0;
/*border: 1px solid #999;*/
}
ul {
list-style-type: none;
}
ul li{
padding: 4px 0;
}
ul li span {
display: inline-block;
text-align: right;
width: 180px;
padding-right: 10px;
}
table td {
vertical-align: top;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script>
window.addEventListener('DOMContentLoaded', function() {
var form = document.querySelector('form'),
result = document.querySelector('[name="result"]'),
items = document.querySelectorAll('#god, ol input, #id, #select.value');
select = document.getElementById('select');
alert(select.value);
function f() {
result.innerHTML = [].reduce.call(items, function(s,a) {
return s + (a.type == "text" ? a.value : +a.checked)
},'')
}
form.addEventListener('change', f, false);
form.addEventListener('input', f, false);
});
function xml (){
$("input[type='text'], textarea, input[type='checkbox']").each(function() {
if (this.checked) {
this.setAttribute("checked", "checked");
} else {
this.removeAttribute("checked");
}
var txt = $(this).val();
$(this).attr('value', txt);
});
var s = new XMLSerializer();
var d = document.querySelector('body');
var str = s.serializeToString(d).replace('xmlns="http://www.w3.org/1999/xhtml"','');
alert(str);
};
$(document).ready(function(){
$("input[type='checkbox']").on("click", function() {
if (this.checked) {
this.setAttribute("checked", "checked");
} else {
this.removeAttribute("checked");
}
});
$("input[type='text'], textarea").on("input", function() {
var txt = $(this).val();
$(this).attr('value', txt);
});
});
</script>
</head>
<body style="font-family: Geneva, Arial, Helvetica, sans-serif;">
<form action="#">
<table>
<tr>
<td colspan="2">
<h2>Генератор ключа</h2>
<p><input id="god" type="text" pattern="[0-9]{4}"/><span> Год выпуска</span></p>
</td>
</tr>
<tr>
<td>
<h3 style="width:250px">Жанр</h3>
<ol style="width:250px">
<li><input type="checkbox"><span>Боевые искусства</span></li>
<li><input type="checkbox"><span>Война</span></li>
<li><input type="checkbox"><span>Драма</span></li>
<li><input type="checkbox"><span>Детектив</span></li>
<li><input type="checkbox"><span>История</span></li>
<li><input type="checkbox"><span>Комедия</span></li>
<li><input type="checkbox"><span>Меха</span></li>
<li><input type="checkbox"><span>Мистика</span></li>
<li><input type="checkbox"><span>Махо-сёдзё</span></li>
<li><input type="checkbox"><span>Музыкальный</span></li>
<li><input type="checkbox"><span>Повседневность</span></li>
<li><input type="checkbox"><span>Приключения</span></li>
<li><input type="checkbox"><span>Пародия</span></li>
<li><input type="checkbox"><span>Романтика</span></li>
<li><input type="checkbox"><span>Сёнэн</span></li>
<li><input type="checkbox"><span>Сёдзё</span></li>
<li><input type="checkbox"><span>Спорт</span></li>
<li><input type="checkbox"><span>Сказка</span></li>
<li><input type="checkbox"><span>Сёдзё-ай</span></li>
<li><input type="checkbox"><span>Сёнэн-ай</span></li>
<li><input type="checkbox"><span>Самураи</span></li>
<li><input type="checkbox"><span>Триллер</span></li>
<li><input type="checkbox"><span>Ужасы</span></li>
<li><input type="checkbox"><span>Фантастика</span></li>
<li><input type="checkbox"><span>Фэнтези</span></li>
<li><input type="checkbox"><span>Школа</span></li>
<li><input type="checkbox"><span>Этти</span></li>
</ol>
</td>
<td>
<h3 style="width:250px">Тип</h3>
<ol start="28" style="width:250px">
<li><input type="checkbox"><span>ТВ</span></li>
<li><input type="checkbox"><span>ТВ-спэшл</span></li>
<li><input type="checkbox"><span>OVA</span></li>
<li><input type="checkbox"><span>ONA</span></li>
<li><input type="checkbox"><span>Полнометражный фильм</span></li>
<li><input type="checkbox"><span>Короткометражный фильм</span></li>
<li><input type="checkbox"><span>Онгоинты</span></li>
</ol>
<select id="select">
<option value="Sony">Sony</option>
<option value="Toshiba">Toshiba</option>
<option value="Acer">Acer</option>
<option value="Asus">Asus</option>
</select>
</form>
<h3>Свойства</h3>
<ul>
<li><span>Название:</span><input type="text" size="50"/><input type="text" size="20"/></li>
<li><span>Количество серий:</span><input type="text" size="50"/></li>
<li><span>Режиссёр:</span><input type="text" size="50"/></li>
<li><span>Студия:</span><input type="text" size="50"/></li>
<li><span>Состояние:</span><input type="text" size="50"/></li>
<li><span>Аниме известно как:</span><input type="text" size="50"/></li>
<li><span>Описание:</span><br/><textarea rows="6" cols="100" name="text1"></textarea></li>
<li><textarea rows="6" cols="100" name="text2"></textarea></li>
</ul>
</td>
</tr>
<tr>
<td colspan="2">
<p><input id="id" type="text" pattern="[0-9]{5}"/><span> ID Фильма</span></p>
<h4>Ключ: <output id="result" name="result" style="color:green"> </output></h4>
<button type="reset" onclick="window.location.reload();">Сбросить</button>
</td>
</tr>
</table>
<button type="button" onclick="xml();">показать</button>
</body>
</html>