如何使用ajax处理来自多个复选框和多个提交的数据

Question

I am trying to post data from multiple checkboxes with several submit buttons. Important is: the submit buttons are not part of the form because they are on a different place on the website.

This is what i have so far:

<form class="checkboxform" action="" method="post">
   <input type="checkbox" name="check_list[]" value="C/C++"><label>C/C++</label><br/>
   <input type="checkbox" name="check_list[]" value="Java"><label>Java</label><br/>
   <input type="checkbox" name="check_list[]" value="PHP"><label>PHP</label><br/>
</form>

The submit buttons:

<button type="button" id="delete" name="delete" onclick="submitForm()" value="Delete"/>Delete</button>
<button type="button" id="move" name="move" onclick="submitForm()" value="Move"/>Move</button>
<button type="button" id="copy" name="copy" onclick="submitForm()" value="Copy"/>Copy</button>

The ajax:

function submitForm(url){
   var data = $(".checkboxform").serialize();
   $.ajax({
    type : 'POST',
    url  : url,
    data: data,
    success :  function(data){
        $(".echo").html(data);
       }
   });
};

The php:

if($_POST['delete']) {
  if(isset($_POST['check_list'])){//to run PHP script on submit
    if(!empty($_POST['check_list'])){
    // Loop to store and display values of individual checked checkbox.
        foreach($_POST['check_list'] as $selected){
        echo $selected."</br>";
        }
        // code for delete goes here
        echo 'Files are  deleted!';
    }
  }
}

if($_POST['move']) {
  if(isset($_POST['check_list'])){//to run PHP script on submit
    if(!empty($_POST['check_list'])){
    // Loop to store and display values of individual checked checkbox.
        foreach($_POST['check_list'] as $selected){
        echo $selected."</br>";
        }
        //code for moving files goes here
        echo 'Files are moved!';
    }
  }
}

if($_POST['copy']) {
  if(isset($_POST['check_list'])){//to run PHP script on submit
    if(!empty($_POST['check_list'])){
    // Loop to store and display values of individual checked checkbox.
        foreach($_POST['check_list'] as $selected){
        echo $selected."</br>";
        }
        // code for copy goes here
        echo 'Files are copied!';
    }
  }
}

By submitting, php does not handle the data. What i am doing wrong? Can someone help me with that?

All the code is in the same file, called index.php

Answer 1

Your js function has a parameter

function submitForm(url){

But when you call the function, there is no parameter set

 onclick="submitForm()"

As that parameter is the URL to send the POST to, it never gets there. You probably should be seeing some errors in the browsers developer window. F12 to open the developer windows.

As you are running the same PHP script regardless of whether it is a delete, move or copy. I would remove the parameter and hardcode the url in the function like this.

function submitForm(){
   var data = $(".checkboxform").serialize();
   $.ajax({
    type : 'POST',
    url  : 'path/to/the.php',
    data: data,
    success :  function(data){
        $(".echo").html(data);
       }
   });
};