Foros del Web » Programando para Internet » Jquery »

problema con envio de variable jquery

Estas en el tema de problema con envio de variable jquery en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/08/2012, 16:12
 
Fecha de Ingreso: agosto-2012
Mensajes: 2
Antigüedad: 9 años, 10 meses
Puntos: 0
Exclamación problema con envio de variable jquery

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> 
  #2 (permalink)  
Antiguo 11/08/2012, 17:06
Avatar de djaevi  
Fecha de Ingreso: marzo-2007
Ubicación: Moreno, Buenos Aires
Mensajes: 400
Antigüedad: 15 años, 3 meses
Puntos: 47
Respuesta: problema con envio de variable jquery

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
  #3 (permalink)  
Antiguo 11/08/2012, 19:28
 
Fecha de Ingreso: agosto-2012
Mensajes: 2
Antigüedad: 9 años, 10 meses
Puntos: 0
Respuesta: problema con envio de variable jquery

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']))
    


{
    
$conmysql_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...
  #4 (permalink)  
Antiguo 11/08/2012, 19:56
 
Fecha de Ingreso: agosto-2012
Ubicación: Santiago
Mensajes: 124
Antigüedad: 9 años, 10 meses
Puntos: 60
Respuesta: problema con envio de variable jquery

Tu nick me suena familiar :o

Cambia onSelectChange a onSelectEnd ;)
__________________
~~Aprendiendo.
Become a Programmer, Moth*rf*cker
  #5 (permalink)  
Antiguo 12/08/2012, 01:20
 
Fecha de Ingreso: enero-2012
Ubicación: Santiago de Surco, Lima - Perú
Mensajes: 266
Antigüedad: 10 años, 5 meses
Puntos: 57
Respuesta: problema con envio de variable jquery

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.

Etiquetas: enviando, variables
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:41.