Use jQuery event handler instead of the HTML onchange attribute

The `#note_photo` form element is the only instance in the application
that used the attribute.

1 files changed, 5 insertions, 6 deletions

diff --git a/views/new-post.php b/views/new-post.php
index 2376431..3ff8951 100644
--- a/views/new-post.php
+++ b/views/new-post.php
@@ -26,7 +26,7 @@
 
         <div class="form-group">
           <label for="note_photo"><code>photo</code></label>
-          <input type="file" name="note_photo" id="note_photo" accept="image/*" onchange="previewPhoto(event)">
+          <input type="file" name="note_photo" id="note_photo" accept="image/*">
           <br>
           <div id="photo_preview_container">
             <img src="" id="photo_preview" style="max-width: 300px; max-height: 300px;">
@@ -135,16 +135,15 @@
 </style>
 
 <script>
-function previewPhoto(event) {
-  $("#photo_preview_container").show();
-  $("#photo_preview").attr("src", URL.createObjectURL(event.target.files[0]) );
-}
-
 $(function(){
 
   var userHasSetCategory = false;
 
   $("#photo_preview_container").hide();
+  $("#note_photo").on("change", function(e){
+    $("#photo_preview_container").show();
+    $("#photo_preview").attr("src", URL.createObjectURL(e.target.files[0]) );
+  });
   $("#remove_photo").on("click", function(){
     $("#note_photo").val("");
     $("#photo_preview").attr("src", "" );