Question

I’m having a hard time getting the answer for this…

Am I able to get html elements from a php file with ajax? I have a feeling I’m trying to do something I’m not supposed to do.

I’m using:

.
.
.
<tr>
        <td colspan="3" style="font-size:11px;"><a href="javascript:void(0)" onclick="getData('includes/forgot-passwordajax.php', 'targetDiv')">Forgot Password?</a></td>
    </tr>


   </table></td>
  </tr>
 </table>
</form>
    <div id="targetDiv">
    </div>

And includes/forgot-passwordajax.php is a table with form data, etc. Is this supposed to work?

Edit: Here is the script:

<script language = "javascript">
      var XMLHttpRequestObject = false;

      if (window.XMLHttpRequest) {
        XMLHttpRequestObject = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
      }

      function getData(dataSource, divID)
      {
        if(XMLHttpRequestObject) {
          var obj = document.getElementById(divID);
          XMLHttpRequestObject.open("GET", dataSource);

          XMLHttpRequestObject.onreadystatechange = function()
          {
            if (XMLHttpRequestObject.readyState == 4 &&
              XMLHttpRequestObject.status == 200) {
                obj.innerHTML = XMLHttpRequestObject.responseText;
            }
          }

          XMLHttpRequestObject.send(null);
        }
      }
    </script>

php:

<?php           
<div class='a_login'>
<table class="tabbody"> 
    <tr class="tprowbgcolor">
    <td class="title">Retrieve Password</td></tr>
</table>
<center><BR><BR>
    <table cellpadding="0" cellspacing="0">
    <form name='loginForm' action="forgot-password.php" method="POST">
    <tr><td><img src="<?=SITE_URL?>/images/top-bg.jpg"></td></tr>
    <tr>
    <td class="a_td_color" align="center" valign="top">


    if(isset($_POST['formSubmitted']))
    {
    $email = addslashes(trim($_POST['e_address']));

    if($email=="")  {
      echo '<p>Just kidding? Ehh! <a href="forgot-password.php">try again</a></p>';
    } else  {
      $query    =   "SELECT `Password`, `UserName` FROM users WHERE `Email`='$email'";

      $result   =   mysql_query($query);

      if(mysql_num_rows($result)>0)  {
        $row = mysql_fetch_assoc($result);

        $password=$row['Password'];
        $username=$row['UserName'];
        $to = $email;
        $headers  = 'MIME-Version: 1.0' . "\r\n";
        $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
        $headers .= 'To: '.$username.' <'.$email.'>' . "\r\n";
        $headers .= 'From: Joel Laviolette <[e-mail]>' . "\r\n" .
        'X-Mailer: PHP/' . phpversion();
        $subject = "Here is your password";
        $message = '<p>Hello '.$username.',</p><p>Your password is: ';
        $message .= '<strong>'.$password.'</strong><br><br>';
        $message .= 'You can login here: <a href="'.SITE_URL.'/login2.php">'.SITE_URL.'/login2.php</a></p>';
        $message .= '<p>With Love and gratitude,<br>Joel Laviolette</p>';
        if(mail($to, $subject, $message, $headers)) {
          echo '<p>Your password has been sent. Please check your email.</p>';
        } else  {
          echo '<p>Email could not be sent! Please contact me directly at [e-mail].</p>';
        }
      } else  {
        echo '<p>Email not found! <a class="external" href="forgot-password.php">try again</a></p>';
      }
    }
    } else  {

  <table border='0'>
    <tr>
        <td colspan="3">
    <p>Email Address<br />
    <input type="text" name="e_address" value="" size="20"></p></td>
    </tr>
    <tr>
        <td colspan="3" align="center"><input type="submit" value="Submit" name="submit"><input type="hidden" name="formSubmitted" value='1'></td>
    </tr>
    <tr>
        <td colspan="3">&nbsp;</td>
    </tr>
    </table>
?>

Answer 1

From the PHP you posted, it looks like you enclosed HTML code in <?php ... ?> tags. That is incorrect. You should enclose the PHP code in the tags and leave the HTML outside. And you have an unclosed brace at the end. In your case, that should be (untested):

<div class='a_login'>
<table class="tabbody"> 
    <tr class="tprowbgcolor">
    <td class="title">Retrieve Password</td></tr>
</table>
<center><BR><BR>
    <table cellpadding="0" cellspacing="0">
    <form name='loginForm' action="forgot-password.php" method="POST">
    <tr><td><img src="<?=SITE_URL?>/images/top-bg.jpg"></td></tr>
    <tr>
    <td class="a_td_color" align="center" valign="top">

<?php           
    if(isset($_POST['formSubmitted'])) {
      $email = addslashes(trim($_POST['e_address']));

      if($email=="")  {
        echo '<p>Just kidding? Ehh! <a href="forgot-password.php">try again</a></p>';
      } else  {
        $query    =   "SELECT `Password`, `UserName` FROM users WHERE `Email`='$email'";

        $result   =   mysql_query($query);

        if(mysql_num_rows($result)>0)  {
          $row = mysql_fetch_assoc($result);

          $password=$row['Password'];
          $username=$row['UserName'];
          $to = $email;
          $headers  = 'MIME-Version: 1.0' . "\r\n";
          $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
          $headers .= 'To: '.$username.' <'.$email.'>' . "\r\n";
          $headers .= 'From: Joel Laviolette <[e-mail]>' . "\r\n" .
          'X-Mailer: PHP/' . phpversion();
          $subject = "Here is your password";
          $message = '<p>Hello '.$username.',</p><p>Your password is: ';
          $message .= '<strong>'.$password.'</strong><br><br>';
          $message .= 'You can login here: <a href="'.SITE_URL.'/login2.php">'.SITE_URL.'/login2.php</a></p>';
          $message .= '<p>With Love and gratitude,<br>Joel Laviolette</p>';
          if(mail($to, $subject, $message, $headers)) {
            echo '<p>Your password has been sent. Please check your email.</p>';
          } else  {
            echo '<p>Email could not be sent! Please contact me directly at [e-mail].</p>';
          }
        } else  {
          echo '<p>Email not found! <a class="external" href="forgot-password.php">try again</a></p>';
        }
      }
    } else {
?>

  <table border='0'>
    <tr>
        <td colspan="3">
    <p>Email Address<br />
    <input type="text" name="e_address" value="" size="20"></p></td>
    </tr>
    <tr>
        <td colspan="3" align="center"><input type="submit" value="Submit" name="submit"><input type="hidden" name="formSubmitted" value='1'></td>
    </tr>
    <tr>
        <td colspan="3">&nbsp;</td>
    </tr>
    </table>

<? } ?>

By the way, you could go to the page (includes/forgot-passwordajax.php) in your browser to see what the error message PHP gives.

EDIT: Also, the HTML is a little weird – the form is never closed, and it’s unclear which parts should show up when the form is first shown and which should show after the form had been submitted.