AJAX call using post. Upon success I want to display the PHP page within a div.

AJAX call using post. Upon success I want to display the PHP page within a div.

Hi everyone,

I have a standard form and upon the user submitting it, I send the information to a PHP page via jQuery and the $.ajax with a POST type. Upon success I can get the code to display a div containing static content like "Data Collected" but I would like to instead display dynamic content via the div.

Here is the code I am using along with the three different types of success: functions I tried. Again, only the static content works.

HTML
  1. <div class="container">
        <form id="submit" method="post" action="">
            <fieldset>
                <label for="fname">First Name:</label>
                <div class="div_texbox">
                <input id="fname" class="text" name="fname" size="20" type="text" />
                </div>
                <label for="lname">Last Name:</label>
                <div class="div_texbox">
                <input id="lname" class="text" name="lname" size="20" type="text" />
                </div>
                <div class="button_div">
                <button class="buttons">Submit</button>
                </div>
            </fieldset>
        </form>
    </div><!--end container-->
    <p class="codeLinks"><a href="demo.xml">XML</a> | <a href="demoXSL.xml">XSLT</a> | <a href="http://validator.w3.org/check?uri=referer">W3C</a><span class="success" style="display: none;"> | </span></p>
















JQUERY FUNCTION
  1. $(document).ready(function(){
        $("form#submit").submit(function() {
        // we want to store the values from the form input box, then send via ajax below
        var fname     = $('#fname').attr('value');
        var lname     = $('#lname').attr('value');
            $.ajax({
                type: "POST",
                url: "ajax.php",
                data: "fname="+ fname +"&lname="+ lname,
                success: function(){
                    /*$(function(){$('.success').fadeIn();});*/ <-- WORKS. Will display content in div.
                    /*$(function(){$('span.success').fadeIn("echo.php");});*/ <-- Nope.
                    /*$('.success').load("echo.php");*/ <--Nope
                }
            });
        return false;
        });
    });
















PHP
  1. $fname        = trim($_POST['fname']);
    $lname        = trim($_POST['lname']);
       
    echo $fname . ", your data has been received.";



I can get it so it echos ", your data has been received" but the variable isn't set.

Any advice? Thanks.