Using php, how can I save an attribute value of a paragraph tag?

I have a page where I can move a paragraph tag using jQuery UI draggable. Whenever I move the paragraph tag, the inline style for that tag is changed as so:

position: relative; left: 280px; top: 300px;

I have a form directly beneath that. When I submit the form, I wan开发者_Python百科t the php to save those two attribute values(top & left).

How can I save the multiple attribute values of the paragraph tag?

I found THIS answer, but I don't understand where the $attrs array comes from or what's in it. Maybe that's what I'm missing?

One way would be to use a submit() jQuery event handler, so that just before the form is sent, you read the position of the paragraph and store it in a hidden form field.

Another way would be to update some hidden form fields whenever the user changes the paragraph position.

(Edit: the answer you reference is about dealing with an HTML DOM on the server side, whereas this question is really about the client side. This is more a Javascript question than a PHP one)

I use a hidden tag for an application which saves the position of several DOM elements. Just remember to check their values when you receive them in your PHP script.

$('#element').css('top') and .css('left') will give you their values. Edit: Alternatively you can use position to get their values either through .position() or .offset()

position = $('#element').position();
// or
position = $('#element').offset();
// position.left and position.top

Which one you should choose depends on how the element is positioned.

You can't do this directly from PHP. PHP doesn't know anything that happens in the browser unless the browser sends that information to the script.

You'll need to send the top and left values manually. The best way is to listen for the submit event:

$('#myForm').submit(function(e) {
    e.preventDefault();
    var position = $('#yourP').position();

    $('<input/>', {type: 'hidden', name: 'left', value: position.left}).appendTo(this);
    $('<input/>', {type: 'hidden', name: 'top', value: position.top}).appendTo(this);

    this.submit(); // submit the form with the extra values
});

You can then access these values with $_POST['top'] and $_POST['left'] (or the GET equivalents if your form uses GET) in your PHP script.