How do I select the right element using javascript?

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

I changed the video_id to class instead of id in my code now. — sharataka
– sharataka, Commented Dec 5, 2012 at 4:34

Ravi Y · Accepted Answer · 2012-12-05 04:23:13Z

2

The problem is because you have multiple elements with the same id. Hence the same element being picked.

Since you are working on the remove button clicks, you can do a find within like

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

answered Dec 5, 2012 at 4:23

Ravi Y

4,3662 gold badges31 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adil · Accepted Answer · 2012-12-05 04:41:48Z

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;
   });

});

edited Dec 5, 2012 at 4:41

answered Dec 5, 2012 at 4:22

Adil

148k25 gold badges217 silver badges207 bronze badges

4 Comments

sharataka Over a year ago

Great, this worked...thanks! Another question: do you know how I would then remove the element that was selected on success. Since the form is wrapped in div class = "span8" and because message returns the value of the video_id back again, I tried $('.span8').removeClass(message)...but it doesn't seem to work.

Adil Over a year ago

You assigned the received response to .span8 now what element you want to remove from it?

sharataka Over a year ago

The selected button. If I selected the "gm" button for example, I would like to remove that form/button.

sharataka Over a year ago

I don't think I did a good job of explaining my question. stackoverflow.com/questions/13716545/…

Collectives™ on Stack Overflow

How do I select the right element using javascript?

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related