Blog

Signals Blog

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:

  1. Create a form with a hidden text field.
  2. To the submit button, attach an onclick event handler that invokes a custom JavaScript function.
  3. Implement the custom function such that it transfers a molfile from ChemWriter to the hidden text field.

Source Code

<!DOCTYPE HTML> 
<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>
 

Resources

  1. ChemWriter Homepage
  2. Full Example: Send a Molfile to a Server
  3. ChemSpider Web API Home