Why my <script> doesn't enable/disable the specific submit-button?

Question

I'm working with Laravel 5 and I've the following HTML pages:

HTML 1

<div class="row">    
    @foreach($postList as $post)
        @include('Pages.Post.postInGroup', ['post'=>$post, 'commentsList'=>$commentsList])
    @endforeach
</div>

HTML 2

<form id="msform" action="{{route('comments.store')}}" method="post">
    {{ csrf_field() }}
    <div class="row align-items-center">   
        <div class="col-3 col-sm-3 col-md-2 col-lg-2 col-xl-1" style="display: inline-block;">
            <img src="{{url(Auth::user()->picture_path)}}" style="border-radius: 50%;" width="30" height="30" alt="User Picture">
        </div>
        <div class="col-9 col-sm-9 col-md-6 col-lg-6 col-xl-9" style="display: inline-block;">
            <textarea class="form-control" placeholder="Post a comment" id="comment_content {{$post->id}}" name="comment_content" rows="1"></textarea>
        </div>
        <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1" >
            <input type="submit" name="comment_button {{$post->id}}" class="btn btn-primary" value="Comment" style="background-color: #228B22;"/>
            <input type="hidden" value="{{$post->id}}" name="postId" id="postId">
            <input type="hidden" value="{{$theGroup->id}}" name="groupId" id="groupId">
        </div>
    </div>
</form>

<script src="{{ url('js/jquery-3.3.1.min.js') }}"></script>

<script>
    $(document).ready(function() {
        $('#msform > div > div > input[name=comment_button {{$post->id}}]').prop('disabled', true);

        //while user is typing disable and enable based on the value.
        $('#msform > div textarea').on("input", function() {
            $(this).parents('.row').find('input[name=comment_button {{$post->id}}]').prop('disabled', $(this).val() == '');
        });
    });
</script>

The HTML 1 code explains how the HTML 2 code is repeated based on the number of objects in $postList. What I'm trying to do is disable the button corresponding to the textarea, as long as its textarea is empty, but I do not get the desired result, because when I fill in any textarea, all the buttons are re-abilitated, and that's not what I want. For reasons of data extrapolation, I cannot change the name of the textarea and I would like this script works only on the submit button in HTML 2.

To explain better my problem, I'll made an example:

I have cycled 3 times HTML 2 by HTML 1, so I'll have:

Textarea(id="comment_content 1") - Button (name="comment_button 1")
Textarea(id="comment_content 2") - Button (name="comment_button 2")
Textarea(id="comment_content 3") - Button (name="comment_button 3")

If I want to write in the 2nd textarea with id comment_content 2, then I will have to enable only the button adjacent to that textarea, comment_button 2. I hope my problem is clear.

sam · Accepted Answer · 2018-05-05 19:16:15Z

You're including the same external script and same inline script multiple times, as many times as there are posts. This is inefficient, you should include the external Javascript only once per page.

You can refactor this code to address your bug by creating a listener that listens to all textareas and then uses a data attribute on the textarea to determine which button should have a state change.

Step 1: Add the post ID to the textarea in a data attribute

<textarea data-post="{{ $post->id }}" 
  class="form-control" 
  placeholder="Post a comment" 
  id="comment_content {{$post->id}}" 
  name="comment_content" rows="1"></textarea>

Step 2: Add the post ID to the button in a data attribute

<input data-post="{{ $post->id }}" 
  type="submit" 
  name="comment_button {{$post->id}}" 
  class="btn btn-primary" 
  value="Comment" 
  style="background-color: #228B22;"/>

Step 3: Refactor your Javascript to use the data-post value when determining what the user is interacting with, e.g:

$(document).ready(function() {
    $('#msform > textarea[data-post]').on("input", function() {
        var id = $(this).data('post');
        $('input[data-post="' + id + '"]').prop('disabled', $(this).val() == '');
    });
});

Here's an example of how it'll work, click "Run code snippet" to see it in action.

$(document).ready(function() {
    $('textarea[data-post]').on("input", function() {
        var id = $(this).data('post');
        $('input[data-post="' + id + '"]').prop('disabled', $(this).val() == '');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <textarea data-post="1"></textarea>
  <input data-post="1" type="submit" disabled="true"/>
</div>
<div>
  <textarea data-post="2"></textarea>
  <input data-post="2" type="submit" disabled="true"/>
</div>
<div>
  <textarea data-post="3"></textarea>
  <input data-post="3" type="submit" disabled="true"/>
</div>

Collectives™ on Stack Overflow

Why my <script> doesn't enable/disable the specific submit-button?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related