

JQuery magicpreview plug-in - bdfh42
http://rikrikrik.com/jquery/magicpreview/

======
jrnkntl
Plugin, plugin, huge word for some code that can be accomplished by this

using the plugin: $('form.example input:text').magicpreview('mp_');

without: $('form.example input:text').change(function() {
$("mp_"+this).html(this.val()); });

or something like that =)

~~~
riklomas
Hi, I'm the author of the plug-in, I actually hang around here quite often
actually but I didn't realise my plug-in had been submitted until now.

The reason I made this plug-in was because I was doing what you were doing in
your without-plugin example, but the form got more complex and suddenly the
original code wasn't working as well. So I decided to make the plug-in to not
only help me out but I figured that other people might be having the same
problem too. However, if I was doing something quick and simple, I would do
something akin to your without-plugin example.

------
adamc
This plugin is vulnerable to XSS -- try entering
<script>alert('boom');</script> in the input field of the example.

~~~
riklomas
You can use the options to set the output as text() rather than html(), e.g.
$('div').magicpreview('mp_', { 'change': 'text' });

But yes, I should really add a flag to strip out any script elements :)

~~~
technoguyrob
XSS detection is not just as simple as that. For example, in IE, entering the
following produces a pop-up:

    
    
       <table style="background-image:url(javascript:alert(1))"><tr><td>Hi</td></tr></table>
    

However, read debt's comment below. XSS is irrelevant here since "XSS" means
cross-site scripting, i.e., ,managing to embed Javascript into pages someone
ELSE sees. Only the client sees this, it doesn't get reproduced for anyone
else.

------
thomasmallen
Awesome. I'm doing a redesign/rebuild right now and I was about to write this
myself to create this effect for the Contact form (I first saw it on ALA years
back in the discussion area).

------
davidmathers
see also chain.js: <http://github.com/raid-ox/chain.js/wikis>

