Ajax忽略SQL

Question

I have other functions just like this that work, however when I click, the Ajax gets posted but my page would originally refresh, until I added event.preventDefault. I have been stumped for hours and I cant see the problem..

Here is my AJAX:

 $(function(){
$(document).on('click','.addnewproject',function(){
    event.preventDefault();
    var curaid= $(this).attr('id');
    var $ele = $(this);
    $.ajax({
        type:'POST',
        url:'components/sql/insertproject.php',
        data:$("#addnewprojecttable").serialize(),
        success: 
        function(data){ 
        $(".image-list" + curaid).append(
                '<li id="projectfolder' + curaid + '">
\
           <img width="35px" onclick="openproject('+ curaid +')" style="cursor: pointer;" src="img/folder.png" /> 
\
            <p>Project ' + curaid + '</p> 
\
            ');
        }

        });
    });

});

My HTML:

<form  id="addnewprojecttable" method="post" >
<table>
<tr> 
<td> 
<input style="display:none;" name="username" id="username" value="<?php  echo "" . $_SESSION['username']; ?>" type="text"/>
<input style="float:left; width:100%; height:20px; margin-bottom: 20px;" name="projectname" id="projectname" type="text" placeholder="projectname"/>
<input style="float:left; width:100%; height:20px; margin-bottom: 20px;" name="contactname" id="contactname" type="text" placeholder="contactname"/>
<input style="float:left; width:100%; height:20px;  margin-bottom: 20px;" name="contactemail" id="contactemail" type="text" placeholder="contactemail"/>
<input style="float:left; width:100%; height:20px;  margin-bottom: 20px;" name="contactphone" id="contactphone" type="text" placeholder="contactphone"/>

<input style="float:left; width:100%; height:20px;" name="description" id="description" type="text" placeholder="description"/>
<input style="float:left; width:100%; height:20px;" name="notes" id="notes" type="text" placeholder="notes"/>



<button class="addnewproject" id="<?php echo $row["accid"]; ?>" >Add</button>
<button  onclick="closenewprojectwindow()">Cancel</button>
</td> 
</tr>

</table>
</form>

My SQL:

<?php
include 'config.php';

$sqlupdateincome = "INSERT INTO projects (username, projectname)
VALUES ('". $_POST['username'] ."', 'Ochrom Test Project')";

if ($conn->query($sqlupdateincome) === TRUE) {
    echo "New record created successfully";
} else {
     echo  "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>

Here is my database just in case it might be that. click for image

I do appreciate all help and responses, thank you!

Answer 1

Lets break this down. You have a form tag, which means you want to submit a form. Without an action attribute, you will be at the will of the browser, but pretty much all will submit the form the same page.

<form  id="addnewprojecttable" method="post">

Further down, still within the form, you have a button. The default action of a button is to submit the form unless you have modified the function of the button with Javascript, which is what you kind of have.

<button class="addnewproject" id="<?php echo $row["accid"]; ?>" >Add</button>

I do NOT use JQuery at all, but I can read it enough to understand what you are doing. Your modification code for the button is saying. Do NOT submit the form with this line:

event.preventDefault();

But then continue with the rest of the code in the function.

Without this line, the rest of the function will still be actioned and the form will be submit to itself as well (default action of the HTML). It may also be possible that the browser does not finish actioning the Javascript function before the form submission (inconsistent results - not a good thing).

Depending on your layout, sometimes you may need the following, but that is really another discussion.

event.stopPropagation();
event.preventDefault();

It is good practice to allow your HTML to work without Javascript enabled as well. For this reason, including an action in your form would also be something I would recommend.

Take note: Your SQL is open to SQL Injection as well.

Edit:

What is the full path to config.php and components/sql/insertproject.php?

On insertproject.php, add the following to the top:

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

And then happens when you go directly to the URL /components/sql/insertproject.php? Is there an error displayed?