Показать сообщение отдельно
  #9 (permalink)  
Старый 06.03.2017, 17:48
Аспирант
Отправить личное сообщение для Фридрих Посмотреть профиль Найти все сообщения от Фридрих
 
Регистрация: 10.09.2013
Сообщений: 59

рони,
вот решил добавить список селект, и что то ни как не получается
<!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>
Ответить с цитированием