1

I have an HTML form which is correctly loaded into the DOM and displayed with the form coming into the DOM via a jQuery ajax call.

I submit the form data to a PHP module again jQuery ajax-called. From the network traffic I can see that the form data are being correctly sent to the called PHP module and that the called PHP module is echo-ing a text response, but the response is being displayed on a blank page and is not being returned to the calling script.

Can anyone please help me with what I am doing wrong?

jQuery 3.1.1 under Windows 7 and localhost/XAMPP/SSL.

I have tried lots of ajax submission approaches from SO but in each case the data are correctly sent to the called PHP module which in turn correctly echo's some text but in every case that echo'd text is displayed on a blank page.

/* attach a submit handler to the form */
$("#contact").submit(function(event) 
    {           
        /* stop form from submitting normally */
                   event.preventDefault();

        /* get the action attribute from the <form action=""> element */
        var $form = $(this),
          url = $form.attr('action');

        /* Send the data using post */
        $.ajax({
           url: url,
           method: "POST",
           data: {message:$('#message').val()}, // received as a $_POST array
           dataType: text,
           success: function(response)
                {
                    alert(response);
                }
        })  <!-- end the ajax call -->

    })  // end submit function*

In a nutshell, the success code never executes as the data are not being returned to it even though the called program is echoing what I expect.

i.signori
  • 585
  • 3
  • 16
user3176995
  • 53
  • 8
  • response can be type object, in this case alert cant show it. It is better to use `console.log("response: ", response);` – Vasyl Zhuryk Nov 05 '19 at 08:03
  • This happens when the form is POSTing rather than calling your ajax (or doing both). Worth a try: change your button from `button type=submit` to `button type=button` and hook into `$(button).click` rather than form submit. – freedomn-m Nov 05 '19 at 08:19
  • 1
    You need to " return " response from the method your calling from ajax – Ashwin Bhamare Nov 05 '19 at 08:27
  • @VasylZhuryk — No. It is `dataType: "text"` so it will always be a string. – Quentin Nov 05 '19 at 09:27
  • @freedomn-m — No, the code in the question has `event.preventDefault();` – Quentin Nov 05 '19 at 09:27
  • @AshwinBhamare — No, the PHP needs to `echo` it … and the OP says that the Network traffic shows that it is working. – Quentin Nov 05 '19 at 09:28
  • 1
    If `success` isn't firing, add an `error` method. Also, look on the Console tab of the browser's developer tools to check for error messages. Also, check the Network tab, you've confirmed that it has data in it already, but check the responses HTTP status code — if it isn't 200 then that would explain the problem. – Quentin Nov 05 '19 at 09:29
  • @Quentin yes, I saw that, but this *is* typical form-post-return behaviour so maybe it's not hitting that event to hit the preventDefault. Hence the "worth a try" rather than "this will fix it". Or were you referring to "need to `return`" which wasn't my comment and isn't needed with preventDefault. – freedomn-m Nov 05 '19 at 11:12
  • @Quentin *"No. It is dataType: "text""* - is it? :) – freedomn-m Nov 05 '19 at 11:53
  • @freedomn-m — Ah. Undefined variable. OP needs to provide a real [mcve] – Quentin Nov 05 '19 at 15:59
  • I had a closer look at the network traffic and freedom-m was right. The form was being submitted, not the ajax call. I did as was suggested and it's all OK now. Many thanks for the feedback - much appreciated. – user3176995 Nov 05 '19 at 22:25

1 Answers1

1

The issue is that you have a javascript error:

Uncaught ReferenceError: text is not defined

This code:

$.ajax({
    type: text,

needs to be

$.ajax({
    type: "text",

as there's a javascript error, the e.preventDefault doesn't kick in, so the form does a full post and displays your php output in a new window.

See the comment on this answer:

https://stackoverflow.com/a/19454378/2181514

This is the only method suggested which prevents the page from refreshing even if there is a Javascript error

(change to type=button to prevent the form from posting)

freedomn-m
  • 27,664
  • 8
  • 35
  • 57