Submitting a form using jQuery

Question

Sorry if the answer was previously given (I could not find the answer when I searched the archives)

I have a password protected page:

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

Inside the contents of the page, I have another form that I want to submit using jQuery, and I 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 the submit button then submits the form to p1.php? input1 = test (i.e. a data string is sent to p1.php, not p2.php). If I edit the code and delete the dataType:html and 2 data2 links, this will not happen (infact, nothing happens, so I assume jQuery sends the data to the form). I also changed type to "GET" if 2 POST requests on the same page caused problems, but that did not change the result.

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

EDIT

Thanks to the comment pointing to a typo, I changed dataType: html to dataType: 'html' - now this does not lead to redirecting the page to p1.php? input1 = test, but again, t do something (when it should still return the value of data2 )

EDIT 2

I updated the code, so dataString now:

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

but it didn’t matter.

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

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

EDIT 3

I made changes to my code suggested by Damien below; I get a warning about "work!". but still nothing is 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 (for example, echo) what you want to return as "data2" in your successful ajax call.

UPDATE:

Since you are executing an Ajax request, this means that your post is not submitted correctly or you are not displaying anything. I reviewed your code and I saw this:

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

this means that you are extracting the wrong $ _POST variable!

Do it:

• Since you are sending name = "input1", try in p2.php:

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

  And in your successful jquery:

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

• This should work if you follow it literally. In the remote feature this will not work, forget AJAX, uninstall javascript and do the usual submission with p2.php as the action of your form :)

Answer 2

 var dataString = $('input#input1').val(); $(function() { $('#submit').click(function(evt) { evt.preventDefault(); $.ajax({ type: 'POST', url: 'p2.php', data: "someval="+dataString, dataType: 'html', success: function(data2) { $('#testResult').html(data2); } }); return false; }); });
var dataString = $('input#input1').val(); $(function() { $('#submit').click(function(evt) { evt.preventDefault(); $.ajax({ type: 'POST', url: 'p2.php', data: "someval="+dataString, dataType: 'html', success: function(data2) { $('#testResult').html(data2); } }); return false; }); }); 

Answer 3

I think you need to prevent the default action of the form. Try the following:

$ ('# Submit'). Press (function (e) {

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

}); });

Answer 4

Data should be formatted as follows:

 variable1=value1&variable2=varlue2 

I also think that you can remove the dataType property.