Ajax call inside form?

Question

I have this function :

function deleteDocument(e, document_id, property_id) {
  e.preventDefault();
  $('#editDocumentLoader').css('display', 'flex');
  $.ajax({
    type: "POST",
    dataType: "json",
    url: window.location.protocol + "/profile/property/document/delete/" + document_id,
    data: {
      'document_id': document_id,
      'property_id': property_id,
      '_token': CSRF_TOKEN
    },
    cache: false
  }).done(function(response) {
    alert(response);
    if (response != "") {
      try {
        $('#document_table').html(response.data);
        $('#editDocumentLoader').hide();
      } catch (e) {
        console.log(e)
      }

    } else {
      console.log("no response");
    }
  }).fail(function(response) {
    console.log(response);
    if (response.status == 422) {
      var errors = response.responseJSON;
    }
  });
}

In view i have this that is inside form:

<button onclick="deleteDocument(event,{{$document->id}},{{$property->id}})"><i class="fa fa-times"></i></button>

From some reason it submit my form and then my ajax call is not working. Any suggestion why is that ?

What does "ajax call is not working" mean? Does it throw an error? Does the request return an error response? Is the response wrong? — JJJ, Feb 24 '17 at 11:32
actualy i dont get anything because it submit form and it not enter in ajax call — None, Feb 24 '17 at 11:43
Then why did you say that it returns an error if it doesn't? — JJJ, Feb 24 '17 at 11:45
`url: window.location.protocol + "/profile/property/document/delete/" + document_id` - that will get you a result url of the form `http:/profile/property/document/delete/123` - do you really think it makes sense to try and request _that_? — CBroe, Feb 24 '17 at 11:47

score 0 · Answer 1 · edited May 23 '17 at 12:00

0

The default type of button is submit : What is the default button type?

You have 2 options: Modify function to return false and change your html to :

<button onclick="return deleteDocument(event,{{$document->id}},{{$property->id}})"><i class="fa fa-times"></i></button>

Change button type:

<button type="button" onclick="deleteDocument(event,{{$document->id}},{{$property->id}})"><i class="fa fa-times"></i></button>

edited May 23 '17 at 12:00

Community

1
1

answered Feb 24 '17 at 11:35

Baz G

154
5

option 1 here will make no difference. It doesn't affect the fact that the separate submit event is taking place. Option 2 is valid though. – ADyson Feb 24 '17 at 11:41
You can cancel a form with return false should stop the form even submit even triggering. You can also do it on the form with an onsubmit instead but option one should still work. – Baz G Feb 24 '17 at 12:34

score 0 · Answer 2 · answered Feb 24 '17 at 11:40

0

This is almost certainly because you're not handling the "submit" event of the form, only the "click" event of the button.

Set the button's type attribute to type="button" so that it isn't an automatic submit button (the default type if you don't specify it is "submit" which means that any click on it will cause the form's "submit" event to trigger as well. Therefore, your form is submitting and doing a full postback and refreshing the page before your ajax call gets chance to run (or maybe it does run, but you never see the result).

<button type="button" onclick="deleteDocument(event,{{$document->id}},{{$property->id}})"><i class="fa fa-times"></i></button>

should fix it.

answered Feb 24 '17 at 11:40

ADyson

57,178
14
51
63

i added type button but again it submit form – None Feb 24 '17 at 11:43
are you sure there is no other code on the page which could be affecting it? Can you make a JSFiddle which demonstrates the problem? Buttons with type="button" should never cause a form submission. – ADyson Feb 24 '17 at 11:48
ok, good. but that's a separate issue. What I pointed out was stopping your ajax from even running (or at least stopping you seeing the results). Changing the dataType is about getting the ajax call itself to work. – ADyson Feb 24 '17 at 13:08

Ajax call inside form?

2 Answers2