CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Dany
Dany

Reputation: 31

Onclick ajax is not working

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() {

Upvotes: 2

Views: 102

Answers (2)

Shashikant Sharma
Shashikant Sharma

Reputation: 556

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);
        }
    });
});

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

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.

Upvotes: 2

Related Questions