Ajax function call not working

Question

I am trying to learn Ajax function calls in jquery. But I could not get the expected output. My code is below

The HTML and Script File is stored in the file 'addevent.php'

HTML Code:

<form id="addinfo">
Year: <div class="styled-select">
<select id="year">
<option>2017</option><option>2018</option>
<option>2019</option><option>2020</option>
</select>
</div>

Team:<div class="styled-select">
<select id="team">
<option>UG</option><option>PG</option>
</select>
</div>
<button class=btn name="add_event" id="add_event" />Add Event
<span id="result"></span>
</form>
</body>
</html>

Script Part:

<script>
$(document).ready(function(){      
    $("#add_event").click(function(){  
        var y= $("#year option:selected").text();
        var t= $("#team option:selected").text();

        $.ajax({
            url: 'checkevent.php', 
            type: 'POST',
            dataType: 'json',
            data: {year:y , team: t},  
            success: function(result) {  
                console.log(result);
                var val=result['result'];
                document.getElementById("result").innerHTML=val;
            }
            error: function(exception) {
                alert('Exeption:'+exception);
            }
        });
    });  
});
</script>

The code in the file checkevent.php is below

header("Content-Type: application/json", true);
$db = new PDO('mysql:host=localhost;dbname=register;charset=utf8mb4', 'root', '', array(PDO::ATTR_EMULATE_PREPARES => false, PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
$year =$_POST['year'];
$team =$_POST['team'];
$table=$team.$year;
try
{
    if ($db->query("SHOW TABLES LIKE '" . $table . "'")->rowCount() > 0)
    {
        $r=array("result"=>"already stored");
        echo json_encode($r);
    }
    else
    {
        $r=array("result"=>"continue");
        echo json_encode($r);
    }   
}//end of try
catch(PDOException $e) 
{
    $r=array("result"=>"error");
    echo json_encode($r);
}//end of catch
?>

Please Note: I have stored the file 'addevent.php' (HTML+Script) in the location 'registration/view/'

The checkevent.php file is stored in the location 'registration'

I tried to check if the button click function for add_event button is working by placing an alert inside it. But it doesn't work.

My expected output is if the table exist the span should display 'already stored' else it should say 'continue'

PS: I am new to using these ajax call,so sorry if this seems silly. Please help to understand these concepts clearly.

Thanks in advance

Answer 1

EDIT

OK got it. You missed a comma between success and error callbacks, which broke your Javascript...

Please change script to this and it should work:

<script>
    $(document).ready(function(){      
        $("#add_event").click(function(){  
            var y= $("#year option:selected").text();
            var t= $("#team option:selected").text();

            $.ajax({
                url: '/registration/checkevent.php', 
                type: 'POST',
                dataType: 'json',
                data: {year:y , team: t},  
                success: function(result) {  
                    console.log(result);
                    var val=result['result'];
                    document.getElementById("result").innerHTML=val;
                },
                error: function(exception) {
                    alert('Exeption:'+exception);
                }
            });
        });  
    });
</script>

---

You have a <button> element inside a form. The default type of a button is type="submit" and therefore the form is submitted before the button onclick listener works. Also you need to close a button element with </button>

Try to change it from

<button class=btn name="add_event" id="add_event" />Add Event

to

<button type="button" class=btn name="add_event" id="add_event" >Add Event</button>

As for the ajax URL, if you are running it from a page located in 'registration/view' and you're calling a page located in 'registration', you need to change the url to something like:
url: '/registration/checkevent.php'
because the php file isn't located in the same place as the script that's calling it.

Good luck

Answer 2

You change this line :

     url: 'checkevent.php',

By this :

     url: '../checkevent.php',

Type F12 and inspect your ajax Call in the console to see if everything is OK