Question

I am connecting this javascript to server code, but I am having trouble selecting the right element. Regardless of what button I select, the video_id always ends up being the first one (in this case “bbc”). How do I change the javascript/jquery to select the right value for video_id depending on the button selected?

    <script type="text/javascript">
   $(document).ready(function() {
       $(".removebutton").submit(function(event){
       event.preventDefault();
            $.ajax({
                 type:"POST",
                 url:"/munch_video/",
                 data: {
                        'video_id': $('#video_id').val(), // from form
                        'playlist': $('.playlist').val(), // from form
                        'add_remove': $('.add_remove').val(), // from form 
                        },
                 success: function(message){                         
                        alert(message);
                        $('.span8').html(message);
                    }
            });
            return false;
       });

    });
</script>


        <form method='post' action = '/munch_video/ ' class = 'removebutton'>{% csrf_token %}
            <input type="hidden" value="Channel" class = "playlist"/>
            <input type="hidden" value="bbc" id = "video_id"/>
            <input type="hidden" value="remove_video" class = "add_remove"/>

            <input type='submit' class="btn btn-danger" value='Remove from plate'/>
        </form>

        <form method='post' action = '/munch_video/ ' class = 'removebutton'>{% csrf_token %}
            <input type="hidden" value="Channel" class = "playlist"/>
            <input type="hidden" value="toyota" id = "video_id"/>
            <input type="hidden" value="remove_video" class = "add_remove"/>

            <input type='submit' class="btn btn-danger" value='Remove from plate'/>
        </form>

        <form method='post' action = '/munch_video/ ' class = 'removebutton'>{% csrf_token %}
            <input type="hidden" value="Channel" class = "playlist"/>
            <input type="hidden" value="gm" id = "video_id"/>
            <input type="hidden" value="remove_video" class = "add_remove"/>

            <input type='submit' class="btn btn-danger" value='Remove from plate'/>
        </form>

        can be multiple buttons, each with a different video_id value

Answer 1

This selector $('#video_id') gives you collection matching the selector but using val() on it always applied to first element. You can pass this as context with selector to get video_id with in descendants of the current form.

Change

$('#video_id').val()

To

$('#video_id', this).val()

or use find() method to search the id in descendants

$(this).find('#video_id').val();

Edit to remove the clicked form in succcess

$(document).ready(function() {
   $(".removebutton").submit(function(event){
   currentForm = $(this);
   event.preventDefault();
        $.ajax({
             type:"POST",
             url:"/munch_video/",
             data: {
                    'video_id': $('#video_id').val(), // from form
                    'playlist': $('.playlist').val(), // from form
                    'add_remove': $('.add_remove').val(), // from form 
                    },
             success: function(message){                         
                    alert(message);
                    $('.span8').html(message);
                    currentForm.remove();
                }
        });
        return false;
   });

});