Just test: whole form copy with clipboard

In this example below you will see how to do a Just test: whole form copy with clipboard with some HTML / CSS and Javascript

Works in Chrome yet. Might add other later.Reads all elements from HTML page to a "clipboard"(currently to a div) and saves them to another form.

Thumbnail
This awesome code was written by tintera, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tintera ©
  • HTML
  • CSS
  • JavaScript
    <html>  
  <body>
    <form id="driver" accept-charset="UTF-8">
      <button type="button" name="transfer" id="transfer">
        Transfer <i>form data!</i>
      </button>
      <button type="button" name="clear" id="clear">Clear log</button>
    </form>
    <form id="in">
      <input name="one" value="t1">
      <input name="two" value="t2">
      <input name="three" value="t3">
      <input name="checkit" type="checkbox" checked="true">
      <input type=radio name="vegetable" value="v1" id="v1"  checked="true">
      <label for="v1">pepper</label>
      <input type="radio" name="vegetable" value="v2" id="v2" checked="true">
      <label for="v2">carrot</label>     
      <select name="fruit">
        <option value="a1">apple</option>
        <option value="o2" selected="true">orange</option>
        <option value="p3">pear</option>
      </select>
      <input type="password" name="pwd" value="top secret">
      <input type="color" name="favcolor" value="#88AA44">
      <input type="date" name="bday" value="2013-01-05">
      <input type="datetime" name="bdaytime" value="2013-01-05T19:47Z">
      <input type="time" name="usr_time" value="16:11">
      <input type="email" name="usremail" value="tomas.tintera@gmail.com">
      <input type="number" name="quantity" min="1" max="5" value="3">
      <input type="range" name="points" min="1" max="10" value="8">
      <button type="button" name="clickMe">Click <i>Me!</i></button>
      <br /><textarea name="paragraph">A text inside the texarea 
can have multiple lines.</textarea>
      <input type="submit" value="submit">
      <input type="reset" value="reset"><br>
    </form>
    <!--
    <form id="target">
      <input name="one" type="text">
      <input name="two" type="text">
      <input name="three">
      <input name="checkit" type="checkbox">
      <input type="radio" name="vegetable" value="v1" id="v1">
      <label for="v1">pepper</label>
      <input type="radio" name="vegetable" value="v2" id="v2">
      <label for="v2">carrot</label>     
      <select name="fruit">
        <option value="a1">apple</option>
        <option value="o2">orange</option>
        <option value="p3">pear</option>
      </select>
      <input type="password" name="pwd" value="">
      <input type="color" name="favcolor">
      <input type="date" name="bday">
      <input type="datetime" name="bdaytime">
      <input type="time" name="usr_time">
      <input type="email" name="usremail">
      <input type="number" name="quantity">
      <input type="range" name="points" min="1" max="10">
      <button type="button" name="clickMe">Click <i>Me!</i></button>
      <br /><textarea name="paragraph"></textarea>
      <input type="submit" value="submit">
      <input type="reset" value="reset"><br>
    </form>
-->
    <div class="save"></div>
  </body>
</html>


/*Downloaded from https://www.codeseek.co/tintera/just-test-whole-form-copy-with-clipboard-AEirK */
    .save {
  height: 26em; width:20%; 
  border: 1px dashed green;
  font-size: 70%;
}
textarea {
 width: 35em; 
}


/*Downloaded from https://www.codeseek.co/tintera/just-test-whole-form-copy-with-clipboard-AEirK */
    //var targetForm = $("form#target");
var targetForm = $("form#in");
var sourceForm=$("form#in");
//var pasteUrl="http://localhost:49919/Clip";
var pasteUrl = "http://localhost:49919/Clip/Create"
$.ajaxSetup ({  
  cache: false  
}); 

function addToServer(json)
{
  
  var request = $.ajax({
    url: pasteUrl,
    type: "GET",
    data: { 
      Title: "My title",
      SaveDate: "2012/1/6",
      Contents: "Here will be a pasted form 2."
    }
    //data: json,
    //dataType: "json"
  });
 
  request.done(function(msg) {
    log( "Request done: " + msg );
  });
 
  request.fail(function(jqXHR, textStatus) {
    log( "Request failed: " + textStatus );
  });
}

function log(text) {
  var log=$("div.save");
  log.append(text);
}

function clearLog() { 
  var log=$("div.save");
  log.empty();
}

window.addEventListener('load', function (e) {
  document.body.onpaste = function (e) {
    var items = e.clipboardData.items;
    for (var i = 0; i < items.length; ++i) {
      var item = items[i];
      log("kind: "+item.kind+"; ");
      if (item.kind == 'string')
      {
        log("type: "+item.type+"; ");
        log(item.getAsString());
      }
      var savedForm = e.clipboardData.getData('text/plain');
      restoreFormValues(targetForm, savedForm);
    }
  };  
  document.body.addEventListener('copy', function (e) {
    log("copy event triggered on body element");
    var savedForm = saveFormValues(sourceForm);
    if (e.clipboardData) {
      e.preventDefault();
      e.clipboardData.setData('text/plain', savedForm);
    }
    if (window.clipboardData) {
      e.returnValue = false;
      window.clipboardData.setData('text/plain', savedForm);
    }
  }, false);
});

function serializeElement(element, serialized) {
  var value = $(element).val();
  var inputType = element.type;
  var serializedInput = {
    inputType: inputType,
    name: element.name,
    value: value
  };
  serialized.push(serializedInput);
}

function saveFormValues(source) {
  if(!source)
  {
    source = $("form");
  }
  var serialized= [];
  sourceElements = source.find(" :input");
  sourceElements.each( function() {
    var inputType = this.type;
    switch(inputType){
      case "button":
      case "submit":
      case "reset":
      case "image":
        break;
      case "radio":
        if(this.checked){
          serializeElement(this, serialized);
        }
      default:
        serializeElement(this, serialized);
    }
  });
  var json= JSON.stringify(serialized);
  return json;
}

function restoreFormValues(target, savedFormData)
{
  var restored=jQuery.parseJSON(savedFormData);
  $.each(restored, function() 
  {                   
    switch (this.inputType)
    {
      case "select-one":
        var selector  = "select[name='"+this.name+"']";
        target.find(selector).val(this.value);
        break;
      case "radio":
        var selector =  "input[name='"+this.name+"'][value='"+this.value+"']";
        target.find(selector).prop("checked", true);
      case "checkbox":
        var selector =  "input[name='"+this.name+"']";
        target.find(selector).prop("checked", true);
      case "submit":
      case "button":
      case "reset":
      case "image":
        break;
      case "textarea":
        var selector  = "textarea[name='"+this.name+"']";
        target.find(selector).val(this.value);        
        break;
      default:
        var selector  = "input[name='"+this.name+"']";
        target.find(selector).val(this.value);        
        break;
     }
  });
}

function transferFormValues() {
  var saved = saveFormValues(sourceForm);
  log(saved+"<br /><br />");
  restoreFormValues(targetForm, saved);
}

$('form').submit(function() {
  return false;
});
$("#clear").click( function() {
  clearLog();
});
$("#transfer").click( function() {
  clearLog();
  transferFormValues();
});
//transferFormValues();
addToServer();

Comments