GrabzIt
Tools to Capture and Convert the Web

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 relative 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/gh/GrabzIt/grabzit@js-3.2.9.7/javascript/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>
Back to SupportMore Web Capture ArticlesCommunity Web Capture 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 Captures
  • Bigger Everything
Start Free Trial