title: Calling a JS function with HTML form data
body: <p>I'm having trouble getting a javascript function to run on the data from  an html form.
  I have this form in HTML:</p>
  
  <pre><code>&lt;form id = "form1" onSubmit="getFormObj('form1')"&gt;
  First name: &lt;input type="text" name="FirstName" value="First"&gt;&lt;br&gt;
  Last name: &lt;input type="text" name="LastName" value="Last"&gt;&lt;br&gt;
  Email: &lt;input type="text" name="email" value="johndoe@email.com"&gt;&lt;br&gt;
  Phone Number: &lt;input type="text" name="phonenumber" value="Phone Number"&gt;&lt;br&gt;
  &lt;input id="button1" type="submit" value="Create Patient"&gt;
  &lt;/form&gt;
  &lt;script type="text/javascript"&gt;
  document.write(PatientLabel);
  &lt;/script&gt;
  </code></pre>
  
  <p>The submit button is hooked up to a JavaScript function in JQuery:</p>
  
  <pre><code>$('#button1').click(function() {
      createpatient(this);
  });
  </code></pre>
  
  <p>The Javascript function I'm trying to run stores the form data to an object and then sets PatientLabel to one of the object's values:</p>
  
  <pre><code>var patientdata = {};
  var PatientLabel = "";
  
  function createpatient(formId) {
  //Turn form data into array data.
      var inputs = $('#'+formId).serializeArray();
      $.each(inputs, function (i, input) {
          patientdata[input.name] = input.value;
      });
  
  //If we got this far, print an example
      patientLabel = patientdata["FirstName"];
  }
  </code></pre>
  
  <p>However, when I run this code, the HTML Script that's supposed to print patientLabel doesn't show anything! Where did I go wrong?</p>