11/06/2016

HTMLTextBoxtoSendTexttoArduinoWebServer|StartingElectronicsBlog

StartingElectronicsBlog
ElectronicsforBeginnersandBeyond

HTMLTextBoxtoSendTextto
ArduinoWebServer
PostedonJune23,2015
AnArduinoandEthernetshieldareusedasawebservertohostawebpagethatcontainsatext
box.TextcanbetypedintothewebpagetextboxusingawebbrowserandsenttotheArduino
byclickingabuttononthewebpage.

Adsby Google

ArduinoWebServer
EthernetShieldArduino
ArduinoLibrary

AnHTMLtextareaisusedinanHTMLformtocreatethetextbox.JavaScriptisusedtosend
thetexttotheArduinousingaHTTPGETrequestwhenthebuttononthewebpageisclicked.
ThisisusefulforanyArduinoprojectthatneedstoreceivetextfromawebpageusingatext
box.
TheArduinocodeforthisprojectfollowstheformatoftheAjaxI/OwebserverfromtheArduino
Ethernetshieldwebservertutorial,exceptthatitcallstheJavaScriptfunctionthatsendsthe
GETrequestwhenthebuttononthewebpageisclickedratherthanperiodicallysendingthe
GETrequesttotheArduinowebserver.
ThevideobelowshowstheArduinowebpagebeingaccessedbyawebbrowserandtextbeing
senttotheArduino.

http://blog.startingelectronics.com/htmltextboxtosendtexttoarduinowebserver/

1/8

11/06/2016

HTMLTextBoxtoSendTexttoArduinoWebServer|StartingElectronicsBlog

Web Page Text Box using textarea on Arduino Ethernet W...

ArduinoHardware,SoftwareandHTMLPageSetup
HA RDWA RE

AnArduinoUnoandArduinoEthernetshieldwith2GBmicroSDcardwereusedtotestthe
project.MostArduinoboardsthatarecompatiblewiththeEthernetshieldshouldwork.
S E TUP

CopytheHTMLfrombelowtoafilecalledindex.htmonthemicroSDcardandinsertitintothe
EthernetshieldmicroSDcardsocket.LoadtheArduinosketchfrombelowtotheArduinofirst
changetheMACandIPaddressinthesketchtosuityourownnetwork.IntheArduinoIDE
SerialMonitorwindow,setthebaudrateatthebottomofthewindowto115200.
RUNNI NG THE P RO JE CT

WiththeArduinoconnectedtotheEthernetnetwork,firstopentheSerialMonitorwindow,then
openawebbrowserandsurftotheIPaddresssetinthesketch.Textcanbetypedintothetext
boxonthewebpageandsenttotheArduino.TheArduinowilldisplaythetextintheSerial
Monitorwindowifthelineoftextisnottoolong(thelengthissetbybufferarraysintheArduino
code).
ArduinoTextBoxSketch
TheArduinotextboxsketchlistingcalledtext_areaisshownbelow.Copyandpasteittothe
ArduinoIDE.
http://blog.startingelectronics.com/htmltextboxtosendtexttoarduinowebserver/

2/8

11/06/2016

HTMLTextBoxtoSendTexttoArduinoWebServer|StartingElectronicsBlog

/*
Program:text_area

Description:ArduinowebserverthatgetstextfromanHTML
textareatextboxonthehostedwebpage.
ThewebpageisstoredonthemicroSDcard.

Date:23June2015

Author:W.A.Smith,http://startingelectronics.org
*/

#include<SPI.h>
#include<Ethernet.h>
#include<SD.h>
//sizeofbufferusedtocaptureHTTPrequests
#defineREQ_BUF_SZ90
//sizeofbufferthatstorestheincomingstring
#defineTXT_BUF_SZ50

//MACaddressfromEthernetshieldstickerunderboard
bytemac[]={0xDE,0xAD,0xBE,0xEF,0xFE,0xED}
IPAddressip(192,168,0,20)//IPaddress,mayneedtochangedependingonnet
EthernetServerserver(80)//createaserveratport80
FilewebFile//thewebpagefileontheSDcard
charHTTP_req[REQ_BUF_SZ]={0}//bufferedHTTPrequeststoredasnullterminated
charreq_index=0//indexintoHTTP_reqbuffer

TextBoxHTMLPage
CopytheHTMLbelowandsaveittoafilecalledindex.htmontheSDcard.

http://blog.startingelectronics.com/htmltextboxtosendtexttoarduinowebserver/

3/8

11/06/2016

HTMLTextBoxtoSendTexttoArduinoWebServer|StartingElectronicsBlog

<script>

strText=""

functionSendText()
{
nocache="&nocache="+Math.random()*1000000
varrequest=newXMLHttpRequest()

strText="&txt="+document.getElementById("txt_form").form_text.value

request.open("GET","ajax_inputs"+strText+nocache,true)
request.send(null)
}
</script>
</head>

<bodyonload="GetArduinoIO()">
<formid="txt_form"name="frmText">
<textareaname="form_text"rows="10"cols="40"></textarea>
</form>
<inputtype="submit"value="SendText"onclick="SendText()"/>
</body>

</html>

HowtheTextBoxSketchWorks
JavaScriptembeddedinthewebpagesendsthetextfromthetextboxtotheArduinoaspartof
aHTTPGETrequestwhenthebuttononthewebpageisclicked.
FO RMAT O F THE S TRI NG

ThisimageshowswhatthestringlookslikebeforeitissenttotheArduino.

HTMLTextBoxandTextString

http://blog.startingelectronics.com/htmltextboxtosendtexttoarduinowebserver/

4/8

11/06/2016

HTMLTextBoxtoSendTexttoArduinoWebServer|StartingElectronicsBlog

Thetextfromthetextboxisputbetween&txt=and&end=endbeforebeingsent.TheArduino
usesthistexttofindthestringintheincomingHTTPGETrequest.
WhenthetextreachestheArduino,ithasbeenalteredwiththespacesinthetextchangedto
%20asshownintheimagebelow.

StringfromtheTextBoxReceivedbyArduino

TheArduinosketchmustchange%20inthetextbacktospaces.
P RO CE S S I NG THE S TRI NG I N THE A RDUI NO S K E TCH

ThefunctionGetText()isusedtogetthetextboxstringfromtheincomingHTTPGETrequest.
TheHTTP_reqarrayholdsthebeginningoftheincomingGETrequestasshownintheabove
imagestartingwithGET/ajax_inputs&txt
TheGetText()functionfirstgetsapointertothebeginningofthetextboxstringbysearchingfor
&txt=andthenterminatingthestringwhenitfinds&end.Aforloopisusedtocopythestringto
thetxtarray(whichisapointertotheglobaltxt_bufarray).Whilethecopyingistakingplace,
thecodelooksforspacesthatareencodedas%20andchangesthemintospaces.
LimitationsoftheArduinoTextBoxSketch
ThesketchislimitedbythesizeofthebufferthatsavestheincomingHTTPGETrequestas
wellasthesizeofthearraythatstoresthestringfromthetextbox.Thesetwoarraybuffers
havebeenkeptsmallsothatthecodewillbeabletorunonanArduinoUno.
IfthestringfromthetextboxistoobigfortheHTTPbufferontheArduinosothatthestringis
truncatedbeforetheterminating&end,thenthetextwillnotbedisplayedintheSerialMonitor
windowbecausetheGetText()functionwillreturnfalse.
ThisisjustasimpledemonstrationthatusesGETtosendtext.Itwouldbebettertosendthe
textusingPOSTinsteadandthiswillbeaddedasatutorialatalaterstage.
http://blog.startingelectronics.com/htmltextboxtosendtexttoarduinowebserver/

5/8

11/06/2016

HTMLTextBoxtoSendTexttoArduinoWebServer|StartingElectronicsBlog

ThisentrywaspostedinArticlesandtaggedArduino,ArduinoEthernet,ArduinoEthernet
shield,HTML,JavaScript,SDcard,textbox,webserverbyStartingElectronics.Bookmark
thepermalink[http://blog.startingelectronics.com/htmltextboxtosendtexttoarduino
webserver/].

13THOUGHTSONHTMLTEXTBOXTOSENDTEXTTOARDUINOWEBSERVER

Leonairo
onJune24,2015at9:34amsaid:

Hi,thanksforthistutorial

StartingElectronics
onJune24,2015at2:00pmsaid:

Pleasure.Thereisasimilartutorialthatyoumayalsobeinterestedin
thatsendstextfromHTMLtextinputs(singleline)toanLCDonthe
Arduino.Ihavepublishedthistoday:
http://startingelectronics.org/tutorials/arduino/webpagetoLCD/

ArduBot
onOctober28,2015at11:10amsaid:

Greattutorial!IrecentlyboughtaWiFishieldandwantedtoknowhowdoes
thecodechangefortheArduinoWiFishield?

HrishikeshKarne
onApril14,2016at10:48amsaid:

Canitbepossibletoimplementsamebyusingesp8266wifimoduleand
arduinoatmega328???

http://blog.startingelectronics.com/htmltextboxtosendtexttoarduinowebserver/

6/8

11/06/2016

HTMLTextBoxtoSendTexttoArduinoWebServer|StartingElectronicsBlog

StartingElectronics
onApril14,2016at2:45pmsaid:

Imsureitmustbepossible,butIdonthaveaESP8266totestitwith.

Jean
onApril24,2016at2:23amsaid:

CanthisbeusedwithArduinoYun?

StartingElectronics
onApril24,2016at4:18pmsaid:

ItshouldworkwiththeYun,butyouwillneedtochangethehardware
initializationfortheYun.

Jean
onApril24,2016at4:23pmsaid:

Doyouhaveanytutorialforthis?Icantseemtogetitworking
andtomountfromSDcard.WhatImtryingtodoissendastring
suchas(12:11:10)toactivateanalarmclock.ButIcantgetit
working.Pleasesomehelp.
jean

StartingElectronics
onApril24,2016at4:26pmsaid:

IdonthaveaYun,socantdevelopthecodeforit.When
IgetenoughdonationsIwillbuyaYunbecauseIhave
beenaskedaboutcodeonaYunseveraltimesbefore.

Jean
onApril24,2016at5:02pmsaid:

Doyouknowmaybeawaytoopenthewebpage
fromdesktopratherthanSDcard?

http://blog.startingelectronics.com/htmltextboxtosendtexttoarduinowebserver/

7/8

11/06/2016

HTMLTextBoxtoSendTexttoArduinoWebServer|StartingElectronicsBlog

StartingElectronics
onApril26,2016at7:17amsaid:

Idontknowwhatyoumeanbydesktop.Arduinos
donthavedesktops.

Tammy
onMay11,2016at7:20amsaid:

Howwouldyousendfromarduinoserialcommtohtmlwebpage?

StartingElectronics
onMay11,2016at8:22amsaid:

Usethesamemethodfordisplayingswitchstatusinawebpage,except
senddatafromtheserialportinsteadofthebuttonstateinformation.I
wouldusethispartofthetutorial:
http://startingelectronics.org/tutorials/arduino/ethernetshieldwebserver
tutorial/SDcardAJAXXMLwebserver/
Andmodifyittosendtheserialportdata.

http://blog.startingelectronics.com/htmltextboxtosendtexttoarduinowebserver/

8/8