ChemWriter

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">
  <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>

Run Demo