Found elements with non-unique id

问题

I have 3 posts on homepage and each have a comment form, I am using one form for all posts. I am using jQuery to disabled submit button if there are no text in input and also enable submit button if there is text in input. The problem is that each post submit button have same ID, how do i make button a unique id for each post ID?

 <span class="md-form">
  <form enctype="multipart/form-data" class="feeds-form form-inline md-form form-sm" method="POST" action="{% url 'site:home' %}">

  {% csrf_token %}

  <input type="hidden" value={{post.id}} name="post_comment">

  <textarea name="comment_post" class="textinput textInput" placeholder="Add a comment..." required="" id="id_comment_post{{ post.id }}" onkeyup="if(this.textLength != 0) {submit.disabled = false} else {submit.disabled = true}"></textarea>

  <button type="submit" id="submit" disabled><i class="fas fa-paper-plane" aria-hidden="true"></i></button>
  </form>

  <style>
 .feed-form .fa-paper-plane{color:grey;}
 .feed-form .fa-paper-plane:hover{color:blue;}
 .feed-form #submit[disabled]{opacity:0.5;}
  </style>

回答1:

you can try following code:

<button type="submit" id="submit-{{post.id}}" class="submit" disabled><i class="fas fa-paper-plane" aria-hidden="true"></i></button>

and in css

.feed-form .submit[disabled]{opacity:0.5;}

Updated code:

<span class="md-form">
  <form enctype="multipart/form-data" class="feeds-form form-inline md-form form-sm" method="POST" action="{% url 'site:home' %}">

 <input type="hidden" value={{post.id}} name="post_comment">

  <textarea name="comment_post" class="textinput textInput" placeholder="Add a comment..." required="" id="id_comment_post{{ post.id }}" onkeyup=""></textarea>

  <button type="submit" id="submit1" class="submit" disabled>button</button>
  </form>
  </span>

jquery:

$(document).on("keydown",".textinput",function(){
    let buttons = $(this).closest("form").find(".submit")
  if($(this).val() == "") {
  buttons.attr("disabled",true);

  }
  else{
    buttons.attr("disabled",false);
  }
});

来源：https://stackoverflow.com/questions/61729241/found-elements-with-non-unique-id

标签

python

jquery

django