Jquery AJAX DELETE 请求也在同一表单上触发 POST 请求

Question

I have a form wrapped around a table

                <form id="project-form">
                    <table id="project-table" class="table table-striped table-inverse table-responsive">
                        <caption>Projects</caption>
                        <thead class="thead-inverse">
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Project name</th>
                                <th scope="col">Description</th>
                                <th scope="col">Estimated time (min)</th>
                                <th scope="col">Actual time (min)</th>
                                <th scope="col">Add task</th>
                                <th scope="col">Delete project</th>
                            </tr>
                        </thead>
                        <tbody id="project-body">


                        </tbody>
                    </table>
                </form>

This table is populated via a AJAX GET request

function getProjects() {
  $.ajax({
    method: 'GET',
    dataType: 'json',
    url: 'http://localhost/WBS/php/api/requests/get.php?function=project',
    success: (response) => {
      $.each(response, function () {
        $.each(this, function (index, value) {
          console.log(value);
          $('#project-body').append(
            `
            <tr>
                <td>
                  <input class="form-control" type="hidden" name="projectid" id="projectid  value="${value.projectid}">
                  ${value.projectid}
                </td>
                <td>
                  <input class="form-control" type="text" name="projectName" id="projectName" value="${value.title}">
                </td>
                <td>
                  <input class="form-control" type="text" name="description" id="description"  value="${value.description}">
                </td>
                <td>
                  <input class="form-control" type="text" name="estimatedTime" id="estimatedTime"  value="${value.Estimated_time}">
                </td>
                <td>
                  <input class="form-control" type="text" name="actualTime" id="actualTime"  value="${value.Actual_time}">
                </td>
                <td>
                  <a id="addTask" class="btn btn-info" href="Overview.html?id=${value.projectid}" role="button">
                    <i class="fa fa-angle-right" aria-hidden="true"> </i> Add task
                  </a>
                </td>
                <td>
                  <button type="submit" id="deleteProject" name="deleteProject" class="btn btn-danger" value="${value.projectid}" >
                    <i class="fa fa-angle-right" aria-hidden="true"> </i> Delete project
                  </button>
                </td>
            </tr>

            `
          );
        });
      });
    },
    error: () => {
      console.error('Something went wrong with the getProjects function');
    },
  });
}

I would like to call the delete function on this button click

               <button type="submit" id="deleteProject" name="deleteProject" class="btn btn-danger" >
                    <i class="fa fa-angle-right" aria-hidden="true"> </i> Delete project
                  </button>

the function I call on said button is this

function deleteProject() {
  let id = $(this).find('#projectid').val();

  $.ajax({
    type: 'DELETE',
    url: 'http://localhost/WBS/php/api/requests/delete.php',
    data: { id: id },
    success: () => {
      $('#alertDanger').fadeIn(() => {
        setTimeout(() => {
          $('#alertDanger').fadeOut();
        }, 5000);
      });
    },
    error: () => {
      $('#alertDangerFailed').fadeIn(() => {
        setTimeout(() => {
          $('#alertDangerFailed').fadeOut();
        }, 5000);
      });
    },
  });
}

in document.ready I handle the onclick event

  $('#deleteProject').on('click', () => {
    deleteProject();
  });

now the problem arrives when I click on the deleteproject button, because my form has the ability to also upload new projects, the deleteproject submit event also triggers the POST call which is binded under this onclick event

  $('#saveProjects').on('click', () => {
    uploadProjects();
  });

EDIT: A fixed it by using this

  $(document).on('click', '#deleteProject', () => {
    deleteProject();
  });

as onclick handler from -> Jquery button click event not firing

Answer 1

As Kohaku answered, this is a default behaviour of <button type="submit"></button so you have do prevent it somehow. One possible solution to do it is change the button type from submit to button , should be like:

<button type="button" id="deleteProject" name="deleteProject" class="btn btn danger">
   <i class="fa fa-angle-right" aria-hidden="true"> </i> Delete project
</button>

Answer 2

As you mentioned, this is the form attempting to handle the default submit behaviour which, in this instance, you do not require.

You can override this with the preventDefault() method:

$('#deleteProject').on('click', (e) => {
    e.preventDefault();
    deleteProject();
});

The answer from Alison is the cleaner option actually as it addresses the issue before it's an issue https://stackoverflow.com/a/61432452/4801692

Answer 3

What happened in your case is you are trying to trigger event for asynchronously loaded content. In those case cases you need to write events based on its static parent element.

• You should not use Unique id for different elements( use as class.Here i used name attribute to trigger the call ).
• Added return false to avoid default HTML form submit behaviour.

The following code will help you to solve the problem.

$('#project-form').on('click', '[name=deleteProject]', () => {
  deleteProject();
  return false;
});