La presentación de datos de una entrada de tipo “imagen” de a través de Ajax en lugar de envío de formulario

Question

Básicamente, quiero utilizar una entrada de imagen, pero no quiero tener que enviar el formulario para obtener el resultado, quiero obtener las coordenadas X e Y del clic en la entrada de la imagen, y luego someterlos a través ajax.

Ahora, I se dan cuenta de que sólo puede poner la entrada de la imagen en su propia forma, a continuación, enviar a un iframe oculto y el cheque por resultado en un intervalo (estoy haciendo eso para un cargador Ajax en este momento), pero parece un poco mal. También se dan cuenta de que puedo conseguir mi posición del ratón a través de JavaScript de cualquier clic, eso no es realmente lo que estoy pidiendo

¿Puedo utilizar la entrada de imagen tipo de esta manera? ¿Hay una manera de tener el clic en la entrada de la imagen acaba de establecer su valor a continuación, llamar algo de JavaScript para ejecutar mi llamada AJAX?

Answer 1

Yo estaba pasando por mis viejas preguntas y vi que éste nunca fue respondida adecuadamente. No recuerdo si me di cuenta de esto "volver al camino", pero sí sé cómo hacerlo ahora.

Sólo tienes que comprobar la offsetX y offsetY del evento clic de una entrada de imagen. Hay que compensar a la entrada de la imagen que ha hecho clic.

$('input[type=image]').click(function(e) {
     //alert the clicked position.
     alert(e.offsetX + ',' + e.offsetY);
});

Answer 2

Tome un vistazo aquí: http://jsfiddle.net/pfLtm/

Como se puede ver, que el código puede ser fácilmente modificado para algo como esto:

$("#MyInput").click(function(event) {
    var oPos = $(this).position();
    $(this).attr("mouse_x", (event.pageX - oPos.left));
    $(this).attr("mouse_y", (event.pageY - oPos.top));
    return false;
});

Esto almacenará la posición X e Y del clic como atributos del elemento en sí. caso de prueba: http://jsfiddle.net/pfLtm/1/

En lugar de devolver falsa puede invocar la llamada AJAX por ejemplo.