problema con envio de variable jquery

carloosoirac · #1 (**permalink**) 11/08/2012, 16:12

hola gente, vengo para que por favor me solventen una duda... tengo un simple form html que me envia datos a un php y lo guarda en una base de datos, hasta acá todo perfecto. pero le agregué [URL="http://odyniec.net/projects/imgareaselect/"]este plugin jquery[/URL] que me permite seleccionar un área de una imagen y pasa los datos de x1 x2 y1 y2 ancho y alto y se ven en un input dentro del html. el tema es que a estas variables como verán (estan en una tabla) y las incluí como parte del form para que también me lo envie al php, entonces en el php le pido las variables pero no me las trae ni de casualidad :( la sintaxis del php es correcta por lo cual el problema está en el código que les expongo abajo, seguro no envia bien las variables de jquery pero no logro dar en la tecla, si se fijan, arriba del form, está la función jquery con el código del plugin citado, espero por favor me ayuden, si necesitan mas datos os envío. muchas gracias.

Código PHP:

  <!DOCTYPE html>
<html lang="es">
    <head>
        <title>Gestión de Reclamos</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="css/estilos.css" />     
  <link rel="stylesheet" type="text/css" href="css/imgareaselect-animated.css" />
  <script type="text/javascript" src="scripts/jquery.min.js"></script>
  <script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
  <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
    </head>
  <body>

      <div id="root">

        <div id="content" class="container">
<script>
function preview(img, selection) {
    if (!selection.width || !selection.height)
        return;
    
    var scaleX = 100 / selection.width;
    var scaleY = 100 / selection.height;

    $('#preview img').css({
        width: Math.round(scaleX * 869),
        height: Math.round(scaleY * 961),
        marginLeft: -Math.round(scaleX * selection.x1),
        marginTop: -Math.round(scaleY * selection.y1)
    });

    $('#x1').val(selection.x1);
    $('#y1').val(selection.y1);
    $('#x2').val(selection.x2);
    $('#y2').val(selection.y2);
    $('#ancho').val(selection.width);
    $('#alto').val(selection.height);    
}

$(function () {
    $('#photo').imgAreaSelect({ handles: false,
        fadeSpeed: 300, onSelectChange: preview });
});
</script>



 
    <div class="frame" style="margin: 0 0.3em; width: 869px; height: 961px;">
      <img id="photo" src="images/mapa01.jpg" />
    </div>
  </div>
 
  <div style="float: left; width: 50%;">
      Vista Previa
  
    <div class="frame" 
      style="margin: 0 1em; width: 100px; height: 100px;">
      <div id="preview" style="width: 100px; height: 100px; overflow: hidden;">
        <img src="images/mapa01.jpg" style="width: 100px; height: 100px;" />
      </div>
    </div>


        </div> <!-- /#content -->
      </div> <!-- /#root -->
          
               <form action="php/envio.php" method="POST">
           <br> <input type="text" name="titulo" maxlength="40" required="required" placeholder="titulame" /><br>            
            <select name="tipo">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
            </select><br>
                            <table style="margin-top: 1em;">
                    <thead>
                        <tr>
                            <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
                                Coordenadas
                            </th>
                            <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
                                Tamaño
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="width: 10%;"><b>X<sub>1</sub>:</b></td>
                            <td style="width: 30%;"><input type="text" name="x1" id="x1" value="-" disabled="disabled"/></td>
                            <td style="width: 20%;"><b>Ancho:</b></td>
                            <td><input type="text" name="ancho" value="-" id="ancho" disabled="disabled"/></td>
                        </tr>
                        <tr>
                            <td><b>Y<sub>1</sub>:</b></td>
                            <td><input type="text" name="y1" id="y1" value="-" disabled="disabled"/></td>
                            <td><b>Alto:</b></td>
                            <td><input type="text" name="alto" id="alto" value="-" disabled="disabled"/></td>
                        </tr>
                        <tr>
                            <td><b>X<sub>2</sub>:</b></td>
                            <td><input type="text" name="x2" id="x2" value="-" disabled="disabled"/></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><b>Y<sub>2</sub>:</b></td>
                            <td><input type="text" name="y2" id="y2" value="-" disabled="disabled"/></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            <div class="box" id="mapa"></div>
            <p id="position"></p>
            <textarea name="textarea" rows="12" cols="60" required="required" maxlength="2000"></textarea><br>
            <input type="submit" value="Enviar"/>
        </form>       
  </body>

djaevi · #2 (**permalink**) 11/08/2012, 17:06

A lo mejor no te esta recogiendo los valores antes de hacer el submit podrias hacer a modo de prueba una funcion asi:

function datosForm() {
var formulario=document.getElementById("idFormulario") ;
var str = "";
for (var i=0; i<formulario.elements.length; i++) {
str += "Elemento: " + formulario.elements[i].id + " Valor: " + formulario.elements[i].value;
}
alert(str);
}

y haz otro boton que llame a esta funcion para verificar si te esta reconociendo todos los campos porque puede que te muestre los valores en los inputs pero que no te los este asignando a ese formulario, igualmente si puedes coloca la parte de codigo php donde recibes los datos por las dudas, xq puede estar bien la sintaxis pero aun asi puede haber algun error.

Saludos

carloosoirac · #3 (**permalink**) 11/08/2012, 19:28

Código PHP:

  <?php

include ("conexion/conectar.php");

header('Content-Type: text/html; charset=UTF-8');

$x1 = $_POST['x1'];
$x2 = $_POST['x2'];
$y1 = $_POST['y1'];
$y2 = $_POST['y2'];
$ancho = $_POST['ancho'];
$alto = $_POST['alto'];

echo $x1;
echo $x2;
echo $y1;
echo $y2;
echo $ancho;
echo $alto;


if(isset($_POST['titulo']) && !empty($_POST['titulo']) &&
isset($_POST['textarea']) && !empty($_POST['textarea']))
    


{
    
$con= mysql_connect($server, $username, $password) or die ("Problemas al conectar");
mysql_select_db($baseDeDatos, $con) or die ("Problemas al conectar a la base de datos");

mysql_query("INSERT INTO reclamos (titulo, tipo, textarea) VALUES ('$_POST[titulo]','$_POST[tipo]','$_POST[textarea]')",$con);
echo "Reclamo Enviado.";
}else {
    echo "problemas al insertar datos";
}

?>

este es el código php... soy muy basico programando, no entendi donde agregar lo que me dijiste jeje, lo que hice fue ponerlo sobre etiquetas <script> justo arriba del submit pero no pasa nada ¿? explicame de manera mas detallada por favor...

Carloosolrac · #4 (**permalink**) 11/08/2012, 19:56

Tu nick me suena familiar :o

Cambia onSelectChange a onSelectEnd ;)

gebremswar · #5 (**permalink**) 12/08/2012, 01:20

Hola carloosoirac, que tal.

Pues es mu sencillo, en lugar de usar la propiedad disabled en los elementos del formulario usa readonly.

Es lo único, porque probé tu código funciona perfectamente.