Question posted in
You can find the official documentation here.

Jquery AJAX DELETE request is also triggering a POST request on the same form

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

Tags:

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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;
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search