Ajax Jquery form submit

Question

Hello I am running a form using ajax submit functions using PHP and JS bellow is my code

submit.php

<?php 
if(isset($_POST['add_data'])){
    echo "add id";
}
if(isset($_POST['update_data'])){
    echo "update_id";
}
?>

Form.js

$('form.data').on('submit',function(){
    var info = $(this),
        url = info.attr('action'),
        method = info.attr('method'),
        data = {};

    info.find('[name]').each(function(index, value){
        var info= $(this),
            name = info.attr('name'),
            value = info.val();
        data[name] = value;
    });

    $.ajax({
        url: url,
        method: method,
        data: data,
        success: function(response){
            console.log(response);
            //refresh total
        }
    });
    return false;
});

form.php

<form method="POST" action="submit.php" class="data">
<input type="hidden" name="id" value="<?php echo $row['id']; ?>">
<button name="add_data" class="btn btn-label-success btn-sm mg-y-5"><i class="fa fa-link"></i>
<button name="update_data" value="update" class="btn btn-label-warning btn-sm mg-y-5"><i class="fa fa-link"></i> Update</button>
</form>

however the result I am getting is not correct if I click one of the button the console replies: add idupdate_id

instead of one of the following add id or update_id

Answer 1

On submit you are going to have the value set so isset will always return true. What you must do is:

if(!empty($_POST['add_data'])){
    echo "add id";
}

Answer 2

The problem is that your form contains both add_data and update_data, so they will be always set in $_POST . If you want different action for each button, you could assign a function to the onClick event to both buttons, check which caused the event and pass it to your AJAX data.

<form method="POST" action="submit.php" class="data">
<input type="hidden" name="id" value="<?php echo $row['id']; ?>">
<button name="add_data" class="btn btn-label-success btn-sm mg-y-5"><i class="fa fa-link"></i>
<button" name="update_data" value="update" class="btn btn-label-warning btn-sm mg-y-5"><i class="fa fa-link"></i> Update</button>
</form>

Then in your JS:

$("button").click(function(){
 var info = $(this),
    url = info.attr('action'),
    method = info.attr('method'),
    data = {};

info.find('[name]').each(function(index, value){
    var info= $(this),
        name = info.attr('name'),
        value = info.val();
    data[name] = value;
});
data["action"] = ($(this).attr("name") === "add_data") ? 0 : 1; //If add_data -> 0 else -> 1

$.ajax({
    url: url,
    method: method,
    data: data,
    success: function(response){
        console.log(response);
        //refresh total
    }
});
return false;
});

And then in your PHP, you look for $_POST["action"] variable

if($_POST["action"] == 0) {
echo "add_data";
} else {
echo "update_data";
}

EDIT: If you would like to, you don't have to check it in a condition, and just past the name attribute to data["action"] and then check in PHP, if $_POST["action"] is equal to add_data or update_data

Answer 3

Use next code for separating your button actions:

HTML:

<form method="POST" action="submit.php" class="data">
<input type="hidden" name="id" value="<?php echo $row['id']; ?>">
<button value="add" class="btn btn-label-success btn-sm mg-y-5"><i class="fa fa-link"></i>Add</button>
<button value="update" class="btn btn-label-warning btn-sm mg-y-5"><i class="fa fa-link"></i> Update</button>
</form>

JS:

$('form.data > button').on('click',function(){
    var info = $(this).parent(),
        url = info.attr('action'),
        method = info.attr('method'),
        task = $(this).val(),
        data = {};

    info.find('[name]').each(function(index, value){
        var info= $(this),
            name = info.attr('name'),
            value = info.val();
        data[name] = value;
    });
    data['task'] = task;

    $.ajax({
        url: url,
        method: method,
        data: data,
        success: function(response){
            console.log(response);
            //refresh total
        }
    });
    return false;
}); 

PHP:

if(isset($_POST['task']) && $_POST['task'] == 'add'){
    echo "add id";
}
if(isset($_POST['task']) && $_POST['task'] == 'update'){
    echo "update_id";
}