Question

Apologies if this has been answered before (I couldn’t find the answer when I searched the archives)

I’ve got a page protected by a password:

<?php

if($_POST['pw'] == 'pw')
{
    //Page content
} else
{
    //Display password form
}
?>

Within the page content, I’ve got another form, which I want to submit using jQuery, and have the following code:

<script type='text/javascript'>

  var dataString = $('input#input1').val();  

  $(function() {  

  $('#submit').click(function()
  {  
    $.ajax({  
      type: 'POST',  
      url: 'p2.php',  
      data: dataString, 
      dataType: html,
      success: function(data2) {
        $('#testResult').html(data2);
      }  
    });  
    return false; 
  });
});

</script>

<form name='form1' id='form1' action=''>  
  <fieldset>  
    <label for='input1' id='input1_label'>Input 1</label>  
    <input type='text' name='input1' id='input1' size='30' />  

    <input type='submit' value='Update / reset' id='submit' class='buttons' />
   </fieldset>  
</form> 

<div id='#testResult'></div>;

However, clicking submit then sends the form to p1.php?input1=test (i.e., the data string is being sent to p1.php, not p2.php). If I edit the code and remove dataType:html and the 2 references of data2, then this doesn’t happen (infact, nothing happens, so I assume that jQuery is submitting the data to the form). I’ve also changed the type to ‘GET’, incase the 2 POST requests on the same page were causing problems, but this didn’t change the result.

What am I missing to get the information from p2.php (i.e. data2) and displaying it?!

EDIT

Thanks to a comment pointing out a typo, I’ve changed dataType: html to dataType: 'html' – this now doesn’t cause the page to redirect to p1.php?input1=test, but once again, it doesn’t do anything (when it should still be returning the value of data2)

EDIT 2

I’ve updated the code so dataString is now:

var dataString = $('input#input1').val();   
dataString = 'var1='+dataString;

but this hasn’t made any difference

For clarification, my p2.php just contains the following:

<?php

  echo "<p>HELLO!</p>";

?>

EDIT 3

I made the changes to my code has suggested by Damien below; I get the alert of “works!” but still nothing seems to be returned from p2.php, and nothing is inserted into the #testResult div.

Answer 1

$(function() {  
  $('#submit').click(function()
  {  
    var dataString = $('#form1').serialize();
    $.ajax({  
      type: 'POST',  
      url: 'p2.php',  
      data: dataString, 
      success: function(data2) {
        alert('works!');  // ADDED AFTER UPDATE
        $('#testResult').html(data2);
      },
      /* ADDED AFTER UPDATE */
      error:function(obj,status,error)
      {
         alert(error);
      }
    });  
    return false; 
  });
});

Edit:
In p2.php:

<?php
var_dump($_POST['pw']);
?>

In p2.php you then need to output ( using echo, for example) what you want to be returned as ‘data2’ in your ajax success call.

UPDATE:

Since you’re Ajax request fires succesfully, that means either your post is not passed correctly, or you’re not outputting anything. I’ve re-looked at your code and I saw this:

<input type='text' name='input1' id='input1' size='30' />  

that means you’re fetching the wrong $_POST variable!

Do this:

1. Since you’re sending a name=”input1″, in your p2.php try with:

   <?php
   if(isset($_POST['input1'])
   {
    echo $_POST['input1'];
   }
   else
   {
    echo 'No post variable!';
   }
   

   And in your jquery success:

   success: function(data2) {
          alert(data2);  
          $('#testResult').html(data2);
        },
   

2. That oughta work, if you follow it literally. In the remote possibility it won’t work, forget AJAX, remove the javascript and do a normal post submitting with p2.php as an action of your form 🙂