jQuery AJAX POST Form

Question

I tried to parse the form value into data variable for body request, but the body always return empty. It's mean my script not working to print the field value type by user into body data. within the HTML form:

<form id="my-form">
    <input type="text" id="MSISDN" name="MSISDN" placeholder="MSISDN"/>
    <input type="text" id="channel" name="channel" placeholder="channel"/>

    <button type="submit">Submit</button>
</form>

Here my javascript

<script>
$.ajax({
    url: 'https://apiurl.com/users',
    dataType: 'text',
    type: 'post',
    headers: {
    'accept': 'application/json;charset=UTF8',
    'content-type': 'application/json',
    'api-key': 'judmkd895849438'
  },
    contentType: 'application/json',


    data: JSON.stringify( { "MSISDN": $('#MSISDN').val(), "channel": $('0').val() } ),
    //data: JSON.stringify( {MSISDN: document.getElementById("MSISDN").value, channel: "0"} ),


    processData: false,
    success: function( data, textStatus, jQxhr ){
        $('#response pre').html( JSON.stringify( data ) );
    },
    error: function( jqXhr, textStatus, errorThrown ){
        console.log( errorThrown );
    }
});
</script>
<div id="response">
    <pre></pre>
</div>

If the request success the response is:

{
    "UserDetails": [
        {
            "status": "Enabled",
            "UserID": "ABCS884784",
            "UserNo": "897363762827"
        }
    ],
    "customerStatus": null,
    "responseCode": 0,
    "responseMessage": "Details Fetched Successfully "
}

but within my code the response always return error

"{\"customerStatus\":null,\"responseCode\":-2,\"responseMessage\":\"Inputs are invalid.\"}" 

that's mean the body value not filling up, can not fond whats wrong with my code so far

Any help will appreciate,

Answer 1

You are calling the ajax immediately after load but you need to call it on submit try this.

  $('#my-form').submit(function () {
    $.ajax({
        url: 'https://apiurl.com/users',
        type: 'post',
        headers: {
        'accept': 'application/json;charset=UTF8',
        'content-type': 'application/json',
        'api-key': 'judmkd895849438'
      },
        contentType: 'application/json',
        data: { "MSISDN": $('#MSISDN').val(), "channel": $('#channel').val() },
        success: function( data, textStatus, jQxhr ){
            $('#response pre').html( JSON.stringify( data ) );
        },
        error: function( jqXhr, textStatus, errorThrown ){
            console.log( errorThrown );
        }
    });
 });

Answer 2

Remove dataType: 'text' as jQuery is intelligent to guess what (xml, json, script, or html) to expect in the response. Also remove processData: false as you are not sending DOMDocument, or other non-processed data.

$('#my-form').submit(function () {
    var formData = {
         MSISDN : $('#MSISDN').val(),
         channel : $('#channel').val()
    };
    $.ajax({
        url: 'https://apiurl.com/users',
        type: 'post',
        headers: {
        'accept': 'application/json;charset=UTF8',
        'content-type': 'application/json',
        'api-key': 'judmkd895849438'
      },
        contentType: 'application/json',
        data: JSON.stringify(formData),
        success: function( data, textStatus, jQxhr ){
            console.log(data);
            $('#response pre').html( JSON.stringify( data ) );
        },
        error: function( jqXhr, textStatus, errorThrown ){
            console.log( errorThrown );
        }
    });
 });