How to get value of dropdown list from dynamic array?

Question

I have dynamic table, in that table every row has a dynamic dropdown list. So every dynamic dropdown list have a unique id, I have to pass this id to the onChange function. And from this onChange function I have get the value of selected dropdown list. Please see this question for more info.

ByDefault every job is New Job. If I change the dropdrown list from new Job to close job, then I have to change the status of job new to close job in data base and refresh table, that row will be not in table which change from new to close job, So How I will do using even delegation

I am able to get the id of dropdown list But when I use var value=$('#id').va; It gives undefined. So how to get the value of selected drop down list.

check dynamic table ,

Java Script

<script>
        function fetchData1(){                           
            $(".data-contacts1-js tbody").empty();
               $.get("http://localhost/service/Services.php", function(data) {
               var obj=JSON.parse(data);                   
               for(var i in data){
                 var tr=$("<tr></tr>");
                 tr.append(
                        "<td>" + obj[i].b_id + "</td>" +
                        "<td>" + obj[i].cust_name + "</td>" +                           
                        "<td>" + obj[i].cust_mobile + "</td>" +                           
                        "<td>" + obj[i].cust_email + "</td>");
                         tr.append(
                         "<select  id="+obj[i].b_id+" class='input-small'><option value="+1+">New Job</option><option value="+2+">WIP Job</option><option value="+3+">Close Job</option></select>");
                         $(".data-contacts1-js tbody").append(tr);
                         i++;
               }
            });
        }  

        $(document).ready(function(){
              $(".data-contacts1-js tbody").empty();
              $('.data-contacts1-js').on('change', '.input-small', function(){
                    update(this);
              });
              $('#fetchContacts1').click(function() {
                    fetchData1();
              });
        });
        function update(el){
            $.ajax({
                type:"POST",
                url:"http://localhost/service4homes/updateBooking.php",
                data: { status: $(el).val(), id: $(el).attr('id')},
                success: function(response){

                    alert("success");

                },
                error: function(){
                    alert("fail");
                }
            })
        };
    </script>

HTML Code

<div class="row-fluid">

        <div class="block">
            <div class="navbar navbar-inner block-header">
                <div class="muted pull-left">Carpenter Services</div>
            </div>
            <div class="block-content collapse in">
                <div class="span12">
                     <table class="data-contacts1-js table table-striped" >
                          <thead>
                            <tr>
                                  <th>ID</th>
                                  <th>Customer Name</th>
                                  <th>Customer Mobile</th>
                                  <th>Customer Email</th>                                    
                                  <th>Status</th>
                            </tr>
                          </thead>
                      <tbody>

                      </tbody>
                    </table>                                    
                </div>
                <button id="fetchContacts1" class="btn btn-default" type="submit">Refresh</button>                          
            </div>
        </div>
        <!-- /block -->
    </div>

Server code

 <?php
        header('Access-Control-Allow-Origin: *');//Should work in Cross Domaim ajax Calling request
        mysql_connect("localhost","root","1245");
        mysql_select_db("services");
        $response = array();
        if(isset($_POST['type']))
        {
            $status = $_POST ['status'];              
            $id=$_POST ['id'];  
            $result = mysql_query("UPDATE booking SET sps_id = '$status' WHERE b_id = $id");        
            if($result){
                $response["success"]=1;
                $response["message"]="Product successfully updated.";
                echo json_encode($response);
            } else{
                $response["success"]=0;
                $response["message"]="Product unsuccessfully updated.";
                echo json_encode($response);
            }
        }
        else{
            $response["success"]=0;
            $response["message"]="Required fields is missing.";     
            echo json_encode($response);
        }
    ?>

@neelabhsingh Please take a look at Alexander's answer, that's a correct way. — Teemu
– Teemu, Commented Feb 17, 2015 at 7:35

Oleksandr T. · Accepted Answer · 2015-02-17 07:12:43Z

2

If you use jQuery you don't need use inline events like onChange, you should use event delegation, like so (add this code to .ready., and remove onChange='update(this.id)')

$('.data-contacts1-js').on('change', '.input-small', function () {
    console.log($(this).val());
    console.log($(this).attr('id'));
    update($(this).attr('id'));
});

Example

answered Feb 17, 2015 at 7:12

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

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

1 Comment

Oleksandr T. Over a year ago

@neelabhsingh in update function add $.ajax request and add remove row from DOM. jsbin.com/xixiqo/2/edit?js,console

Angu · Accepted Answer · 2015-02-17 07:23:12Z

1

Use it. i think this is helpful for you

<select  id="select_1" onChange='update(this)' class='input-small'><option value="1">New Job</option><option value="2">WIP Job</option><option value="3">Close Job</option></select>

<select  id="select_2" onChange='update(this)' class='input-small'><option value="4">New Job1</option><option value="5">WIP Job1</option><option value="6">Close Job1</option></select>

Jquery:

function update(t){
 alert(t.value);
    var a=$(t).attr('id');
    alert(a);
}

Click TO Demo

answered Feb 17, 2015 at 7:23

Angu

8722 gold badges13 silver badges34 bronze badges

3 Comments

Oleksandr T. Over a year ago

Why do you use inline events if there is jQuery ?

Angu Over a year ago

You write. but @neelabhsingh used inline events . so i have answered to

Neelabh Singh Over a year ago

@angu, thanks I am getting the answer, there is some modification are required to run your code in my situation, I am using same function as suggest by you=:=> tr.append( "<select id="+obj[i].b_id+" onChange='update(this)' class='input-small'><option value="+1+">New Job</option><option value="+2+">WIP Job</option><option value="+3+">Close Job</option></select>");

Sandeep Patange · Accepted Answer · 2015-02-17 10:27:05Z

Follow this below sample, its working fine for me.

<html>
<head>
<script src="jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){
        $('#numbers').change(function(e) {
            var id = $('#numbers :selected').attr('id') // this return the id of selected dropdown
            var value=$('#'+id).val(); // getting the value based on id
            alert('value: '+ value);
        });
    });

</script>
</head>
<body>

    <form>
        <select id="numbers">
           <option value="1" id="01">One</option>
           <option value="2" id="02">Two</option>
           <option value="3" id="03">Three</option>
        </select>           
    </form>
</body>
</html>

Collectives™ on Stack Overflow

How to get value of dropdown list from dynamic array?

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related