Форум

Фридрих · #1 (**permalink**) 19.02.2017, 10:31

Не получается создать массив из формы, а именно, нужно чтоб значения выводились в строку....сначала текст потом если чекед - то 1, если нет - то 0, ну и в конце текст...
и всё это надо вывести в "output"

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Генератор ключа</title>
 </head>
 <body>
	<input type="text">text<br>
    <input type="checkbox">text<br>
	<input type="checkbox">text<br>
    <input type="checkbox">text<br>
	<input type="checkbox">text<br>
    <input type="checkbox">text<br>
	<input type="checkbox">text<br>
    <input type="checkbox">text<br>
	<input type="checkbox">text<br>
    <input type="checkbox">text<br>
	<input type="checkbox">text<br>
    <input type="checkbox">text<br>
	<input type="checkbox">text<br>
	<input type="text">text<br>
	<input type="button" value="submit">
	<output name="result">0</output>
 </body>
</html>

рони · #2 (**permalink**) 19.02.2017, 10:59

Фридрих,
в чём проблема циклом обойти нужные элементы? и где форма? где пример строки которую хотите создать?

рони · #3 (**permalink**) 19.02.2017, 11:00

Фридрих,
http://api.jquery.com/serialize/

Фридрих · #4 (**permalink**) 19.02.2017, 11:04

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

в чём проблема циклом обойти нужные элементы? и где форма? где пример строки которую хотите создать?

форма не столь важна....строка будет выглядеть примерно так

text01010101010text

рони · #5 (**permalink**) 19.02.2017, 11:10

Сообщение от Фридрих

text01010101010text

text откуда взят?

Фридрих · #6 (**permalink**) 19.02.2017, 11:13

рони,
из полей текст который будет вводиться

рони · #7 (**permalink**) 19.02.2017, 11:21

Фридрих,

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Генератор ключа</title>
  <script>
 window.addEventListener('DOMContentLoaded', function() {
   var form = document.querySelector('form'),
   result = document.querySelector('[name="result"]'),
   items = document.querySelectorAll('[type="text"],[type="checkbox"]');
   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);
     });
 </script>
 </head>
 <body>
 <form action="http://">
  <input type="text">text<br>
    <input type="checkbox">text<br>
  <input type="checkbox">text<br>
    <input type="checkbox">text<br>
  <input type="checkbox">text<br>
    <input type="checkbox">text<br>
  <input type="checkbox">text<br>
    <input type="checkbox">text<br>
  <input type="checkbox">text<br>
    <input type="checkbox">text<br>
  <input type="checkbox">text<br>
    <input type="checkbox">text<br>
  <input type="checkbox">text<br>
  <input type="text">text<br>
  <input type="button" value="submit">
  <output name="result">0</output>
  </form>
 </body>
</html>

Фридрих · #8 (**permalink**) 19.02.2017, 11:24

рони,
то что надо...благодарю

Фридрих · #9 (**permalink**) 06.03.2017, 17:48

рони,
вот решил добавить список селект, и что то ни как не получается

<!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>

рони · #10 (**permalink**) 06.03.2017, 18:08

Фридрих,

window.addEventListener('DOMContentLoaded', function() {
   var form = document.querySelector('form'),
   result = document.querySelector('[name="result"]'),
   items = document.querySelectorAll('#god, ol input, #id, #select');

   function f() {
   result.innerHTML = [].reduce.call(items, function(s,a) {
   return s + (a.type == "checkbox" ?  +a.checked : a.value)
   },'')
   }
   form.addEventListener('change', f, false);
   form.addEventListener('input', f, false);
   });

Форум

Справочник

Discord чат

Курсы javascript