CODEWITHSUNDEEP
javascriptphpjquerymysqlajax
Michael
Michael

Reputation: 109

Ajax - Update database on button click

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.

Upvotes: 3

Views: 10700

Answers (3)

Mayank Vadiya
Mayank Vadiya

Reputation: 1451

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)

Upvotes: 1

Michał G
Michał G

Reputation: 2292

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"

Upvotes: 0

Pritamkumar
Pritamkumar

Reputation: 686

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 ?>'},

Upvotes: 1

Related Questions