CODEWITHSUNDEEP
phpmysqlajax
Oviya Arasu
Oviya Arasu

Reputation: 193

asynchronous commenting using php

I have two php files (index.php and insert.php) My index.php has a form that takes in three inputs from the user (activity, duration and date -- this is for a fitness app) and stores it in a database. I have written the code to insert into the database, which it successfully does, however now I want to add notifications to the site so that the user knows whether or not their input was inserted. For example, if the duration they input isn't a number or is less than 0, I want text to show on the site that notifies them to change the duration to an appropriate value. I have written the script for that and want to accomplish it asynchronously. Right now, I just want it to print out if the data was successfully added, which it does not. Right now it takes me to another blank page without printing anything out but also updates my database correctly. Not sure what I am doing incorrectly.

index.php

<script>
    $(function() {
        $('#getData').click(function(event) {
            event.preventDefault();

            $.ajax({
                type: "GET",
                url: "insert.php",
                data : { activity : $('#activityInput').val(), duration:  $('#durationInput').val(), date: $('#dateIn').val( },
                beforeSend: function(){
                }
                , complete: function(){
                }
                , success: function(html){
                    //this will add the new comment to the `comment' div
                    $("#comment").html(html);
                }
            });
        });
    });

</script>

<h1> Add input </h1>

<form action="insert.php" method="GET">
    Fitness activity:<br>
    <input type="text" name="activity" id="activityInput"><br>
    Duration of activity (hrs):<br>
    <input type="text" name="duration" id="durationInput"><br>
    Date (mm-dd-yyyy):<br>
    <input type="text" name="date" id="dateIn" ><br>
    <input type="submit" value="Submit" id="getData">
</form>


<div id='comment' ></div>;

insert.php

if(!empty($_GET["activity"]) && !empty($_GET["duration"]) &&        !empty($_GET["date"])) {
    $activity = mysqli_real_escape_string($link, $_GET["activity"]);
    $duration = mysqli_real_escape_string($link, $_GET["duration"]);
    $date = mysqli_real_escape_string($link, $_GET["date"]);

    if(is_numeric($duration) && $duration > 0){
        $sql = "INSERT INTO users (activity, dateInput, duration) VALUES ('$activity','$date','$duration')";
        $result = mysqli_query($link, $sql);

        mysqli_close($link);
        echo '<div class="comment">' ."Successfuly added" . '</div>';
   }
}

Upvotes: 1

Views: 66

Answers (1)

Mihai
Mihai

Reputation: 26784

You are using an id for your success callback

$("#comment").html(html);

but your div <div class='comment' ></div>; has a class so either change it to an id or use

$(".comment").html(html);

Upvotes: 3

Related Questions