CODEWITHSUNDEEP
javascriptjqueryruby-on-rails-3forms
user2158382
user2158382

Reputation: 4510

Rails and jQuery: How to select input from a specific form

I have a rails app with a job model, and on the index page, each job has a form. I need to be able to access the specific form everytime the submit button is selected, so I can take the input for the form and perform some jQuery validation with it.

Here is some of my index.html page.

<ul>
  <% @unassigned.each do |job| %>
    <li>
            <div class="row new-message">
              <div class="small-12 columns">
                  <%= form_for @message do |f| %>
                    <%= f.text_area :body, {placeholder: 'enter a new message...'} %>
                    <%= f.hidden_field :job_id, value: job.id %>
                    <%= f.submit 'send message', class: 'button small radius secondary message-button', "data-job-id" => job.id %>
                    <div id="message<%= i %>-validation-errors"> </div>
                  <% end %>
              </div>
            </div>
    <li>
  <% end %>
<ul>

And here is the javascript/jQuery where I try to select the input from a specific form

var messages;

messages = function() {

    $('.message-button').click(function(e) {
        var id = $(this).data('job-id');
        messageValidation(e, id);
    });

    function messageValidation(e, id) {
        var body = $('#message_body').val();
        var div = '#message' + id + '-validation-errors';
    if(body == "") {
      $(div).html('');
      e.preventDefault();
      $(div).html('<small style="color:red"> Message body empty </small>');
    }
    };

};

$(document).ready(messages);

The index page will have a form for each job, and I want there to be front end validation that checks when the button is submitted, that the body field is not empty. It works fine the first time, but after going back to the index page, and trying to validate a second time var body = $('#message_body').val(); always seems to be empty, whether I put anything in the body or not. I believe it has something to do with the fact that since there is the same form for each job, there are multiple #message_body id's on the same page, and it is selecting the incorrect one. I am new to jQuery and javascript can someone please help me

Upvotes: 0

Views: 1414

Answers (2)

user2158382
user2158382

Reputation: 4510

To solve this problem I needed to select the child of the form and find the message_body through that.

messages = function() {

    $('.new_message').submit(function(e) {
        //var id = $(this).data('job-id');
        var $this = $(this);
        var body = $this.children('#message_body').val();
        var id = $this.children('#message_job_id').val();
        messageValidation(e, body, id);
    });

    function messageValidation(e, body, id) {
        var div = '#message' + id + '-validation-errors';
    if(body == "") {
      $(div).html('');
      e.preventDefault();
      $(div).html('<small style="color:red"> Message body empty </small>');
    }
    };

};

Upvotes: 0

itz2k13
itz2k13

Reputation: 159

You cannot have multiple elements with same id on a page. What you can do is add a class identifier to those elements.

In your case, simple set class="message_body" to your elements and select them as shown below:

$('.message-button').click(function(e) {
    var id = $(this).data('job-id');
    var body = $(this).parent().find('.message_body').val();
    messageValidation(e, body, id);
});

Upvotes: 1

Related Questions