title: How to send serial output from arduino to textbox with ajax jquery
body: <p>Would anyone happen to know how to receive a usb serial output from a device and send it to an html textbox using jQuery? I understand how to send a command using ajax and jQuery to a serial device, but I cannot figure out how to receive a message sent back from the device? </p>
  
  <p>The following javascript is what I use for sending a message to the device, Arduino, from a button click:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Arduino Serial Connection --&gt;
  &lt;script type='text/javascript'&gt;
  jQuery(function() { 
   jQuery('#contact_form').on('click', '.button',function (e) { 
         e.preventDefault(); //prevents the default of submitting the form 
    jQuery.ajax({ 
        type: "POST",
     url: '/test/SubmitFormWORefresh.php',
     data: "rcmd="+jQuery(this).val(),
        success: function() {
     alert('Enroll Your Finger Now');
            
     }
      });
      return false;
   });
   
  });
   
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here is the SubmitFormWORefresh.php:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
  $verz="1.0";
  $comPort = "/dev/ttyACM0"; /*change to correct com port */
  $PHP_SELF="index.php"; //This php file locate it from root
  
  if (isset($_POST["rcmd"])) {
   $rcmd = $_POST["rcmd"];
   switch ($rcmd) {
        case "Stop":
    $fp =fopen($comPort, "w");
    sleep(2);
      fwrite($fp, 1); /* this is the number that it will write */
      fclose($fp);
      break;
    
      case "Enroll":
    $fp =fopen($comPort, "w");
    sleep(2);
      fwrite($fp, 3); /* this is the number that it will write */
      fclose($fp);
      break;
    default:
     die('Crap, something went wrong. The page just puked.');
   }/*end switch case*/
  }/*end if statemen t*/
  ?&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The following code is from the index.html page that displays the button that javascript manipulates, and also the textbox that I want the output of the serial device to display to. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!----This is the button that I first send a message to the device --&gt;
  &lt;div id="contact_form"&gt;
  &lt;form name="contact" action=""&gt;
     &lt;fieldset&gt;
       &lt;input type="submit" name="rcmd" class="button" id="submit_btn" value="Enroll" /&gt;
         &lt;/fieldset&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;!----This is the textbox I need to send incoming data to--&gt;
  &lt;input type="text" value="" id="table_0_fprint_id" data-key="fprint_id" data-input_type="text" class="editDialogInput  " /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>After I click the button and send a message to the device, the device then sends a message over a serial connection back to the webpage. I need the javascript to input this message into the textbox. I know I will probably need use the GET function, but I cannot get it to work properly.</p>