form with jquery ajax no picture coordinates from php

509

I have a picture in a form with php to received the coordinates of my click:

<form method="post" action="" id="update">
   <input type="image" src="picture.jpg">
</form>

Withprint_r($_POST) I received$_POST['x'] andy.

But when i make a submit with jquery/ajax i don't received it. Givs a way that this work?

With:

$.post("submit.php", {
  date: $("input:first").val()               
},

or:

$.ajax({type:'POST', url: 'submit.php', data:$('#update').serialize(), success:
   function(response) {
      alert(response);
}});

So in submit.php I don't received the coordinates.

Thank you for help

Best regards

Koda

177

Answer

Solution:

Unfortunately, jQuery doesn't get the mouse coördinates when you usejQuery.serialize() to get the form's contents. There are two ways to work around this problem. One is to make the form submit into an iFrame using thetarget attribute on the form. If you do this, the coördinates are still send to your PHP script and the user will not notice a page refresh. Some browsers will display this iFrame URL in the page history though, and it of course isn't a neat solution.

The best way to solve this is using some extra Javascript. You need to do the following:

  1. Store the mouse coördinates in a variable when the mouse moves.
  2. When the form is submitted, calculate the mouse position relative to your image. Because you stored the mouse position, you can now calculate this position.
  3. Append this position (x, y) to the string you get fromjQuery.serialize().
  4. Make your AJAX request with this new string: the coördinates are now sent.

To do this, you can use the following code:

// Save the mouse position.
var mousePosition = {x: 0, y: 0};
$(document).mousemove(function(event) {
    mousePosition.x = event.pageX;
    mousePosition.y = event.pageY;
});

$('form').on('submit', function(event) {
    var str = $(this).serialize();

    var image = $('form input[type="image"]');
    var offset = image.offset();
    var x = mousePosition.x - offset.left;
    var y = mousePosition.y - offset.top;

    if (x < 0 || x > image.width() || y < 0 || y > image.height()) {
        // Image not clicked, the form was submitted in an other way.
        alert('Image not clicked!');
    } else {
        str += 'x=' + x + '&y=' + y;

        // Make your AJAX request.
        $.ajax({type:'POST', url: 'submit.php', data:str, success: function(response) {
            alert(response);
        }});
    }

    alert('str: ' + str);

    // Stop the form from submitting.
    event.preventDefault();
});

Take a look at this JSFiddle for a working example.

414

Answer

Solution:

Input type image has no value attribute ( specification says “the element's value attribute must be omitted“ ), therefore, what will be sent to the server depends on browser. Some browsers like Firefox follow the specifications and will send only the X and Y coordinates, while browsers like Chrome will send the value too ( if value and name attributes exists ). Now, regarding to your question, because input type of image can't have value, jquery does not serialize any data related to that input, including the position of mouse click. If you want to send mouse position via ajax, collect the click position manually, and sent that data the same way as it would be done by the browser. Here is the example:

$( '#update' ).on( 'submit', function( e, data ) {

    // serialize form data and append coordinates ( if they exists )
    $.ajax({
        type: 'POST', 
        url: 'submit.php', 
        data: $('#update').serialize() + ( data ? '&' + $.param( data ) : '' ), 
        success: function( response ) {
            console.log( response );
        }
    });

    return false;
});

$( "input[type='image']" ).on( 'click', function( e ) {

    // trigger form submit event and pass arbitrary data ( x and y coordinates )
    $( '#update' ).trigger( "submit", [ { x: e.pageX - $(this).offset().left, y: e.pageY - $(this).offset().top } ] );          
    return false;
});

People are also looking for solutions to the problem: javascript - How to submit form using ajax and normal POST in same time?

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.