передача входного имени с помощью ajax

Question

У меня есть этот скрипт, который хранит позицию элемента в моей базе данных

    var set = $('#set');
    var set_x = set.offset().left;
    var set_y = set.offset().top;   
    var id = <?php echo $id ?>;

  $( "#set div" ).draggable({ 
    stack: "#set div",
      stop: function(event, ui) {
          var pos_x = ui.offset.left - set_x;
          var pos_y = ui.offset.top - set_y;
          var need = ui.helper.data("need");

          console.log(pos_x);
          console.log(pos_y);
          console.log(need);

          //Do the ajax call to the server
          $.ajax({
              type: "POST",
              url: "posinsert.php",   
              data: { x: pos_x, y: pos_y, need_id: need ,id:id,item1:item}
            }).done(function( msg ) {
              alert( "Data Saved: " + msg );
            }); 
      }
  });

});

Это мой HTML

<div id="set">
  <div id="draggable" data-need="1">
    <p><img style="width:30%" src="./img/floor_plan_images/camera_top.png"</p>
    <input type="hidden" name="item1">
</div>

      <div id="draggable" data-need="2">
    <p><img style="width:30%" src="./img/floor_plan_images/camera_top.png"</p>
    <input type="hidden" name="item">
</div>
</div>
<div class="floor" id="droppable" ></div>

Как передать имя ввода в мою базу данных, используя AJAX?

Позиция моего предмета сохраняется, но также необходимо имя предмета.

И как я могу обновить позицию после перемещения того же предмета?

Answer 1

Используйте var name = $(ui.helper[0]).find('input').attr('name');, чтобы получить имя, как показано ниже.

var set = $('#set');
    var set_x = set.offset().left;
    var set_y = set.offset().top;   
    var id = 10;


  $( "#set div" ).draggable({ 
    stack: "#set div",
    stop: function(event, ui) {
          var pos_x = ui.offset.left - set_x;
          var pos_y = ui.offset.top - set_y;
          var need = ui.helper.data("need");
          // Get name of the input element
          var name = $(ui.helper[0]).find('input').attr('name');

          console.log(pos_x);
          console.log(pos_y);
          console.log(need);
          console.log(name);

        }
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
  
<div id="set">
  <div id="draggable" data-need="1">
    <p>
    <img style="width:30%" src="./img/floor_plan_images/camera_top.png">
    </p>
    <input type="hidden" name="item1"/>
</div>

     <div id="draggable" data-need="2">
    <p><img style="width:30%" src="./img/floor_plan_images/camera_top.png">
    </p>
    <input type="hidden" name="item">
</div>
</div>
<div class="floor" id="droppable" ></div>

Answer 2

Поскольку у входа есть имя, оно публикуется, но в нем отсутствует атрибут значения.Я могу ошибаться, но я думаю, что это потому, что в ваших скрытых полях ввода отсутствует атрибут значения.Тег ввода должен выглядеть так:

<input type="hidden" name="item" value="yourValue" />