Blog

Signals Blog

Sending Chemical Structures to a Server from a Web Page

Sending chemical structures to a server for processing is a fundamental requirement of many chemistry Web applications. Browsers accept text input, but chemists want to work with live structures. This article describes two methods to satisfy both constraints using standard technologies.

Send with Form

The <form> tag can be used to submit structure data. Prior to submission, a hidden text field is populated with the molfile produced from a structure editor - in this case ChemWriter.

Form-Based Structure Submission
<!DOCTYPE HTML> 
<html>
  <head>
    <title>Send Structure with Form</title>
    <link rel="stylesheet" href="https://chemwriter.com/sdk/chemwriter.css">
    <script src="https://chemwriter.com/sdk/chemwriter.js"></script>
  </head>
  <body>
    <form id="form" action="http://chemwriter.com/pings/" method="post">
      <div id="editor"
           data-chemwriter-width="500"
           data-chemwriter-height="350"
           data-chemwriter-ui="editor">
      </div>
      <input type="hidden" name="molfile" id="molfile">
      <input type="submit" value="Send Molecule">
    </form>
    <script>
      function onSubmit(event) {
        document.querySelector('#molfile').value =
          chemwriter.components['editor'].getMolfile();
      };

      document.querySelector('#form').addEventListener('submit', onSubmit);
    </script>
  </body>
</html>

The main reason to use this method is convenience. There's very little to set up and cross-origin requests are simple.

Send with AJAX

Although forms work well in many situations, sometimes we want more control. In these cases, POSTing via an XMLHttpRequest call can be useful.

AJAX Structure Submission
<!DOCTYPE HTML> 
<html>
  <head>
    <title>Send Structure with Form</title>
    <link rel="stylesheet" href="https://chemwriter.com/sdk/chemwriter.css">
    <script src="https://chemwriter.com/sdk/chemwriter.js"></script>
  </head>
  <body>
    <div id="editor"
         data-chemwriter-width="500"
         data-chemwriter-height="350"
         data-chemwriter-ui="editor">
    </div>
    <button id="submit">Submit</button>
    <script>
      function onSubmit(event) {
        var request = new XMLHttpRequest();

        request.onload = function() {
          alert(request.responseText);
        };

        request.open('POST', 'http://chemwriter.com/pings/');
        request.setRequestHeader('Content-Type', 'application/json');
        request.send(JSON.stringify({
          molfile: chemwriter.components['editor'].getMolfile()
        }));
      };

      document.querySelector('#submit').addEventListener('click', onSubmit);
    </script>
  </body>
</html>

This approach avoids a page refresh, which can sometimes be helpful. For example, a property calculator page could asynchronously retrieve a registration id, availability, molecular weight, InChI/SMILES, and other data. This information could then be displayed for the user while s/he continues to edit the structure.

In this second example, there are no forms, but it's possible to combine the two approaches as well. One reason to do so might be to validate structure input in some way prior to submitting a form.

Note: those running Internet Explorer 9 will need to adapt the code for this example if making cross-origin requests.

Conclusions

Chemical structures can be sent to a server through two basic approaches. Using a <form> element is most convenient, whereas an AJAX request offers more flexibility.