How to Create A Simple Structure Search Form with ChemWriter and ChemSpider [Video]
A frequently asked question from new ChemWriter developers is how to submit chemical structures to a server. This step-by-step video tutorial shows how using ChemSpider.
If you're running your own chemical database for which you'd like to enable structure search, the principles described here are essentially the same:
- Create a form with a hidden text field.
- To the submit button, attach an onclick event handler that invokes a custom JavaScript function.
- Implement the custom function such that it transfers a molfile from ChemWriter to the hidden text field.
Source Code
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, IE=9" />
<link rel=stylesheet href="chemwriter.css" type="text/css" media=screen />
<script src="chemwriter.js"></script>
</head>
<body>
<div id="editor"></div>
<form action="http://www.chemspider.com/WebAPI.aspx" method="post">
<input name="molfile" id="molfile" type="hidden" />
<input type="submit" value="Search ChemSpider" onclick="transfer()" />
</form>
<script>
var editor = chemwriter.loadEditor('editor');
var transfer = function() {
document.getElementById('molfile').value = editor.getMolfile();
};
</script>
</body>
</html>