Javascript(Jquery) input type submit or button conflict

Question

I want to hide a row after a delete query is done.

When i do this

<?php echo '<input type="submit" name="editProject'; echo $projectID; echo '" value="Edit" class="btn btn-success"/>';?>

The record will be deleted in the database but the row doesn't hide.

This

<input type="button"

Will hide the row but doesn't delete the record in the database.

So how can i delete a record in the database and hide that row together.

form in table:

<td class="deleterow"><form action="index.php" method="post">
    <?php echo '<button type="button" name="deleteProject'; echo $projectID; echo '" class="btn-sm btn btn-danger"><span class="glyphicon glyphicon-remove"></span></button>';?>
</form></td>

Javascript:

<script>

$(".deleterow").on("click", function(){
var $killrow = $(this).parent('tr');
    $killrow.addClass("danger");
$killrow.fadeOut(2000, function(){
    $(this).remove();
});});

</script>  

Answer 1

You have to make an ajax call in order to achieve this functionality. I assume you have jQuery in your project.

$(".deleterow").on("click", function(){
var $killrow = $(this).parent('tr');
$killrow.addClass("danger");
$killrow.fadeOut(2000, function() {
    $(this).remove();

    $.post("delete.php", {id: "<?php echo $projectID; ?>"})
        .done(function(data) {
            alert("Project deleted: " + data);
        });
});

});

I only added this part.

$.post("delete.php", {id: "<?php echo $projectID; ?>"})
.done(function(data) {
    alert("Project deleted: " + data);
});