GrabzIt
Tools to Capture and Convert the Web

How do you take a screenshot of a populated form in JavaScript?

A common request is to use the GrabzIt's JavaScript Library to take a screenshot of a form the user has filled in. However as our screenshots are taken from remote servers, GrabzIt won't be able to do this without a little extra work.

One option is to use the Web Recorder Plugin, which allows you to capture changes to small parts of a web page. However if you need to do something more advanced below is an example of how to do so.

The basic idea is to capture the form values of the web page and then pass them in the query string of the URL of the page you want to take the screenshot of. Your page then uses these values to populate the form.

<html>
<head>
<script type="text/javascript" src="grabzit.min.js"></script>
</head>
<body onload="loadFromQueryString()">
<form id="myForm">
<label>Name</label> <input type="text" name="fullname" value="Sam"/><br/>
<label>Order</label> <select name="order">
<option value="Computer">Computer</option>
<option value="Monitor">Monitor</option>
<option value="Printer">Printer</option>
</select><br/><br/>
<input type="button" value="Take Screenshot" onclick="createScreenshot();"/>
</form>
<div id="divResult"></div>
<script type="text/javascript">

/*
*  This populates the form from the query string
*/
function loadFromQueryString()
{
    var query = document.location.search.replace('?', '');
    query = query.split('&');

    for (var i = 0; i < query.length; i++)
    {
      var field = query[i].split("=");

      if (field == null)
      {
          continue;
      }

      //assumes there is only one matching form name
      var formElement = document.getElementsByName(field[0]);

      if (formElement != null && formElement.length >= 1)
      {
          formElement[0].value = decodeURIComponent(field[1]);
      }
    }
}

/*
* This makes a query string from the form value name pairs and
* sends it along with the current URL to grabzit.
*/
function createScreenshot()
{
	var kvpairs = [];
	var form = document.getElementById('myForm');
	for ( var i = 0; i < form.elements.length; i++ ) {
	   var e = form.elements[i];
           var formVal = e.value;
           if (formVal != null)
           {
               //fixes issues by double encoding hashes
               formVal = formVal.replace("#","%2523");
           }
	   kvpairs.push(encodeURIComponent(e.name) + "=" + encodeURIComponent(formVal));
	}
	var queryString = kvpairs.join("&");

	var url = document.location.href;

	if (url.indexOf('?') == -1)
	{
		url += '?' + queryString;
	}
	else
	{
		url += '&' + queryString;
	}

    var div = document.getElementById('divResult');
    
    //clear old screenshots
    div.innerHTML = '';

    //add grabzit javascript dynamically with this pages URL.
    GrabzIt("Sign in to view your Application Key").ConvertURL(url).AddTo(div);

    return false;
}
</script>
</body>
</html>
Back to SupportMore screenshot questions
Try all our premium features for free with a 7 day free trial. Then from $5.99 a month, unless cancelled.
  • More Captures
  • More Features
  • More API's
  • Bigger Scrapes
  • Bigger Screenshots
  • Bigger Everything
Start Free Trial