Insertar resultado de jquery en form html para enviar a php

[MiguelNajdorf]

Hola gente, tengo un código escrito en jquery (no encontré foro de jquery para postearlo) el cual es el siguiente:

mapeo.js

Código PHP:

  $(document).ready(function() {
  $('.box').click(function(e) {
    var offset = $(this).offset();
    $('#position').text((e.clientX - offset.left) + ", " + (e.clientY - offset.top));
  });
}); 
   

a su vez este archivo mapeo.js es llamado en un html en el cual tengo el siguiente form:

Código PHP:

  <form action="envio.php" method="post">
            <input type="text" name="titulo" maxlength="40" required="required" placeholder="Dale un título!" /><br>            
            <div class="box" id="mapa"></div>
            <p id="position"></p>
            <input type="submit" value="Enviar"/>
        </form> 
   

en el div cuyo id es mapa, tiene asociado en el archivo css una imagen como background-image.

lo que hace todo esto es mostrar en el <p> con id position, un par de coordenadas x & y respecto de la imagen citada en el css. pero lo que yo necesito es que esas coordenadas se muestren en 2 inputs text para que se envien luego al envio.php

Necesito me den una mano ya que hace horas estoy renegando y no le encuentro la vuelta, muchas gracias!

[MiguelNajdorf]

hola ??

[Carloosolrac]

Primero creamos los INPUT en donde quieres mostrar los datos

Código HTML:

X: <input type="text" id="ps_x" name="pos_x" value=""><br>
Y:<input type="text" id="ps_y" name="pos_Y" value=""><br>
 

Luego usamos la función .val() la cual modifica el valor...

Código Javascript:

$(document).ready(function() {
                  $('.box').click(function(e) {
                    var offset = $(this).offset();
                    //$('#position').text((e.clientX - offset.left) + ", " + (e.clientY - offset.top));
                    $('#ps_x').val(e.clientX - offset.left);
                    $('#ps_y').val(e.clientY - offset.top);
                  });
                });
 

slds