How to get the input text value (from database) when I drop the div on droppable area?

Question

I made the draggable div by using database. I want to get the input type value in drophandler event. But it shows blank.

My JavaScript

  $ (init);
    function init() {
        $(".drag").draggable({
            start: handleDragStart,
            cursor: 'move',
            revert: "invalid",
        });
        $("#drop").droppable({
            drop: handleDropEvent,
            tolerance: "touch",              
        });

    }
    function handleDragStart (event, ui) {
        $(this).css('z-index', 9999);
    }       
    function handleDropEvent (event, ui) {

        $(this).append(ui.draggable);
        var droppedElement = ui.draggable;

          var popUp = droppedElement.find('#btnAddtujuan');
           popUp.on('click', function(event) {
            $("#registerDiv").fadeIn(1000);
            $("#popup").fadeIn(100);
             event.preventDefault();
        });

       var typeidsetresult  = droppedElement.find('#typeid');
        var choice = typeidsetresult.html();
      alert(choice);        
             $('#typeidset').val(choice);

    }

Here's my code:

<div class="col-md-3" id="right" style="margin-top: -1.5%;">

                   <?php        $conn = new mysqli(DB_SERVER, DB_USER, DB_PASSWORD, DB_DATABASE);


                            $sample = " select * from definetype ";
                                     $resultsample = $conn->query($sample);

                                          if($resultsample->num_rows >0)
                                        {
                                            echo '<div class="row">';
                                            while($rowresultsample = $resultsample->fetch_assoc())
                                            {         

                                              $type = $rowresultsample['type'];

                                   ?>
                                   <div class="drag" >
                                   <div id="btnAddtujuan">
                                   <img src="<?php echo $rowresultsample['img'];?>" id="imagetargettype" />
                                   <input  style="color:black;background-color:white;" name="typeid" id="typeid" value="<?php  echo $type;?>" />
                     </div></div>

        <?php } }?>
            <div id="popup">
                  <div id="popupinfo">
                    <div id="registerDiv">
                      <form style="background-color: white;" id="targetinsert1">
                  <input type="text"  value="" id="typeidset" disabled="disabled"/>
                 </form>
                    </div>
                  </div>
                </div>   
         <div id="drop" class="ui-widget-header" style="width: 100%;height:100%;">  <img style="padding-top:5%;" src="<?php echo $rowquerycat2[KEY_TARGETIMAGENAME]; ?>" id="target" alt="" class="img-responsive" /></div>

I want to get the value of input text value <input style="color:black;background-color:white;" name="typeid" id="typeid" value="<?php echo $type;?>" /> <input style="color:black;background-color:white;" name="typeid" id="typeid" value="<?php echo $type;?>" /> and pass the value to <input type="text" value="" id="typeidset" disabled="disabled"/> (in popup div) when I drop the div.

I refer and code something. I tested by alert message, it shows blank.

Answer 1

Your code for selecting typeid is incorrect. You need change code below:

var typeidsetresult  = droppedElement.find('#typeid');

by this:

var typeidsetresult  = $('.popup').find('#typeid');

because typeid is child of $('.popup') not droppedElement .