I'm now working on a rating system. I'm trying to implement this system using the select tag. So, when the user select any rate they get redirected to other route. Now, I'm dynamically create the html page. And there multiple books'IDs have the same class (which is ). My code now redirect me to the other route but the value of "book_name" which supposed to be the id of the book that the user rated it's undefined

    <div >
      <!--render the books in within cards-->
      {% for book in books %}
        <div >

            <div style="background-color:#6e6b64" >
               {% if book.volumeInfo.imageLinks.smallThumbnail %}

                 <img src="{{book.volumeInfo.imageLinks.smallThumbnail}}">
               {% endif %}

               <div  >
               <h5 style="color:red" >{{book.volumeInfo.title}}</h5>
               <p style="color:blue" >{{book.volumeInfo.authors}}</p>
               <form style="margin-bottom:5px" action="/addcomment" method="get">
                  <!--<input name="book" type ="hidden"  id="book_id"  value="{{book.id}}" type="text">-->
                  <a href="{{book.volumeInfo.infoLink}}" >More Info</a>
                  <button type="submit" >add comment</button>

                 <link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet"/>
                 <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.2/themes/fontawesome-stars-o.css" rel="stylesheet"/>
                  <!--get the user rate-->
                 <label >
                  Give your rate
                  <select  style="width:200px;" id="example">
                   <option value="1">1</option>
                   <option  value="2">2</option> <option value="3">3</option>
                   <option value="4">4</option>
                   <option value="5">5</option>
                 </select>
                  <input name="book" type ="hidden"  id="book_id"  value="{{book.id}}" type="text">
                </label>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
                </script>
                <script>

                 jQuery(function(){
                  jQuery('[id=example]').on('change', function (event) {
                      let book_name =event.target.nextSibling.value;
                    //  let book_name =event.target.closest('.book_id').value;
                    //  name = book_name.closest('.book_id').value
                     console.log(book_name);
                     var rating  = $(this).val(); // get selected value
                     if (rating ) {
                         window.location = "/rate/" book_name "/"  rating;

                              }
                     return false;

                               });
                            });
               </script>
              </form>
                </div>
             </div>
           </div>
           {% endfor %}
       </div>
   </div>

CodePudding user response：

All id's on the page should be unique. Currently you're having the same id value for each select and input elements. Lose these ids.

Instead the give the elements a class with a meaningful name. Like book-rating for the select and book-id for the hidden input.

<select >
  <option value="1">1</option>
  <option value="2">2</option> 
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
<input name="book" type="hidden"  value="{{book.id}}" type="text">

Modify the JS by selecting all select elements with the class .book-rating and listen for the change event.

jQuery(function ($) {
  $(".book-rating").on("change", function (event) {
    const $target = $(event.target);
    const rating = $target.val(); // value of select.
    const bookId = $target.next().val(); // value of input.
    
    if (rating && bookId) {
      window.location = `/rate/${bookId}/${rating}`;
    }
  });
});