Problem receiving data from form with ajax

0

Edited: With trim I "fixed" the spaces (I would like to know why the values are arriving with spaces: /) but I could not fix the problem with the + symbol.

I will formulate my question that I asked previously like this:

I have a table and I want to edit data for that I transform the row of a table into a form, then I get the data that is at that moment in the form and I save it in variables. Then the data that the user modifies I keep in other variables and both I send them by post to a php using ajax. My problem is that when I receive the variables I have 2 problems:

  • I have a field that is called quality, the qualities can be F , F+ or F++ . The problem is that when you receive the string you receive only the F does not save the symbols + so the query should fail.
  • When receiving the data are left with spaces, that is if there was a data called "data" to send it by post and receive it will be saved by "data".
  • Has anyone had a similar problem or does it occur to him to solve it? in advance thank you very much

    PHP queries:

    <?php
    
    $especiee = $_POST["especiee"];
    $generoo = $_POST["generoo"];
    $familiaa = $_POST["familiaa"];
    $calidadd = $_POST["calidadd"];
    $tamañoo = $_POST["tamañoo"];
    $ciudadd = $_POST["ciudadd"];
    $comentarioo = $_POST["comentarioo"];
    $precioo = $_POST["precioo"];
    $especie = $_POST["especie"];
    $genero = $_POST["genero"];
    $familia = $_POST["familia"];
    $calidad = $_POST["calidad"];
    $tamaño = $_POST["tamaño"];
    $ciudad = $_POST["ciudad"];
    $comentario = $_POST["comentario"];
    $precio = $_POST["precio"];
    
    
    $conexion=mysqli_connect('localhost','root','','shells');
    
    
    $consulta="update shell set especie='$especiee', 
    genero='$generoo',familia='$familiaa',calidad='$calidadd',tamano='$tamañoo',
    ciudad='$ciudadd',comentario='$comentarioo',precio='$precioo' where especie='$especie' 
    and genero=$'$genero'and familia='$familia'and calidad='$calidad'and tamano='$tamaño'and 
    ciudad='$ciudad'and comentario='$comentario'and precio='$precio' "
    
    $request=mysqli_query($conexion,$consulta); 
    
    if($request) echo "funciona";
    else echo "error";  
    
    ?>
    

    Here is the data:

        <?php
    
    
            $conexion=mysqli_connect('localhost','root','','shells');
    
    
    
    
            $request=mysqli_query($conexion,"select especie, genero,familia,calidad,tamano,ciudad,comentario,precio from shell where habitad='land' order by familia,genero,especie ");
    
    
    
            while($prueba=$request->fetch_assoc()){
        ?>
    
    
            <tr class="info">
    
    
    
    
        <td><?php echo $prueba['familia']   ;   ?>  </td> 
        <td><?php echo $prueba['genero']   ;    ?>  </td> 
        <td><?php echo $prueba['especie'] ;     ?>  </td> 
    
        <td><?php echo $prueba['calidad']   ;   ?>  </td> 
        <td><?php echo $prueba['tamano']   ;    ?>  </td> 
        <td><?php echo $prueba['ciudad']   ;    ?>  </td> 
        <td><?php echo $prueba['comentario'];   ?>  </td> 
        <td><?php echo $prueba['precio']   ;    ?>  </td> 
    
        <td><input type=submit name="editar" value="Editar" onclick="transformarEnEditable(this)" class="btn btn-primary"> </input> </td>
        <td><input type="submit" name="eliminar" value="Eliminar" class="btn btn-danger"></input></td>
            </tr>
    
        <?php   } ?>
    

    And here I have the function that transforms the table into a form

    function transformarEnEditable(nodo){
    //El nodo recibido es SPAN
    if (editando == false) {
    editando = "true";
    
    var nodoTd = nodo.parentNode; //Nodo TD
    var nodoTr = nodoTd.parentNode; //Nodo TR
    
    var nodosEnTr = nodoTr.getElementsByTagName('td');
     especie = nodosEnTr[0].textContent; 
     genero = nodosEnTr[1].textContent;
     familia = nodosEnTr[2].textContent; 
     calidad = nodosEnTr[3].textContent;
     tamaño = nodosEnTr[4].textContent; 
     ciudad = nodosEnTr[5].textContent;
     comentario = nodosEnTr[6].textContent;
     precio = nodosEnTr[7].textContent;
     Editar = nodosEnTr[8].textContent;
     nuevoCodigoHtml = '<td><input type="text" name="especie" id="especie" value="'+especie+'" size="17"></td>'+
    '<td><input type="text" name="genero" id="genero" value="'+genero+'" size="10"</td>'+
    '<td><input type="text" name="familia" id="familia" value="'+familia+'" size="10"</td>'+
    '<td><input type="text" name="calidad" id="calidad" value="'+calidad+'" size="5"</td> '+
    '<td><input type="text" name="tamaño" id="tamaño" value="'+tamaño+'" size="5"</td> '+
    '<td><input type="text" name="ciudad" id="ciudad" value="'+ciudad+'" size="10"</td> '+
    '<td><input type="text" name="comentario" id ="comentario" value="'+comentario+'" size="20"</td> '+
    '<td><input type="text" name="precio" id="precio" value="'+precio+'" size="5"</td> '+
    '<td><input class="btn btn-primary" onclick=editar2()  id="boton" Value="aceptar" type="submit"></input></td>'+
    '<td><input class="btn btn-danger" onclick=editar2() value="eliminar" type="submit"></input> ' ;
    
    
    
    
    
    
    nodoTr.innerHTML = nuevoCodigoHtml;
    

    Ajax:

    function editar2(){
    
    
        var especiee = jQuery("#especie").val();
            var generoo = jQuery("#genero").val();
            var familiaa = jQuery("#familia").val();
            var calidadd = jQuery("#calidad").val();
            var tamañoo = jQuery("#tamaño").val();
            var ciudadd = jQuery("#ciudad").val();
            var comentarioo = jQuery("#comentario").val();
            var precioo = jQuery("#precio").val();
    
        console.log("presionaste boton editar"); 
            console.log(calidad);
    
    
    
            $.ajax({
    
                data: "especiee=" + especiee + "&generoo=" +generoo + "&familiaa="+familiaa+ "&calidadd="+calidadd+"&tamañoo="+tamañoo+"&ciudadd="+ciudadd+
                        "&comentarioo="+comentarioo+"&precioo="+precioo+"&especie=" + especie + "&genero=" +genero + "&familia="+familia+ "&calidad="+calidad+"&tamaño="+tamaño+"&ciudad="+ciudad+
                        "&comentario="+comentario+"&precio="+precio, 
                        //envio los datos al ajax.php donde procesara la consulta
                url:   'ajax/ajax.php',
                dataType: 'html',
                type:  'post',
                beforeSend: function () {
                    //mostramos gif "cargando"
    
                    //antes de enviar la petición al fichero PHP, mostramos mensaje
                    jQuery("#resultado").html("Buscando");
                },
                success:  function (response) {
    
                    console.log(response);
                    jQuery("#terrestres").html(response);
    
                },
                error: function(jqXHR,estado,error){
    
    
                }
            });
    
    }
    
        
    asked by Javier Russell Richards Valenz 01.02.2017 в 02:19
    source

    2 answers

    0

    In PHP you can clean the blanks on both sides of a string with the trim() function. You also have ltrim() and rtrim() .

    Regarding the sending of Ajax everything points to the problems you have in javascript source.

    Depending on how you mount the query, the + signs will become a blank space because in the URL encoding the + sign is a reserved character ( see section 2.2 of RFC3986 ).

    If you are using jQuery I recommend using jQuery.param() to do the job of correctly escaping the data that They will be sent.

    I give you an example of how to use it correctly:

    /* Valor que queremos enviar */
    var prueba = "++PRUEBA++";
    /* Montando mal la petición Ajax */
    $("#malo1").click(function() {
      $.ajax({
        url: 'http://urlecho.appspot.com/echo',
        dataType: 'text',
        crossOrigin: true,
        data: "body=" + prueba
      }).done(function(datos) {
        alert("Recibido (malo 1): " + datos);
      });
    });
    /* Montando mal los datos a enviar */
    $("#malo2").click(function() {
      $.ajax({
        url: 'http://urlecho.appspot.com/echo?body=' + prueba,
        dataType: 'text',
        crossOrigin: true,
      }).done(function(datos) {
        alert("Recibido (malo 2): " + datos);
      });
    });
    /* Permitiendo a jQuery.param() generar la cadena */
    $("#bueno1").click(function() {
      $.ajax({
        url: 'http://urlecho.appspot.com/echo',
        dataType: 'text',
        crossOrigin: true,
        data: $.param({ body: prueba })
      }).done(function(datos) {
        alert("Recibido (bueno 1): " + datos);
      });
    });
    $("#bueno2").click(function() {
      $.ajax({
        url: 'http://urlecho.appspot.com/echo',
        dataType: 'text',
        crossOrigin: true,
        data: { body: prueba }
      }).done(function(datos) {
        alert("Recibido (bueno 2): " + datos);
      });
    });
    button {
      display: block;
      margin: 5px;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <button id="bueno1">Pulse para envío BUENO (1)</button>
    <button id="bueno2">Pulse para envío BUENO (2)</button>
    <button id="malo1">Pulse para envío MALO (1)</button>
    <button id="malo2">Pulse para envío MALO (2)</button>
        
    answered by 01.02.2017 / 15:01
    source
    0

    The "+" symbol in the web world is usually converted into a blank space automatically. For you to travel and be meaningful you will have to code it. There are several functions in javascript and in PHP for it, like encodeURIComponent, urlencode and others. The final result should be that any "+" symbol that you sent in your request should travel encoded as "% 2B".

        
    answered by 01.02.2017 в 09:08