Jump to content

need help sending data to php file and displaying it using ajax


doforumda

Recommended Posts

hi

 

i have following code. it has a problem when i submit username and password it does not display that username and password back.

 

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.4.min.js" type="text/javascript"></script>
<script>
//window.onload = initAll;
function initAll() {
var user = $("input#user").val();
var pass = $("input#pass").val();

var url = 'login.php';
var params = 'user=' + user + '&pass=' + pass;
alert (params);
var xhr = new $.ajax(url,
						{
							type: 'POST',
							data: params,
							success: showResponse
						});
}

function showResponse() {
var data = xhr.responseText;
$("#content").html(data);
}
</script>
<title>Untitled Document</title>
</head>
<body>
<div id="content"></div>
<form>
Username:<br />
<input type="text" name="user" id="user" /><br />
    Password:<br />
    <input type="password" name="pass" id="pass" /><br />
    <input type="button" name="submit" id="submit" value="Login" onclick='initAll()' />
</form>
</body>
</html>

 

login.php

<?php
$user = $_POST['user'];
$pass = $_POST['pass'];

echo $user.'<br>';
echo $pass.'<br>';

?>

Link to comment
Share on other sites

You've made the client side code allot more complex than need be.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.4.min.js" type="text/javascript"></script>
<script>
  $(document).ready(function() {
    $('#submit').submit(function() {
      $.ajax({
        url: 'login.php',
        type: 'POST',
        data: {
          user: $("input#user").val(),
          pass: $("input#pass").val()
        },
        dataType: 'html',
        success: function(d) {
          $("#content").html(d);
        }
      });  
    });
  });
</script>
<title>Untitled Document</title>
</head>
<body>
<div id="content"></div>
<form>
   Username:<br />
   <input type="text" name="user" id="user" /><br />
    Password:<br />
    <input type="password" name="pass" id="pass" /><br />
    <input type="button" name="submit" id="submit" value="Login" />
</form>
</body>
</html>

Link to comment
Share on other sites

You've made the client side code allot more complex than need be.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.4.min.js" type="text/javascript"></script>
<script>
  $(document).ready(function() {
    $('#submit').submit(function() {
      $.ajax({
        url: 'login.php',
        type: 'POST',
        data: {
          user: $("input#user").val(),
          pass: $("input#pass").val()
        },
        dataType: 'html',
        success: function(d) {
          $("#content").html(d);
        }
      });  
    });
  });
</script>
<title>Untitled Document</title>
</head>
<body>
<div id="content"></div>
<form>
   Username:<br />
   <input type="text" name="user" id="user" /><br />
    Password:<br />
    <input type="password" name="pass" id="pass" /><br />
    <input type="button" name="submit" id="submit" value="Login" />
</form>
</body>
</html>

 

when i press login button it does not do anything. and also it is not displaying the username and password which i want to do

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.