success message not appearing after ajax form submitted

Question

I have prepared one HTML form backed with Jquery and PHP. The form is giving the correct out put in PHp but when the form is submitted, it is not showing the success message & not getting the fields empty. The code is given below:

   function sendContact() {
        event.preventDefault();

        var valid;
        valid = validateContact();
        if (valid) {
            jQuery.ajax({
                // input submisssion though Ajax
                url: "xxxx.php",
                data: 'userName=' + $("#userName").val() + '&userEmail=' + $("#userEmail").val() + '&subject=' + $("#subject").val() + '&content=' + $(content).val(),
                type: "POST",
                success: function (data) {
                    // Thankyou message on sucessful submission.
                    $("#mail-status").html(data);
                    $('#mail-status').show();

                    // Clear the form.
                    $('#userName').val('');
                    $('#userEmail').val('');
                    $('#content').val('');
                },
                error: function () {
                }
            });
        }
    }

    //error checking
    function validateContact() {
        var valid = true;
        $(".InputBox").css('background-color', '');
        $(".info").html('');

        if (!$("#userName").val()) {
            $("#userName-info").html("(required)");
            $("#userName").css('background-color', '#FFFFDF');
            valid = false;
        }
        if (!$("#userEmail").val()) {
            $("#userEmail-info").html("(required)");
            $("#userEmail").css('background-color', '#FFFFDF');
            valid = false;
        }
        if (!$("#userEmail").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {
            $("#userEmail-info").html("(invalid)");
            $("#userEmail").css('background-color', '#FFFFDF');
            valid = false;
        }
        if (!$("#content").val()) {
            $("#content-info").html("(required)");
            $("#content").css('background-color', '#FFFFDF');
            valid = false;
        }

        return valid;
    }

The AJAX library used is: https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript The HTML Code is:

<div id="frmContact">
<div id="mail-status" style="display: none;">Thanking you.</div>

        <label style="padding-top:20px;">Name</label><span id="userName-info" class="info"></span><br/>
        <input type="text" name="userName" id="userName" class="InputBox"><br>

        <label>Email</label><span id="userEmail-info" class="info"></span><br/>
        <input type="text" name="userEmail" id="userEmail" class="InputBox"><br/>

        <label>Content</label><span id="content-info" class="info"></span><br/>
        <textarea name="content" id="content" class="InputBox" cols="25" rows="6"></textarea><br/>

        <button name="submit" class="btnAction" onClick="sendContact();">Send</button>
</div>

I have checked no of sites & googled for the correct code but could not find?. Could you one spot the correct one please?

In the browser console what message do you get? Can you put a console.log('message') in your ajax call, and see which message gets printed in console? — Sahil, Jul 06 '16 at 10:25
The cosole message is showing: XMLHttpRequest cannot load http://www.xxxx.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. — user1508939, Jul 06 '16 at 10:27
Then how is the ajax request getting submitted in backend. Is it storing the data which you are passing in backend? — Sahil, Jul 06 '16 at 10:28
Maybe this http://stackoverflow.com/a/20035319/4270737 and this http://stackoverflow.com/a/8456586/4270737 is your problem? — Slico, Jul 06 '16 at 10:30
In your php file, in the first line put this `header('Access-Control-Allow-Origin: *'); ` . SHould work after that. — Gogol, Jul 06 '16 at 10:41
Possible duplicate of ["No 'Access-Control-Allow-Origin' header is present on the requested resource"](http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource) — Maksym Semenykhin, Jul 06 '16 at 10:41
PHP Code: if (count($_POST) == 0) die("Need to POST"); $name = $_POST['userName']; $email = $_POST['userEmail']; $message = $_POST['content']; $email_body = "Name: $name\n". "Email: $email\n". "Message: $message\n"; //Email sending to $email_from = 'xyz@xxxx.xxxx'; $email_subject = "my-form"; $to = "abc@xxxxx.xxx"; $headers = "From: $email_from \r\n"; //Send the email! mail($to, $email_subject, $email_body, $headers); — user1508939, Jul 06 '16 at 10:43

Lorenzo · Answer 1 · 2016-07-06T10:36:53.507

1

Your error

XMLHttpRequest cannot load xxxx.php. No 'Access-Control-Allow-Origin' header is present on the requested resource.

is saying that in your config file you have not any information saying what to do for CORS (cross origins) request so you must enable CORS on your platform... see here: http://enable-cors.org/server.html and choose your platform (Tomcat...Apache...)

Also check for browser support for CORS here: http://enable-cors.org/client.html

edited Jul 06 '16 at 10:36

answered Jul 06 '16 at 10:31

Lorenzo

673
1
11
25

@Loeezo, Could you correct my code please? As i am newbee to this ajax – user1508939 Jul 06 '16 at 10:48
if the error you are reading is always this:XMLHttpRequest cannot load xxxx.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. you MUST correct your config file and add the lines saying what to do for cross origin request aka CORS – Lorenzo Jul 06 '16 at 10:49
where are you running your application? Tomcat? Apache? i will write the configuration you must copy to your configuration file – Lorenzo Jul 06 '16 at 10:51
which code to be corrected- Is it PHP code , or Jquery code . I have furnished both PHP code & Jquery code – user1508939 Jul 06 '16 at 10:51
neither!!! the CONFIGURATION FILE! like web.config WHERE the php resides – Lorenzo Jul 06 '16 at 10:52
I am hosting the website in godaddy on shared hosting (C-panel), but I have no idea about the configuration. Please help me – user1508939 Jul 06 '16 at 10:56
so on your goDaddy folder there's not a configuration file? – Lorenzo Jul 06 '16 at 10:58
I have no idea about .htaccess file? – user1508939 Jul 06 '16 at 11:03
https://it.godaddy.com/help/what-is-htaccess-2504 here godaddy sayis that you can add an htaccess file, so just add this line on the .htaccess file: Header set Access-Control-Allow-Origin "*" – Lorenzo Jul 06 '16 at 11:04
I have added the line as directed by you in htaccess file. Now it is working with out success message (i.e one the form is submitted, the fields are empty, but thank you message is not showing). Also I checked in IE and Chore both are working but in mozila fire fox it is not working – user1508939 Jul 06 '16 at 11:21
in the code i see there's not a thank you message...put an alert("thank you") to see if it's working inside the success: function (data) – Lorenzo Jul 06 '16 at 12:11

success message not appearing after ajax form submitted

1 Answers1