Disable "Add Note" button when there is no text

diff --git a/app/assets/javascripts/index/notes.js.erb b/app/assets/javascripts/index/notes.js.erb
index 3c6703bfa7824e3db945708a338fb1dca0541091..9f8eb2f545387608591bf39041fc12deaf55ae99 100644 (file)
--- a/app/assets/javascripts/index/notes.js.erb
+++ b/app/assets/javascripts/index/notes.js.erb
@@ -225,6 +225,16 @@ $(document).ready(function () {
 
     var popupContent = $(JST["templates/notes/new"]({ create_url: $(e.target).attr("href") }));
 
 
     var popupContent = $(JST["templates/notes/new"]({ create_url: $(e.target).attr("href") }));
 

+    popupContent.find("textarea").on("input", function (e) {
+      var form = e.target.form;
+
+      if ($(e.target).val() == "") {
+        $(form.add).prop("disabled", true);
+      } else {
+        $(form.add).prop("disabled", false);
+      }
+    });
+

     popupContent.find("input[type=submit]").on("click", function (e) {
       e.preventDefault();
       createNote(marker, e.target.form, $(e.target).data("url"));
     popupContent.find("input[type=submit]").on("click", function (e) {
       e.preventDefault();
       createNote(marker, e.target.form, $(e.target).data("url"));

diff --git a/app/assets/javascripts/templates/notes/new.jst.ejs b/app/assets/javascripts/templates/notes/new.jst.ejs
index 0b074ec3b8d5870141ecaa75bd29b3310353dfee..2f12227fd23f9e04b6c0ef9ae853bcf88f250c4c 100644 (file)
--- a/app/assets/javascripts/templates/notes/new.jst.ejs
+++ b/app/assets/javascripts/templates/notes/new.jst.ejs
@@ -6,7 +6,7 @@
     <textarea class="comment" name="text" cols="40" rows="10"></textarea>
     <br/>
     <div class="buttons">
     <textarea class="comment" name="text" cols="40" rows="10"></textarea>
     <br/>
     <div class="buttons">

-      <input type="submit" name="add" value="<%- I18n.t('javascripts.notes.new.add') %>" data-url="<%- create_url %>">
+      <input type="submit" name="add" value="<%- I18n.t('javascripts.notes.new.add') %>" data-url="<%- create_url %>" disabled="1">

     </div>
   </form>
 </div>
     </div>
   </form>
 </div>