Form validation in word game

I have started writing a word game in PHP that displays a number of text boxes equal to the number of letters in a mystery word. As the user types in a letter in the box the entry is checked against the hidden word and if correct the box should turn green. I have written the following code so far which draws the boxes but I am stumped on how to check the input into a box. I do not want to send the form back every time a letter is entered so I need to use client side coding – I am guessing that JavaScript would be the answer hence posting in this forum not PHP.

Code so far:
<?php
// Get word from dictionary
$newword = “nuisance”;
$definition = “an annoying person or thing”;
?>
<div class=”jumbotron”>
<h1>SpellBound</h2>
<p>Below you will see a definition of one of the words in the dictionary. See if you can spell the word by typing the letters in the empty boxes below</p>
</div>

<div class=”panel panel-info”>
<div class=”panel-heading”>How do you spell the word that means</div>
<div class=”panel-body”><?php echo $definition;?></div>
</div>

<?php
$wordlen = strlen($newword);

<form>
<?php for ($i = 1; $i <= $wordlen; $i++) {
echo ‘<input type=”text” size=”1″ maxlength=”1″ id=”letter-‘ . $i . ‘” >’;
}
?>
</form>

Any suggestions ?

Also in #JavaScript _↴