getting response from a php script

Question

So I created a html site with multiple forms, using jQuery dialog UI for display and jQuery form plugin for ajax submission.

Form looks like this:

<form id="login_form" action="admin.php" method="post">
    Username: <input type="text" name="username" id="username"/><br/>
    Password: <input type="password" name="password" id="password"/>
</form>

...the form options look like this:

$('#login_form').dialog({
    buttons:{
        "Login": function(){
        var options = { 
        success: function(data){
            alert(data);
                $(this).dialog("close");
                $('#news_form').dialog("open");
            },
            timeout: 3000,
            fail: function(data){
                alert('fail');
            },
            clearForm: true
        }; 

        // bind form using 'ajaxForm' 
        $('#news_form').ajaxSubmit(options); 
        },
        "Exit": function(){
            $(this).dialog("close");
        }
    }
});

...and the php file is a simple:

<?php
    $data = 'Herro!';
    echo $data;
?>

Problem is that on success the form returns the html page that was the source of the submit and not 'Herro!' like i anticipated. So what am i doing wrong?

Both the admin.html and the admin.php files are in the same dir.

Also the web is run locally via xampp, but i tried to put it on a web server as well with no improvements.

FINAL EDIT: the problem was in fact because I was calling a different form object in the DOM to submit the data, a form that doesn't have the action property set. Thanks to everyone for a quick solution.

Answer 1

Change $('#news_form').ajaxSubmit(options); to $('#login_form').ajaxSubmit(options);

Answer 2

Try wrapping the result in a JSON object(in the php file) and on the java script end you can now decode this JSON object using any standard json javascript library(you can download one here: http://www.JSON.org/json2.js).

Then you the below code

admin.php:

<?php
$data = json_encode('Herro!');
echo $data;
?>

Then in your html(javascript) you can make this little adjustment:

 <script>
  var result; //adjustment 1
 $('#login_form').dialog({
buttons:{
    "Login": function(){
    var options = { 
    success: function(data){
            result = JSON.parse(data); //adjustment 2
           alert(result);  //adjustment 3
            $(this).dialog("close");
            $('#news_form').dialog("open");
        },
        timeout: 3000,
        fail: function(data){
            alert('fail');
        },
        clearForm: true
    }; 

    // bind form using 'ajaxForm' 
    $('#news_form').ajaxSubmit(options); 
    },
    "Exit": function(){
        $(this).dialog("close");
        }
}
});
</script>

remeber to reference the json2.js file you downloaded in your page. Let me know if this helps you.