Insert data in the database without refreshing the page

Question

Insert data in the database without refreshing the page

Navigation

#1 by (0 votes)
#2 by (0 votes)

2

I'm trying to insert data from a chat in my database, my chat is doing it with php and ajax since it does not demand so much robustness, I have a function but it does not work,

this is the form I want to send

<form method="POST" onsubmit="return enviar();">
        <textarea name="message" id="message" placeholder="Enter message"></textarea>
        <input type="hidden" id="nombre" name="nombre" placeholder="Name" value="<?php echo $_SESSION['usuario']['nombre']?>">
        <input type="submit" name="submit" value="Send it">

        <input type="hidden" id="myId" name="idReceiver" value="<?php echo $id ?>">
        <input type="hidden" id="idEmitter" name="idEmitter" value="<?php echo $us ?>">
    </form>

this is my function

function enviar(){
            var mensaje = document.getElementById('message').value;
            var nombre = document.getElementById('nombre').value;
            var idEmitter = document.getElementById('myId').value;
            var idReceiver = document.getElementById('idEmitter').value;

            var dataen = 'message='+mensaje +'&nombre='+nombre +'&myId='+idEmitter +'&idEmitter='+idReceiver;

            $.ajax({
                type:'POST',
                url:'inser.php',
                data:dataen
            });
            return false;
        }

and this is my php page where I enter the data into the database

<?php 

include 'db.php';
include '../functions.php';

    $name = $_POST['nombre'];
    $message = $_POST['message'];
    $emitter = $_POST['idEmitter'];
    $receiver = $_POST['idReceiver'];

    $query = "INSERT INTO messages (nombre, message, idEmitter, idReceiver, seenUsuario) VALUES ('$name', '$message', '$emitter', '$receiver', '0')";

    $run = $conexion->query($query);


?>

my intention and what I want to achieve is that at the moment of inserting, it is inserted in the database and shown in the chat

EDITING

Currently I have my form and where I insert the data as follows

<?php session_start();

include 'db.php';
include '../functions.php';

$emit = obtener_mensajes($conexion, $us);
$id=$_GET['id'];
var_dump($id);

comprobarSession();

?>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="style.css">
    <script>

        function getPage(url, from, to) {
            var cached=sessionStorage[url];
            if(!from){from="body";} // default to grabbing body tag
            if(to && to.split){to=document.querySelector(to);} // a string TO turns into an element
            if(!to){to=document.querySelector(from);} // default re-using the source elm as the target elm
            if(cached){return to.innerHTML=cached;} // cache responses for instant re-use re-use

            var XHRt = new XMLHttpRequest; // new ajax
            XHRt.responseType='document';  // ajax2 context and onload() event
            XHRt.onload= function() { sessionStorage[url]=to.innerHTML= XHRt.response.querySelector(from).innerHTML;};
            XHRt.open("GET", url, true);
            XHRt.send();
            return XHRt;
        }

        window.onload(function() {
            setInterval(function(){
            var myId = document.getElementById('myId');
            var url = 'chat.php?id='+myId;
            getPage(url, "body", "chat");
            }, 1000);
        }
    </script>
</head>
<body>

<div id="container">
    <div id="chat_box">
        <div id="chat"><?php require_once 'chat.php'; ?></div>
    </div>
    <form method="POST" action="index.php">
        <textarea name="message" id="message" placeholder="Enter message"></textarea>
        <input type="hidden" id="nombre" name="nombre" placeholder="Name" value="<?php echo $_SESSION['usuario']['nombre']?>">
        <input type="submit" name="submit" value="Send it">

        <input type="hidden" id="myId" name="idReceiver" value="<?php echo $id ?>">
        <input type="hidden" id="idEmitter" name="idEmitter" value="<?php echo $us ?>">
    </form>
<?php 
if (isset($_POST['submit'])) {    $name = $_POST['nombre'];
    $message = $_POST['message'];
    $emitter = $_POST['idEmitter'];
    $receiver = $_POST['idReceiver'];

    $query = "INSERT INTO messages (nombre, message, idEmitter, idReceiver, seenUsuario) VALUES ('$name', '$message', '$emitter', '$receiver', '0')";

    $run = $conexion->query($query);
}

?>
</div>

</body>
</html>

but if I leave it that way, the page is refreshed and I lose several data, which I do not want, that's why I want to do it with ajax

2A EDITION

Previously I had my form and the way it was sent in this way, but for other reasons I had to change it by the current one (1st edition)

function ajax(){
            var req = new XMLHttpRequest();
            req.onreadystatechange = function(){
                if (req.readyState == 4 && req.status == 200) {
                    document.getElementById('chat').innerHTML = req.responseText;
                }
            }

            var myId = document.getElementById('myId');
            var url = 'chat.php?id='+myId;

            req.open('POST', url, true);
            req.send();

        }

        setInterval(function(){
            ajax()
        }, 1000);

php ajax

asked by Cesar Gutierrez Davalos 25.07.2017 в 02:01

source

2 answers

Problem with the decimal data type in Doctrine2 and Symfony3 Jumps in a field of a table

score 0 · Answer 1

You have two options ... The easiest one, so I see that form you will never send it, remove the form tag and ...

You can also use:

$("form").click(function(event) {
  event.preventDefault();
});

and thus prevent the submit from running.

score 0 · Answer 2

As you commented, delete the form tag and the input: submit. In this case we are going to use Jquery and SweetAlert

Let's start with what you ask

HMTL

    <textarea name="message" id="message" placeholder="Enter message"></textarea>
    <input type="hidden" id="nombre" name="nombre" placeholder="Name" value="<?php echo $_SESSION['usuario']['nombre']?>">
    <input type="hidden" id="myId" name="idReceiver" value="<?php echo $id ?>">
    <input type="hidden" id="idEmitter" name="idEmitter" value="<?php echo $us ?>">
    <a id="enviar">Enviar datos </a>

JS

$('#enviar').click(function(){
let message = ('#message').val();
let nombre = ('#nombre').val();
let idReceiver = ('#myId').val();
let idEmitter = ('#idEmitter').val();
//obtenemos el valor de todos los input que te interesan
              $.ajax({
                    type: "POST", //definimos el método de envío
                    url: "js/ajax/tuArchivo.php", //el archivo al cual se enviaran
                    data: {  //tu data como un objeto
                        'message' : message,
                        'nombre' : nombre,
                        'idReceiver' : idReceiver,
                        'idEmitter ' : idEmitter,
                    }
                }).done(function(data) {
                        //en esta parte leemos que nos devuelve el servidor, si nos responde "edited" mostramos la función de sweetalert success, cualquier otro caso lo marcamos como error.
                    switch (data) {
                        case "edited":
                        swal(
                            'Datos actualizados',
                            'Buen trabajo',
                            'success'
                          )

                            break;

                        default:
                            swal({
                                type: 'error',
                                title: 'Oops...',
                                text: 'Error desconocido, intente de nuevo',
                            })

                            break;
                    }
                });
});

PHP

<?php 

include 'db.php';
include '../functions.php';

    $name = $_POST['nombre'];
    $message = $_POST['message'];
    $emitter = $_POST['idEmitter'];
    $receiver = $_POST['idReceiver'];

    $query = "INSERT INTO messages (nombre, message, idEmitter, idReceiver, seenUsuario) VALUES ('$name', '$message', '$emitter', '$receiver', '0')";

    $run = $conexion->query($query);
   echo 'edited';

?>