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.

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <title>Submit Molfile to Server | ChemWriter</title>
    <link rel="stylesheet" href="">
    <script src=""
      .editor { height: 350px; max-width: 500px; }
    <div class="editor">
      <div id="my-editor"

    <form action="" method="post">
      <input type="hidden" name="serialization" id="serialization">
      <input type="submit" value="Submit Molfile">

      let form = document.querySelector('form');

      form.addEventListener('submit', (event) => {
        let editor = chemwriter.components['my-editor'];
        let hiddenField = document.querySelector('#serialization');

        hiddenField.value = editor.getMolfile();

Run Demo