diff --git a/resources/cards/creator.vm b/resources/cards/creator.vm
index c00383e..7467e4f 100644
--- a/resources/cards/creator.vm
+++ b/resources/cards/creator.vm
@@ -3,6 +3,8 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 <script src="creator.js"></script>
 
+#macro(update_preview)onkeyup="this.form.submit()" onchange="this.form.submit()"#end
+
 <title>Card Creator</title>
 
 <a href="../" style="opacity:0.6;">Return to cardlist</a>
@@ -14,64 +16,64 @@
     <ul>
         <li>
             Title:<br>
-            <input type="text" name="title" value="$escape_html($card.title)" onchange="this.form.submit()">
+            <input type="text" name="title" value="$escape_html($card.title)" #update_preview()>
         </li>
         <li>
             Figure:<br>
-            <input type="text" name="figure" value="$escape_html($card.figure)"onchange="this.form.submit()"><br>
+            <input type="text" name="figure" value="$escape_html($card.figure)" #update_preview()><br>
             
             Source:
             #if($card.figure_source=="material-icons")
-                <input checked type="radio" name="figure_source" value="material-icons" onchange="this.form.submit()">
+                <input checked type="radio" name="figure_source" value="material-icons" #update_preview()>
             #else
-                <input type="radio" name="figure_source" value="material-icons" onchange="this.form.submit()">
+                <input type="radio" name="figure_source" value="material-icons" #update_preview()>
             #end
             <a href="https://material.io/icons/">material-icons</a>
             
             #if($card.figure_source=="mdi")
-                <input checked type="radio" name="figure_source" value="mdi" onchange="this.form.submit()">
+                <input checked type="radio" name="figure_source" value="mdi" #update_preview()>
             #else
-                <input type="radio" name="figure_source" value="mdi" onchange="this.form.submit()">
+                <input type="radio" name="figure_source" value="mdi" #update_preview()>
             #end
             <a href="https://materialdesignicons.com/">mdi</a>
             
             #if($card.figure_source=="fa")
-                <input checked type="radio" name="figure_source" value="fa" onchange="this.form.submit()">
+                <input checked type="radio" name="figure_source" value="fa" #update_preview()>
             #else
-                <input type="radio" name="figure_source" value="fa" onchange="this.form.submit()">
+                <input type="radio" name="figure_source" value="fa" #update_preview()>
             #end
             <a href="http://fontawesome.io/icons/">fa</a>
             
             #if($card.figure_source=="svg")
-                <input checked type="radio" name="figure_source" value="svg" onchange="this.form.submit()">
+                <input checked type="radio" name="figure_source" value="svg" #update_preview()>
             #else
-                <input type="radio" name="figure_source" value="svg" onchange="this.form.submit()">
+                <input type="radio" name="figure_source" value="svg" #update_preview()>
             #end
             <a href="svg">svg</a>
         </li>
         <li>
             Description:<br>
-            <textarea name="description" rows="5" onchange="this.form.submit()">$escape_html($card.description, False)</textarea>
+            <textarea name="description" rows="5" #update_preview()>$escape_html($card.description, False)</textarea>
         </li>
         <li>
             Steps:<br>
-            <textarea name="steps" rows="5" onchange="this.form.submit()">$escape_html($card.steps, False)</textarea>
+            <textarea name="steps" rows="5" #update_preview()>$escape_html($card.steps, False)</textarea>
         </li>
         <li>
             Effects:<br>
-            <textarea name="effects" rows="5" onchange="this.form.submit()">$escape_html($card.effects, False)</textarea>
+            <textarea name="effects" rows="5" #update_preview()>$escape_html($card.effects, False)</textarea>
         </li>
         <li>
             Flags/Properties:<br>
-            <textarea name="flags" rows="5" onchange="this.form.submit()">$escape_html($card.flags, False)</textarea>
+            <textarea name="flags" rows="5" #update_preview()>$escape_html($card.flags, False)</textarea>
         </li>
         <li>
             Cost:<br>
-            <input type="text" name="cost" value="$escape_html($card.cost)" onchange="this.form.submit()">
+            <input type="text" name="cost" value="$escape_html($card.cost)" #update_preview()>
         </li>
         <li>
             Power<br>
-            <input type="text" name="power" value="$escape_html($card.power)" onchange="this.form.submit()">
+            <input type="text" name="power" value="$escape_html($card.power)" #update_preview()>
         </li>
         <li>
             Notes:<span style="opacity:0.4;">(Not shown)</span><br>
@@ -79,8 +81,8 @@
         </li>
         <li>
             Worth: CP or Gold<span style="opacity:0.4;">(GP)</span>:<br>
-            <input type="text" name="cp" value="$escape_html($card.cp)" placeholder="CP" onchange="this.form.submit()">
-            <input type="text" name="gp" value="$escape_html($card.gp)" placeholder="gold" onchange="this.form.submit()">
+            <input type="text" name="cp" value="$escape_html($card.cp)" placeholder="CP" #update_preview()>
+            <input type="text" name="gp" value="$escape_html($card.gp)" placeholder="gold" #update_preview()>
         </li>
         <li>
             <br>