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.
Change $('#news_form').ajaxSubmit(options);
to $('#login_form').ajaxSubmit(options);
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.