Submit a form on mouseup

I have a form which allows you to drag elements to new x and y coordinates.

When the form is submitted, everything works great (the 3 variables are in the _POST[]


A problem arrives if I simply drag the mouse in/out of the form without clicking on anything as I only want the form to be submitted once the mouse is clicked on and released.
Heres the function,to get my variables and to submit the form

        function endDrag(evt) {
          selectedElement = false;
		  
		  document.getElementById("objects").innerHTML = '<input type="text" name="'+evt.target.id+'_x" value="'+evt.offsetX+'">';
		  document.getElementById("objects").innerHTML += '<input type="text" name="'+evt.target.id+'_y" value="'+evt.offsetY+'">';
		  document.getElementById("room_setup").submit();
		}

ant it looks like its called on many events

        var svg = evt.target;
        svg.addEventListener('mousedown', startDrag);
        svg.addEventListener('mousemove', drag);
        svg.addEventListener('mouseup', endDrag);
        svg.addEventListener('mouseleave', endDrag);
        svg.addEventListener('touchstart', startDrag);
        svg.addEventListener('touchmove', drag);
        svg.addEventListener('touchend', endDrag);
        svg.addEventListener('touchleave', endDrag);
        svg.addEventListener('touchcancel', endDrag);

should I delete all the events which use endDrag except for the mouseup one to ensure the function fires when a click is released

(I moved this to JavaScript, as there is no PHP content in the question).

1 Like

What happened when you tried?