How to send serial output from arduino to textbox with ajax jquery

Question

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?

The following javascript is what I use for sending a message to the device, Arduino, from a button click:

 <!-- Arduino Serial Connection --> <script type='text/javascript'> 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; }); }); </script> 

And here is the SubmitFormWORefresh.php:

 <?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*/ ?> 

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.

 <!----This is the button that I first send a message to the device --> <div id="contact_form"> <form name="contact" action=""> <fieldset> <input type="submit" name="rcmd" class="button" id="submit_btn" value="Enroll" /> </fieldset> </form> </div> <!----This is the textbox I need to send incoming data to--> <input type="text" value="" id="table_0_fprint_id" data-key="fprint_id" data-input_type="text" class="editDialogInput " /> 

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.

Answer 1

All you need to do is to handle the ajax response. In my example i called it response (argument to the anonymous function bind to success). Code is untested, but should work:

 <!-- Arduino Serial Connection --> <script type='text/javascript'> 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(response) { alert('Enroll Your Finger Now'); $("input#table_0_fprint_id").val($(response).text()); } }); return false; }); }); </script> 

You also have to make sure that /test/SubmitFromWORefresh.php script prints/echo'es a message to be placed in the input on response.