Экспорт и Импорт данных

Экспорт значений с input'ов и Импорт результатов в textarea

by George Bash

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form action="#" method="post" class="values-form">
  <input type="text" name="p-a-name" placeholder="Autor name">
  <input type="url" name="p-a-url" placeholder="Autor profile url">
  <input type="email" name="p-a-email" placeholder="Autor e-mail">
  <input type="text" name="l-year" placeholder="License year">
  <input type="text" name="f-p-name" placeholder="Project name">
  <input type="url" name="p-sc-url" placeholder="Project url">
</form>

<code id="source">
    <h1><b>Project name:</b> <span class="f-p-name"></span></h1>
    <p><b>Project url:</b> <span class="p-sc-url"></span></p>
    <p><b>Autor name:</b> <span class="p-a-name"></span></p>
    <p><b>Autor profile url:</b> <span class="p-a-url"></span></p>
    <p><b>Autor e-mail:</b> <span class="p-a-email"></span></p>
    <p><b>License year:</b> <span class="l-year"></span></p>
    <style>p{margin:0;}</style>
</code>

<br>

<textarea id="target">

</textarea>

CSS

input {margin: 10px 10px 0px 0px;}
h1 {margin: 0; padding-top: 10px;}
#source {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
}
#target {
  color: red;
  width: 100%;
  height: 140px;
  border-radius: 4px;
  padding: 0;
  margin: 0;
}

JavaScript

$(function() {
    $("form").on("input change", function() {
        var data = $(this).serializeArray(), obj ={};
        $.each(data, function(i, el) {
            var cls = "."+el.name, val = el.value;
            if(/\[\]/.test(cls)) {
               cls = cls.slice(0,-2);
               obj[cls] !== undefined ? obj[cls].push(val) : (obj[cls] = [val]);
               val = obj[cls].join(",");
            }
            $(cls).html(val);
        });
    })
});

var html = $("#source").html();
document.getElementById("target").innerHTML = html;