passing input name with ajax

Question

I have this script that store item position in my database

    var set = $('#set');
    var set_x = set.offset().left;
    var set_y = set.offset().top;   
    var 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 );
            }); 
      }
  });

});

This is my HTML

How can I pass the input name to my database using AJAX?

My item position is stored but in need the item name also.

And how can I update the position after moving the same item?

user_6906901 · Answer

Since the input has a name it gets posted, but it's missing the value attribute. I may be wrong, but I think it's because your hidden input fields are missing the value attribute. The input tag should be like:

user_2820409 · Answer

Use var name = $(ui.helper[0]).find('input').attr('name'); to get the name like below.

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);

        }
});

passing input name with ajax

2 Answers