Onclick ajax is not working

Question

When I click on submit button info of textarea tag should be sent to mail using ajax.can anyone helpme.thankyou.

$(document).on("click", "#submit-btn", function() {

are you doing cross domain ajax call? is your web page also a part of `ivr.callxl.com`? — vijayP, Jun 13 '16 at 08:34
You have to prevent on submit button click default behaviour otherwise your form is submited — A. Wolff, Jun 13 '16 at 08:39

score 2 · Answer 1 · edited Jun 13 '16 at 08:38

2

The issue is because you've hooked to the click event of the submit button, not the submit event of the form. This means that the form is still submit as normal, and the response from your AJAX request is ignored.

As mentioned, hook to the submit event of the form to solve the problem and use preventDefault() to stop the standard form submission:

$(document).on("submit", "#yourFormElement", function(e) {
    e.preventDefault();
    $.ajax({
        url: "https://ivr.callxl.com/callXLWeb/SendingEmail",
        type: 'POST',       
        contentType: "application/json; charset=utf-8",
        data: { comment: $("#cmessage").val() },
        dataType: "json",
        success: function (data, textStatus, jqXHR) {
            if (data.success) {
                alert("successfully sent");
            } else {
                // handle error here...
            }
        },
        error: function(jqXHR, textStatus, errorThrown){
            alert(jqXHR.responseText);
            console.log("Something really bad happened " + textStatus);
            $("#errorResponse").html(jqXHR.responseText);
        }
    });
});

Also note that I removed the async property (as true) is the default, and provided an object to the data property so that the values are encoded for you.

You should also ensure that the domain you're calling supports cross domain requests, otherwise your request will be blocked by the Same Origin Policy. If that is the case, then you would need to make the request on the server-side.

edited Jun 13 '16 at 08:38

A. Wolff

74,033
9
94
155

answered Jun 13 '16 at 08:34

Rory McCrossan

331,213
40
305
339

can the issue be because of url? I am suspecting it is in different domain and it may a CORS issue – brk Jun 13 '16 at 08:36
@user2181397 yes that is possibly an issue too. Added a note about it to the answer. – Rory McCrossan Jun 13 '16 at 08:38
1

@A.Wolff thanks. Need to pay attention, not having a good morning :) – Rory McCrossan Jun 13 '16 at 08:39
@user2181397 Check your browser console for any error regarding cross domain request – A. Wolff Jun 13 '16 at 08:40
@user2181397 I just checked and this server doesn't accept cross domain request, nor handling jsonp – A. Wolff Jun 13 '16 at 08:44
https://jsfiddle.net/pf7c4Lv2/ this is the jsfiddle link i tried but it doesnt work.once check it please help me.thankyou. – Dinesh Chandra Jun 14 '16 at 07:22
Check the console you have an error, however as stated above you cannot make a request to this domain as it does not support CORS. You will need to make the request server side. – Rory McCrossan Jun 14 '16 at 07:52
can you explain how to fix it – Dinesh Chandra Jun 14 '16 at 08:22
It's not a trivial task. See this question for more information: http://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy – Rory McCrossan Jun 14 '16 at 08:24

score 1 · Answer 2 · answered Jun 13 '16 at 09:18

1

I think you should do it like this.

$("#submit-btn").on("click",function() {
    $.ajax({
        url: "https://ivr.callxl.com/callXLWeb/SendingEmail",
        type: 'POST',       
        contentType: "application/json; charset=utf-8",
        data: { comment: $("#cmessage").val() },
        dataType: "json",
        success: function (data, textStatus, jqXHR) {
            if (data.success) {
                alert("successfully sent");
            } else {
                // handle error here...
            }
        },
        error: function(jqXHR, textStatus, errorThrown){
            alert(jqXHR.responseText);
            console.log("Something really bad happened " + textStatus);
            $("#errorResponse").html(jqXHR.responseText);
        }
    });
});

answered Jun 13 '16 at 09:18

Shashikant Sharma

496
5
10

first thing you have to change button type from "submit" to "button". . After changing it when you click on submit button you can check in you console there is a error showing something like this . XMLHttpRequest cannot load https://ivr.callxl.com/callXLWeb/SendingEmail. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://fiddle.jshell.net' is therefore not allowed access. – Shashikant Sharma Jun 14 '16 at 07:39
so it it is because you are sending a request on a different domain . If you fix cross-site origin issue this code will work. Thanks – Shashikant Sharma Jun 14 '16 at 07:43

Onclick ajax is not working

2 Answers2