Ajax - Update database on button click

Question

I need some help with a project. I'm still learning javascript and jquery so bear with me. The website that I'm working on needs to update a database entry when a button is clicked, the button content is also queried from the database.

First database query to get the buttons:

<?php
    $freq_sql = "SELECT freq FROM disc_freq WHERE in_use='0'";
    $result_freq = $connection->query($freq_sql);
    echo "<h5>Available frequencies</h5>";
    while($row = mysqli_fetch_array($result_freq)){
        $set_freq=$row[0];
?>
<a id='button' class='w3-bar-item w3-button'><?php echo $set_freq ?></a>

Then the ajax script I tried but there is something wrong with it

$(document).ready(function(){
    $("#button").click(function(){
        $.ajax({
            url: "set_freq.php",
            type: "POST",
            data: {"set_freq":<?php echo $set_freq ?>}, 
            success: function(data){
                data = JSON.toString(data);

            }
        });
    });
});

Finally the php file

<?php
session_start();
include("konf.php");  
if(isSet($_POST['set_freq'])){ 
    $update_sql="UPDATE disc_freq SET in_use = '1', working_usr='".$_SESSION['username']."' WHERE freq='".$_POST['ins_freq']."'";
    $update_run=mysqli_query($connection,$update_sql);  
}  
?>

For some the first button when clicked on initiates same number ajax calls of how many buttons have been displayed. Others won't do anything.

The php code does work but the only problem is the ajax call and I haven't found a solution yet so any help is appreciated.

success: function(data){ data = JSON.toString(data); console.log(data); } and check console for returned data — Abhishek Mishra
– Abhishek Mishra, Commented Sep 6, 2017 at 6:51

Pritamkumar · Accepted Answer · 2017-09-06 06:52:14Z

1

please update code as in your code there is error in ajax script in js change you can change code from

  data: {"set_freq":<?php echo $set_freq ?>},

to

   data: {"set_freq":'<?php echo $set_freq ?>'},

answered Sep 6, 2017 at 6:52

Pritamkumar

6861 gold badge12 silver badges31 bronze badges

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

Comments

Mayank Vadiya · Accepted Answer · 2017-09-06 07:35:36Z

1

First of all you should prevent your page to refresh because you are clicking on a tag so.

You should send your data with @pritamkumar's answer or also send like my answer.

$(document).ready(function(){
    $("#button").click(function(event){
       var data=$(this).text();
        event.preventDefault()
        $.ajax({
            url: "set_freq.php",
            type: "POST",
            data: {"set_freq":data}, 
            success: function(data){
                data = JSON.toString(data);

            }
        });
    });
});

As per your comment that there are many links than you should change your selector. Like as below

<a class='button' class='w3-bar-item w3-button'><?php echo $set_freq ?></a>

And also change JS code

$(".button").click(function(event)

edited Sep 6, 2017 at 7:35

answered Sep 6, 2017 at 6:54

Mayank Vadiya

1,4512 gold badges19 silver badges32 bronze badges

1 Comment

Michael Over a year ago

For some reason it doesn't work with <a> links. Had to use <button> instead. Although pretty much what I was looking for. Thanks!

Michał G · Accepted Answer · 2017-09-06 06:58:33Z

0

there is always passed the same value to ajax

data: {"set_freq":<?php echo $set_freq ?>},

in html change

  <a id='button' class='button w3-bar-item w3-button' data-freq='<?php echo 
    $set_freq ?>'><?php echo $set_freq ?></a>

in js

$(document).ready(function(){
$(".button").click(function(){
    $.ajax({
        url: "set_freq.php",
        type: "POST",
        data: {"set_freq":this.data('freq')}, 
        success: function(data){
            data = JSON.toString(data);
        }
    });
});
});

i didn't test it - writing from "memory"

answered Sep 6, 2017 at 6:58

Michał G

2,30021 silver badges27 bronze badges

Collectives™ on Stack Overflow

Ajax - Update database on button click

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related