CODEWITHSUNDEEP
javascriptjqueryajax
choooper2006
choooper2006

Reputation: 63

Get selected value from dynamic dropdown in table

I have a button that adds a row to a table so that data can be inserted. One of the <td> tags populates a dropdown menu. I need to get the value from that dropdown to post in an ajax call back to a php page to insert the data in the database. Everything I've tried has returned undefined for position_ID.

I'm getting a 500 Error on the POST and I think it's due to var position_ID = $(this).parents('tr').find('.positionList').val();, in the Insert function, not being set.

HTML Code:

<html>
    <head>
      <script src='jquery-3.4.1.js' type='text/javascript'></script>
      <script src='script.js' type='text/javascript'></script>
    </head>
    <body>
        <button type="button" name="add" id="add">Add</button>
        <table id="dataTable">
            <tr>
                <th>Last Name</th>
                <th>First Name</th>
                <th>Location Number</th>
                <th>Position</th>
            </tr>
        </table>
    </body>
</html>

PHP Code:

<?PHP>
    $sql = "SELECT positionID, name FROM position";

    $result = mysqli_query($db,$sql);

    $position_arr = array();

    while( $row = mysqli_fetch_array($result) ){
        $positionID = $row['positionID'];
        $name = $row['name'];

        $position_arr[] = array("positionID" => $positionID, "name" => $name);
    }

    // encoding array to json format

    $JSON_array = json_encode($position_arr);
    echo $JSON_array;
?>
<?PHP>
    if(isset($_POST["last_name"], $_POST["first_name"], $_POST["location_num"], $_POST["position_ID"]))
    {
         $lastName = mysqli_real_escape_string($db, $_POST["last_name"]);
         $firstName = mysqli_real_escape_string($db, $_POST["first_name"]);      
         $locationNum = mysqli_real_escape_string($db, $_POST["location_num"]);
         $positionID = mysqli_real_escape_string($db, $_POST["position_ID"]);

         $sqlInsertEmployee = "INSERT INTO employee(lastName, firstName, positionID, locationID) SELECT ?, ?, positionID, locationID from location join position p on p.positionID = ? where number = ?";
         $stmtInsertEmployee = mysqli_prepare($db,$sqlInsertEmployee);
         mysqli_stmt_bind_param($stmtInsertEmployee, "ssss", $lastName,$firstName,$positionID,$locationNum,);
         mysqli_stmt_execute($stmtInsertEmployee);
         mysqli_stmt_close($stmtInsertEmployee);
    }   
?>

Script code:

$('#add').click(function(){
       var html = '<tr>';
       html += '<td contenteditable id="lastName"></td>';
       html += '<td contenteditable id="firstName"></td>';
       html += '<td contenteditable id="locationNum"></td>';
       html += '<td contenteditable id="positionID"><select class="positionList"><option></option></select>';   

       $(document).ready(function() {
              var data
              $.ajax({
                dataType: 'json',
                url: 'get-position.php',
                data: data,
                success: function(data) {
                    // begin accessing JSON data here
                  console.log(data)
                  //data = jQuery.parseJSON(data);
                  var html_to_append = '';
                  html_to_append += '<option value="0">-- Select One --</option>'
                  $.each(data, function(i, item) {
                    html_to_append += '<option value="' + item.positionID + '">' + item.name + '</option>';
                  });
                  $(".positionList").html(html_to_append);
                },
              })
            })


       html += '</td><td><button type="button" name="insert" id="insert">Insert</button></td>';
       html += '</tr>';
       $('#dataTable tr:first').after(html);
    });




    $(document).on('click', '#insert', function(){
       var last_name = $('#lastName').text();
       var first_name = $('#firstName').text();    
       var location_num = $('#locationNum').text();

       var position_ID = $(this).parents('tr').find('.positionList').val();

       console.log(position_ID);

       if(first_name != '' && last_name != '' && location_num != '')
       {
        $.ajax({
         url:"insert.php",
         method:"POST",
         data:{last_name:last_name, first_name:first_name, location_num:location_num, position_ID:position_ID},
         success:function(data)
         {
          $('#alert_message').html('<div class="alert alert-success">'+data+'</div>');
          $('#dataTable').DataTable().destroy();
          fetch_data();

         }
        });
        setInterval(function(){
         $('#alert_message').html('');
        }, 5000);
       }
       else
       {
        alert("All Fields is required");
       }
     });

Upvotes: 0

Views: 2455

Answers (1)

wrxsti
wrxsti

Reputation: 3504

The .val() method is used to get the value of an element.

Also note that @Kaka Sarmah is correct. Even this will not work because you're creating multiple elements with the same ID. IDs must be unique. Try giving it a class instead.

html += '<td contenteditable class="positionID"><select class="positionList"><option></option></select>';

Then in your javascript you can try to locate it using that class. Something like:

var position_ID = $(this).parents('tr').find('.positionList').val();

Upvotes: 1

Related Questions