[mootools] class display form inputs value

+Jason · 07-28-2008, 06:53 PM

Hello JavaSpecialists,

Need to write class for [form] using [mootools]

form has (input.text, select, texarea, checkbox)
after i write in input text (some text) next to this input should appear <div> with animation (alpha 0-100%) with message "this field was changed to ...."
after 3 seconds <div> with message should disappear

Need help in writing this class or guidelines how to do that

What i have

html code below
mootools library
i know the parts of [mootools] framework that should be used
don't know how put it all together

Is there any [mootools] specialist?

Best regards!
+Jason

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Class that display form value</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="mootools-1-2.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
  <div id="form">
    <form action="" method="get" name="myform">
      <fieldset>
      <legend>My Form</legend>
      <div class="fieldbox">
        <input class="padding" name="text" type="text" />
      </div>
      <div class="fieldbox">
        <select name="select">
          <option value="option1">option1</option>
          <option value="option2">option2</option>
          <option value="option3">option3</option>
        </select>
      </div>
      <div class="fieldbox">
        <textarea name="message" cols="50" rows="5"></textarea>
      </div>
      <div class="fieldbox">
        <input class="padding" name="check" type="checkbox" value="" />
      </div>
      </fieldset>
	  <input name="submit" value="submit" type="button" />
    </form>
  </div>
</div>
</body>
</html>