disable submit button until all form inputs have a value in Rails

Question

I would like to disable the form submit button until all inputs have a value in them. My view has these inputs:

  <%= form_for @item, html: { enctype: "multipart/form-data", id: "upload-data" } do |f| %>
   <%= f.text_field :name %>
  <% end %>

I then run this validate() function with every keyup event:

$(document).ready(function() {
  validate();
  $('input').on('keyup', validate);
});

function validate() {
  var input = $('input');
  var isValid = false;
  $.each(input, function(k, v) {
    if (v.type != "submit") {
      isValid = (k == 0) ?
        v.value ? true : false : isValid && v.value ? true : false;
    }
    if (isValid) {
      $("input[type=submit]").prop("disabled", false);
    } else {
      $("input[type=submit]").prop("disabled", true);
    }
  });
}

Though the same code works here it does not work in my Rails view. It stays disabled. What am I overlooking?

maybe because of turbolinks in rails you just can't just copy paste the javascript you need to adapt it into turbolinks script and syntax try this $(document).on('ready turbolinks:load', function() {}); instead $(document).ready(function() {}); — buncis
– buncis, Commented Sep 11, 2021 at 11:33
could u add more detail like where did you put the javascript, and the html page source? — buncis
– buncis, Commented Sep 12, 2021 at 5:01
the javascript is in the old app/assets/javascript directory for Rails 5.2.4, and the page source is in app/views/items/new — calyxofheld
– calyxofheld, Commented Sep 13, 2021 at 4:12
Why not just use HTML5 validations? developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation — max
– max, Commented Sep 14, 2021 at 18:09

buncis · Accepted Answer · 2021-09-11 11:37:14Z

1

maybe because turbolinks, in rails you can't just copy paste the javascript you need to adapt it into turbolinks script and syntax

you could try to change your script from

$(document).ready(function() {

});

into

$(document).on('ready turbolinks:load', function() {

})

answered Sep 11, 2021 at 11:37

buncis

2,6121 gold badge27 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

calyxofheld Over a year ago

still no go. any idea how i could troubleshoot this?

buncis Over a year ago

did the script loaded? you can try it by putting console.log("loaded") inside the bracket

calyxofheld Over a year ago

the script is definitely loading, the problem is that it fires once when the page loads, and then never fires again

Collectives™ on Stack Overflow

disable submit button until all form inputs have a value in Rails

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related