title: Html in Python communicating with JavaScript in Python
body: <p>I have an html form that places text field data into a Javascript array.  The code is shown here:<a href="http://jsbin.com/maniwu/3/edit?html,js,output" rel="nofollow noreferrer">http://jsbin.com/maniwu/3/edit?html,js,output</a>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var message = [];
  
  var receiverInput = document.getElementById("Receiver");
  var classificationInput = document.getElementById("Classification");
  var titleInput = document.getElementById("Title");
  var senderInput = document.getElementById("Sender");
  var dateInput = document.getElementById("Date");
  
  var messageBox = document.getElementById("display");
  
  function insert() {
    message.push(receiverInput.value);
    message.push(classificationInput.value);
    message.push(titleInput.value);
    message.push(senderInput.value);
    message.push(dateInput.value);
    clearAndShow();
  }
  
  function clearAndShow() {
    // Clear our fields
    receiverInput.value = "";
    classificationInput.value = "";
    titleInput.value = "";
    senderInput.value = "";
    dateInput.value = "";
  
    // Show our output
    messageBox.innerHTML = "";
  
    messageBox.innerHTML += "Sent Header " + message + "&lt;br/&gt;";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;body&gt;
    &lt;form&gt;
      &lt;input id="Receiver" type="text" placeholder="Receiver" /&gt;
      &lt;input id="Classification" type="text" placeholder="Classification" /&gt;
      &lt;input id="Title" type="text" placeholder="Title" /&gt;
      &lt;input id="Sender" type="text" placeholder="Sender" /&gt;
      &lt;input id="Date" type="text" placeholder="Date" /&gt;
      &lt;input type="button" value="Save/Show" onclick="insert()" /&gt;
    &lt;/form&gt;
    &lt;div id="display"&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  
  But I want each embedded in Python 2.7 (windows, IDE: spyder) as shown below. How do I get them to communicate?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import js2py
  
  js = ""
  "
  
  function classCollection() {
    var message = [];
  
    var receiverInput = document.getElementById("Receiver");
    var classificationInput = document.getElementById("Classification");
    var titleInput = document.getElementById("Title");
    var senderInput = document.getElementById("Sender");
    var dateInput = document.getElementById("Date");
  
    var messageBox = document.getElementById("display");
  
    function insert() {
      message.push(receiverInput.value);
      message.push(classificationInput.value);
      message.push(titleInput.value);
      message.push(senderInput.value);
      message.push(dateInput.value);
      clearAndShow();
    }
  
    function clearAndShow() {
      receiverInput.value = "";
      classificationInput.value = "";
      titleInput.value = "";
      senderInput.value = "";
      dateInput.value = "";
  
  
      messageBox.innerHTML = "";
  
      messageBox.innerHTML += "Sent Header " + message + "&lt;br/&gt;";
    }
    document.write(message)
  }
  classCollection()
  
  ""
  ".replace("
  document.write ", "
  return ")
  
  result = js2py.eval_js(js)
  
  print result</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import webbrowser f = open('classInformation.html','w') records = """
  &lt;html&gt;
  
  &lt;body&gt;
    &lt;form&gt;
      &lt;input id="Receiver" type="text" placeholder="Receiver" /&gt;
      &lt;input id="Classification" type="text" placeholder="Classification" /&gt;
      &lt;input id="Title" type="text" placeholder="Title" /&gt;
      &lt;input id="Sender" type="text" placeholder="Sender" /&gt;
      &lt;input id="Date" type="text" placeholder="Date" /&gt;
      &lt;input type="button" value="Save/Show" onclick="insert()" /&gt;
    &lt;/form&gt;
    &lt;div id="display"&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;""" f.write(records) f.close() webbrowser.open_new_tab('classInformation.html')</code></pre>
  </div>
  </div>
  </p>