Submitting a form with jquery and AJAX

Question

As the topic name says I'm trying to pass variables from a HTML form to a PHP script with jQuery and AJAX. I've done this before, but today I don't have access to the files. PHP won't print the first name and last name. I found some examples, but whatever I do it's the same... What I'm doing wrong in the last few days?

This is the HTML code:

First Name: <br />
<input type="text" name="fname" /><br />
Last name: <br />
<input type="text" name="lname" /><br /><br />
<input type="submit" name="submit" value="Send" />

Javascript (jQuery):

$(document).ready(function(){
    $('input[name="submit"]').click(function(){
        var fname = $('input[name="fname"]').val();
        var lname = $('input[name="lname"]').val(); 

        $.ajax({
            type: 'POST',
            url: 'index.php',
            data: {fname:fname, lname:lname},
            dataType:"json"
        });

    }); 
});

PHP:

if(isset($_POST['fname']) && isset($_POST['lname'])){
    $fname = $_POST['fname'];
    $lname = $_POST['lname'];
    echo $fname;
    echo "<br />";
    echo $lname;    
}

Answer 1

Either change your PHP to

if(isset($_POST['fname']) && isset($_POST['lname'])){
    $fname = $_POST['fname'];
    $lname = $_POST['lname'];
    $string = $fname."<br />".$lname;
    echo $string;    
}

And your jQuery to

$(document).ready(function(){
    $('input[name="submit"]').click(function(){
        var fname = $('input[name="fname"]').val();
        var lname = $('input[name="lname"]').val(); 

        $.ajax({
            type: 'POST',
            url: 'index.php',
            data: {fname:fname, lname:lname},
            success: function(response){
               console.log(response);
               // YOUR OWN LOGIC
               // IE: $('#my_div').append(response);
            }

        });

    }); 
});

Or change your PHP to

if(isset($_POST['fname']) && isset($_POST['lname'])){
    $response = array();
    $response['fname'] = $_POST['fname'];
    $response['lname'] = $_POST['lname'];
    echo json_encode($response);  
}

And your jQuery to

$(document).ready(function(){
    $('input[name="submit"]').click(function(){
        var fname = $('input[name="fname"]').val();
        var lname = $('input[name="lname"]').val();

    $.ajax({
        type: 'POST',
        url: 'index.php',
        data: {fname:fname, lname:lname},
        dataType:"json"
        success: function(response){
           response = eval(response);
           console.log('First name:' + response.fname);
            console.log('Last name:' + response.lname);
               // YOUR OWN LOGIC
               // IE: $('#my_div').append('Last name: ' + response.lname);
        }

    });

  }); 
});

I haven't tested any of it but it should put you on the right path. You can also use beforeSend and error / fail callbacks to debug and don't forget to check for a response (Firebug is great for this) it helps a lot.

Answer 2

Try to implement the "success" function in your ajax request.

$.ajax({
            type: 'POST',
            url: 'index.php',
            data: {fname:fname, lname:lname},
            dataType:"json",
            beforeSend: function() {

            },
            complete: function() {

            },
            error: function(xhr, ajaxOptions, thrownError) {

            },
            success: function(result) {
                //-- success! 
                alert('it works!');
            }
        })