how to insert SQL values without reload?( jquery + PHP)

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!

You also need to protect against SQL injection. I'd recommend parameterized queries. — BAF
– BAF, Commented Dec 10, 2012 at 2:05
@jonathan de M Yes, I've gotten into this page, but do not understand how to do it with my parameters: (, I'm newbie: S, I tried but I can not with my parameters — berti
– berti, Commented Dec 10, 2012 at 2:08
WARNING! Your code contains an SQL injection vulnerability. Please switch to PDO or mysqli so you can use prepared statements with parameterized queries. — Charles
– Charles, Commented Dec 10, 2012 at 2:10

ewein · Accepted Answer · 2012-12-10 02:52:41Z

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());

edited Dec 10, 2012 at 2:52

answered Dec 10, 2012 at 2:11

ewein

2,7456 gold badges40 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Jonathan de M. Over a year ago

you're using GET in ajax and post in php

berti Over a year ago

What would $ par1 = $ _POST ['par1'];? i don't understand :S. 've pasted inside <head> script and does not work :S

ewein Over a year ago

That is php code, $par1 will hold the value that is being passed to ver.php in the par1 parameter which you can use to insert the value into your database.

berti Over a year ago

forgive my clumsiness, but $ par1 = $ _POST ['par1']; contain contain the same value as $ id = $ _POST ['article_id'];, no? $ id = $ _POST ['article_id']; indicates the page number on which we are now

ewein Over a year ago

that is just a generic parameter to show you how the AJAX code works. Add whatever parameters and values you want/need into the AJAX url.

|

Community · Accepted Answer · 2017-05-23 12:29:20Z

0

AJAX is the best way to accomplish what you are looking for also your code is extremely vulnerable to SQL injection I suggest doing your homework on PDO prepared statements to help safeguard against it. Take a look here Reload MySQL data inside a DIV using Ajax

edited May 23, 2017 at 12:29

CommunityBot

11 silver badge

answered Dec 10, 2012 at 2:08

Yamaha32088

4,24310 gold badges54 silver badges105 bronze badges

1 Comment

berti Over a year ago

Sorry, but I think I did not put any negative feedback

Xingjia Luo · Accepted Answer · 2012-12-10 02:10:08Z

0

<script type="text/javascript">
    $(function(){
        $('form').submit(function(){
            $.ajax({
                type:'POST',
                data:{'usuario':$(this).find("input[name=usuario]").val(),'email':$(this).find("input[name=email]").val()},
                success:function(returnData){
                    console.log(returnData)
                }
            })
            return false;
        })
    })
</script>

answered Dec 10, 2012 at 2:10

Xingjia Luo

3711 gold badge3 silver badges11 bronze badges

2 Comments

Charles Over a year ago

-1, code dumps are not answers. You have not explained what this code is, how it works, why it was written, or how it will help fix the problem.

berti Over a year ago

Hello :) Thank you, I just test your code, but not working. I've pasted inside <head> script and does not work: (

Collectives™ on Stack Overflow

how to insert SQL values without reload?( jquery + PHP)

3 Answers 3

11 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related