Question

I have this jQuery code, when i click the first value of the Select it insert to the database, But when i click the second value of the Select, it insert again THE FIRST value of the Select. How can i insert the 2nd value of the select.
the sample link is : http://cocopop12.site11.com/search/index.php

the jQuery code of mine is :

$(function() {
    $(".videoThumbS").click(function() {
        var dataString = $("#v_w_id_value").val();
        $.ajax({ 
            type: 'POST',                                  
            url: 'api.php',
            data: { v_w_id: dataString },
            dataType: 'html',               
            success: function(data)  
            {
            var v_w_id_value = data[0];           //get name
            $('#selected_thumbs').html("yt id:" + v_w_id_value );     //Set output element html
            } 
        });    
    });
});

my forms with foreach value.

<form method="post" action="">
<input id="v_w_id_value" type="hidden" name="v_w_id" value="OIUIUNKLJ" />
<input class="videoThumbS" type="button" name="selectSel" value="Select" id="selectbut" />
</form>

the value in the hidden i just insert it for example but it was loop to diff. value.

then it will insert to the database.

<?php
include ( 'class/conn.php' );
$v_watch_id = $_POST['v_w_id'];
$selected_videos = mysql_query( "INSERT INTO s_vids VALUE('', '$v_watch_id', NOW() )" ) or die ( mysql_error() );
?>

Inserting to the database was working but only the first value that was inserted, so when i click the second or third Select button it doesn’t read the jQuery.
how can i fix it?

Using the firebug on firefox console javascript i can see the different value of select button.

Answer 1

I found your explanation a little confusing, but I think you are saying you have repeated that form and its two input elements several times on the page, and when a particular “Select” button is clicked you want to submit its associated hidden value.

If so, try this minor change to your function:

var dataString = $(this).siblings('input[name="v_w_id"]').val();

Within your click handler this is the clicked element, so $(this).siblings() gets the siblings of the clicked element and using the selector 'input[name="v_w_id"]' gets that particular sibling.

The way you were doing it you were selecting the hidden input with id v_w_id_value, which meant it would always select the same one. The id attribute is supposed to be unique, that is, no two elements should have the same id – if you break this rule the browser usually displays the page OK anyway, but your JS won’t work properly: for most browsers selecting by the duplicated id will return the first element with that id.