jquery bind input change

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>jQuery bind to an input change event</h1>
    <p>
      Write an url. By hitting [enter] you will be redirected to that site
    </p>
    http://<input type="text" id="foo" />
  </body>

</html>

$(document).ready(function () {
  $('#foo').bind('change', function () {
    window.location = 'http://' + $(this).val();
  });
})

# Things to highlight

## DOM ready

The first thing to note is that because we are binding an event to a DOM
element, we need to put our script at the end of the markup or initialize our
script when the DOM is ready.

That is what jQuery `.ready()` does

```js
$(document).ready(function () {
  ...
});
```

## jQuery val()

The `.val()` function is a setter and getter of the content of a form element,
so allows to capture and rewrite the user input

## DOM element change events

Change events are only applied to `<input>`, `<textarea>` and `<select>`
elements.

This event is only fired when the user commits a change. This means that a
`enter` or `tab` must be pressed in order to fire the event

Reference: [mdn change event][1]

## Security holes

The example shows a **sink** (security hole) with a **source** provided by the
user so **beware of this redirections in production environments**

[1]: https://developer.mozilla.org/en-US/docs/Web/Reference/Events/change