Submit a Molfile to a Server
A molecule can be drawn in an Editor and then submitted to a server as a molfile. Applications include searching by structure and adding a molecule to a collection.
The trick is to set the value of a hidden input field prior to form submission. A JavaScript event handler responds to the form submission event by populating this hidden field.
The example below submits a substructure query to the Kemga server.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Submit Molfile to Server | ChemWriter</title>
<link rel="stylesheet" href="https://chemwriter.com/sdk/chemwriter.css">
<script src="https://chemwriter.com/sdk/chemwriter.js"
data-chemwriter-license="https://chemwriter.com/licenses/396f597e46fbdbd39e34108b010c6efcb2ef2ed2.txt">
</script>
<style>
.editor { height: 350px; max-width: 500px; }
</style>
</head>
<body>
<div class="editor">
<div id="my-editor"
data-chemwriter-ui="editor"
data-chemwriter-src="https://chemwriter.com/data/structure-2.mol">
</div>
</div>
<form action="https://kemga.com/queries/" method="post">
<input type="hidden" name="serialization" id="serialization">
<input type="submit" value="Submit Molfile">
</form>
<script>
let form = document.querySelector('form');
form.addEventListener('submit', (event) => {
let editor = chemwriter.components['my-editor'];
let hiddenField = document.querySelector('#serialization');
hiddenField.value = editor.getMolfile();
})
</script>
</body>
</html>