Question

I have a form where I keep various fields (name, email, comments) in a mysql database, the data is written, but I would like to show data without reloading the page, press the submit button and view the new comment. .

HTML:

<form action="" method="post" id="form">
    <fieldset>
        <input type="hidden" name="noticia_id" value="<?php echo $id;  ?>"><br>
        <p><label>NOMBRE *</label>
        <input type="text" id="nombre" name="usuario"></p>
        <p><label for="email">EMAIL (No se publicará) *</label>
        <input type="text" id="email" name="email"></p>
        <p><label for="comment">COMENTARIO</label>
        <textarea name="comentario" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
        <p><input type="submit" name="submit" id="submit" tabindex="5" value="Enviar " /></p>

    </fieldset>
</form>

PHP:

<?php
if ($_POST) {
    //conectamos a la base  
    $connect=mysql_connect("localhost","root","");  
    //Seleccionamos la base  
    mysql_select_db("mostra",$connect);
    $id=$_POST['noticia_id'];
    $nick=$_POST['usuario']; 
    $email=$_POST['email']; 
    $comentario=$_POST['comentario']; 
    $query = "INSERT INTO comentarios (usuario,email,comentario,noticia_id, fecha) VALUES('$nick','$email','$comentario','$id', NOW())";
    mysql_query($query) or die(mysql_error());

    $query = "UPDATE  noticias SET num_comentarios= num_comentarios+1 where id_noticia='".$id."'";
    mysql_query($query) or die(mysql_error());
}

?>

How do I create a jquery function or an other method to insert this data without having to reload the page?

I’ve looked at tutorials but I can not help me!

Answer 1

In your javascript use Jquery to make a AJAX call as such:

Say you have a php page called url.php which is doing the SQL insertions and that you are passing a parameter called par1 do the following:

$.ajax({
    url: "ver.php?par1=" + parValue,
    type: 'POST',
    success: function(result) {
        // use the result as you wish in your html here
}});

then in ver.php do:

$par1 = $_POST['par1'];

Ok try this code:

HTML code:

<fieldset>
    <input type="hidden" name="noticia_id" value="<?php echo $id;  ?>"><br>
    <p><label>NOMBRE *</label>
    <input type="text" id="nombre" name="usuario"></p>
    <p><label for="email">EMAIL (No se publicará) *</label>
    <input type="text" id="email" name="email"></p>
    <p><label for="comment">COMENTARIO</label>
    <textarea name="comentario" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
    <p><input type="button" name="submit" id="submit" onclick="send_data()" tabindex="5" value="Enviar " /></p>

</fieldset>

Javascript Code:

function send_data()
{
    var usuario = $('#nombre').val();
    var email = $('#email').val();
    var commentario = $('#comment').val();

    $.ajax({
    url: "ver.php?usuario=" + usuario + "&email=" + email + "&comentario=" + commentario,
    type: 'POST',
    success: function(result) {
        // use the result as you wish in your html here
    }});

}

PHP Code:

$connect=mysql_connect("localhost","root","");  
//Seleccionamos la base  
mysql_select_db("mostra",$connect);
$nick=$_POST['usuario']; 
$email=$_POST['email']; 
$comentario=$_POST['comentario']; 
$query = "INSERT INTO comentarios (usuario,email,comentario,noticia_id, fecha) VALUES('$nick','$email','$comentario','$id', NOW())";
mysql_query($query) or die(mysql_error());

$query = "UPDATE  noticias SET num_comentarios= num_comentarios+1 where id_noticia='".$id."'";
mysql_query($query) or die(mysql_error());