CODEWITHSUNDEEP
javascriptphpjquery
Tayyab Vohra
Tayyab Vohra

Reputation: 137

jQuery Select Value From Dropdown Not Working

I am trying to get the value from dropdown but I am getting the value of only 1st dropdown. There are multiple records which are coming from the database along with each record there is a drop-down menu in which status of the product is mentioned.

I am getting the value of only 1st-row dropdown. Here is my code:

jQuery code

$(".myBtn").click(function(){  
    var id=$(this).attr("atr");  
    var text = $(".hotel[myid='tayyab']").val();

    alert(text);

    $.ajax({
        type: "POST",
        url: 'updatestatus.php',
        data: {id:id,status:text},
        success: function(data){
            $("#results").html(data);
        }
    });
});

This is my PHP code

<?php if(isset($_POST['search'])){
    $con=mysql_connect("localhost","root","");
    $db=mysql_select_db("eshop");
    $id=$_POST['pid'];
    $query=mysql_query("SELECT * FROM userorder WHERE id LIKE '$id%'");

    while($res=mysql_fetch_array($query)){
        $id=$res["id"];
    ?>

    <table class="table table-condensed">
        <thead>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Email</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><?php echo $res["id"];?></td>
                <td><?php echo $res["name"];?></td>
                <td><?php echo $res["productname"];?></td>
                <td>
                    <select class="hotel" myid="tayyab" name="ostatus">
                        <option value="cancel">Cancel</option>
                        <option value="underp">underp</option>
                        <option value="deliver">deliver</option>
                    </select>
                    <button atr="<?php echo $id; ?>" class="myBtn">Change Status</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Upvotes: 1

Views: 1620

Answers (2)

red9350
red9350

Reputation: 368

You can give a unique myid to every dropdown based on the id, like so:

<select class="hotel" myid="tayyab_<?php echo $id; ?>" name="ostatus">
  <option value="cancel">Cancel</option>
  <option value="underp">underp</option>
  <option value="deliver">deliver</option>
</select>

Then in jQuery:

$(".myBtn").click(function(){

    var id=$(this).attr("atr");  

    var myId = "tayyab_"+id;
    var text = $(".hotel[myid='" + myId + "']").val();

    alert(text);

    $.ajax({
        type: "POST",
        url: 'updatestatus.php',
        data: {id:id,status:text},
        success: function(data){
            $("#results").html(data);
        }
    }); 
});

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074028

I am getting the value of only 1st-row dropdown.

Because that's what

var text = $(".hotel[myid='tayyab']").val();

says to do. You're doing a global search for .hotel[myid='tayyab'] and then using val to get the value of the first match.

Instead, you want to find the tr containing the specific button that was pressed, and then search for .hotel[myid='tayyab'] within that tr:

var text = $(this).closest("tr").find(".hotel[myid='tayyab']").val();

Side note: Custom attributes should always start with a data- prefix, e.g. data-myid, notmyid.

Upvotes: 2

Related Questions