How do you take a capture a populated form in JavaScript?

A common request is to use the GrabzIt's JavaScript Library to take a capture of a form the user has filled in. However as our captures are taken from remote servers, GrabzIt won't be able to do this without a little extra work. Fortunately all of this work has been built into the ConvertPage method, if you want more information check out capturing dynamic content.

Note however, that resources such as CSS and JavaScript can't be loaded unless the webpage is accessible on the internet. An example of using this functionality is shown below.

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.5.2/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">
function createScreenshot()
{
    //dynamically capture the page and add it to the div.
    GrabzIt("Sign in to view your Application Key").ConvertPage().AddTo('divResult');
}
</script>
</body>
</html>

More Web Capture Articles Community Web Capture Questions