Ajax call and returning result

Question

I don't know what i did wrong in the ajax call. I want to return the data back to my script and work with it but its not returning result. Here are some things i will like to clarify as well as i am new to ajax programming. if the ajax call is successful and it returns result to the script. Where in the script will the result be. Will i have to create an array that holds the result or ... Here is the html

   <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" id="reserveform">
    <div id="response"></div>
        <div>
        <label>Name</label><input type="text" name="name" id="nameid">
    </div>
    <div>
        <label>Phone Number</label><input type="text" name="phone" id="phoneid">
    </div>
        <div>
        <button type="submit" class="btn" id="btnsubmit">Submit</button>
    </div>
   </form>
         <div id="success"></div>


//my script

$('#btnsubmit').click(function(e){
    e.preventDefault();
        var nameid = $('#nameid').val();
    var phoneid = $('#phoneid').val();
        var validate_msg = '';
       if (nameid == ''){
        validate_msg = '<p> Name is Required. </p>';    
    }
    if (phoneid == '' || ($.isNumeric(phoneid) == false)){
        validate_msg += '<p> Phone field is either empty or non numeric. </p>';
    }

    if (validate_msg != ''){
    $('#response').addClass('error').html('<strong>Please correct the errors below </strong>' +  validate_msg);
    } else {
        var formData = $('form #reserveForm').serialize();
        submitForm(formData);
    }
});


    function submitForm(formData){
        $.ajax({
            type: 'POST',
            url: 'reservation.php',
            data:formData,
            dataType:'json',
            success: function(data){
                $("#success").html(data);
            },
            error: function(XMLHttpResponse, textStatus, errorThrown){
                    $('#success').removeClass().addClass('error').html('<p>There was an ' + errorThrown + ' due to ' + textStatus + 'condition');
            }
        });

    }

Answer 1

If you are trying ajax form submission and need to populate the result in the success div without refresh, you need return false

Don't use

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" id="reserveform">

Here don't need the action in form, try like

<form id="reserveform" onsubmit="return submitForm();">

In function use form serialize so all input elements value in form will available

function submitForm(){
        var formData = $("#reserveform").serialize();
        $.ajax({
            type: 'POST',
            url: 'reservation.php',
            data:formData,
            dataType:'json',
            success: function(data){
                $("#success").html(data);
            },
            error: function(XMLHttpResponse, textStatus, errorThrown){
                    $('#success').removeClass().addClass('error').html('<p>There was an ' + errorThrown + ' due to ' + textStatus + 'condition');
            }
        });
        return false; // use this otherwise the form will be submitted and results an entire page refresh
    }

Answer 2

please try this

you have to put the btnsubmit click event inside onload or document ready

 $(document).ready(function()
    {

     $('#btnsubmit').click(function(e){
        e.preventDefault();
            var nameid = $('#nameid').val();
        var phoneid = $('#phoneid').val();
            var validate_msg = '';
           if (nameid == ''){
            validate_msg = '<p> Name is Required. </p>';    
        }
        if (phoneid == '' || ($.isNumeric(phoneid) == false)){
            validate_msg += '<p> Phone field is either empty or non numeric. </p>';
        }

        if (validate_msg != ''){
        $('#response').addClass('error').html('<strong>Please correct the errors below </strong>' +  validate_msg);
        } else {
            var formData = $('form #reserveForm').serialize();
            submitForm(formData);
        }
    });

    }

    );

Answer 3

You cant use like this $("#success").html(data); because data is in json format. here, the data is an object. You need to parse it and assign to tags.

Answer 4

I see you configured the form to submit to the same document that you are in already. This is fine, we do this all the time.

However, you are also stopping the form from submitting and then using AJAX to submit the values. You specify reservation.php as your ajax processor. Is this the same PHP page you are on already? If so, then I know what the problem is: you can't do that.

By design, AJAX must use an external PHP file to process the AJAX. If you try to do this inside the same document, the AJAX will only echo back the full HTML of the document itself.

Short answer: use an external PHP file. This is by design.

See this other answer for more information about exactly this issue.

See these other posts for further info about AJAX and getting info into the PHP processing script, and returning info back from the PHP processing script:

A simple example

More complicated example

Populate dropdown 2 based on selection in dropdown 1