jQuery AJAX form data serialize using PHP

Question

I am stuck in my code, I need to send data from the form to the check.php page and then process it.

This is my code:

The AJAX part:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var form=$("#myForm");
$("#smt").click(function(){
$.ajax({
        type:"POST",
        url:form.attr("action"),
        data:form.serialize(),
        success: function(response){
            console.log(response);  
        }
    });
});
});
</script>

The form:

<form action="check.php" method="post" name="myForm" id="myForm">
<input type="text" name="user" id="user" />
<input type="text" name="pass" id="pass" />
<input type="button" name="smt" value="Submit" id="smt" />
</form>
<div id="err"></div>

the php part:

$user=$_POST['user'];
$pass=$_POST['pass'];

if($user=="tony")
{
    echo "HI ".$user;   
}
else
{
    echo "I dont know you.";    
}

comment the ajax call and add a simple alert message in that function and tell the result of it. If the form is generated by other code or dynamically added use .on() or .live() depending on the jquery version. — SSS, Jun 03 '14 at 05:46
use chrome's inspect elements after clicking the button. is it show some javascript errors? — AmanS, Jun 03 '14 at 05:48
Your code is correct.It goes to check.php page and displas message in console. If you want replace console.log(response); with alert(response). — Gowri, Jun 03 '14 at 05:48
thanx alot for your response, well with alert its working perfectly, its showing hi Tony when input is tony else "i dont know you", but they are showing in alert, i want them to show in the "err" div, with this code "success: function(response){ $("#err").load("check.php"); }" but when i am using it all the time it show the output of the else case, plese tell me where am i wrong. — gomzy, Jun 04 '14 at 04:42

score 12 · Answer 1 · answered Jun 03 '14 at 08:54

Try this

 $(document).ready(function(){
    var form=$("#myForm");
    $("#smt").click(function(){
    $.ajax({
            type:"POST",
            url:form.attr("action"),
            data:$("#myForm input").serialize(),//only input
            success: function(response){
                console.log(response);  
            }
        });
    });
    });

score 8 · Answer 2 · answered Jun 04 '14 at 12:58

try it , but first be sure what is you response console.log(response) on ajax success from server

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var form=$("#myForm");
$("#smt").click(function(){
$.ajax({
        type:"POST",
        url:form.attr("action"),
        data:form.serialize(),

        success: function(response){
        if(response === 1){
            //load chech.php file  
        }  else {
            //show error
        }
        }
    });
});
});

score 8 · Answer 3 · answered Mar 31 '15 at 19:41

8

I just had the same problem: You have to unserialize the data on the php side.

Add to the beginning of your php file (Attention this short version would replace all other post variables):

parse_str($_POST["data"], $_POST);

answered Mar 31 '15 at 19:41

ToHe

111
1
5

score 4 · Answer 4 · edited Dec 19 '19 at 20:39

4

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    var form=$("#myForm");
    $("#smt").click(function(){
        $.ajax({
            type:"POST",
            url:form.attr("action"),
            data:form.serialize(),
            success: function(response){
                console.log(response);  
            }
        });
    });
});
</script>

This is perfect code , there is no problem.. You have to check that in php script.

edited Dec 19 '19 at 20:39

scylo

49
6

answered Aug 03 '15 at 12:17

Ananta Prasad

3,655
3
23
35

1

What else is needed in order to stay on the same page after the form is submitted? – Aaron Liu Nov 12 '15 at 17:25
prevent reload of page on submit if form is used – Ananta Prasad Oct 25 '16 at 10:43

score 1 · Answer 5 · edited Dec 19 '19 at 20:40

Try this its working..

    <script>
      $(function () {
          $('form').on('submit', function (e) {
              e.preventDefault();
              $.ajax({
                  type: 'post',
                  url: '<?php echo base_url();?>student_ajax/insert',
                  data: $('form').serialize(),
                  success: function (response) {
                      alert('form was submitted');
                  }
                  error:function() {
                      alert('fail');
                  }
              });
          });
      });
    </script>

Chetan Gawai · Answer 6 · 2014-06-04T10:57:29.100

0

Change your code as follows -

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var form=$("#myForm");
$("#smt").click(function(){
$.ajax({
        type:"POST",
        url:form.attr("action"),
        data:form.serialize(),

        success: function(response){
        if(response == 1){
              $("#err").html("Hi Tony");//updated
        }  else {
            $("#err").html("I dont know you.");//updated
        }
        }
    });
});
});
</script>

PHP -

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

if($user=="tony")
{
    echo 1;   
}
else
{
    echo 0;    
}
?>

edited Jun 04 '14 at 10:57

answered Jun 03 '14 at 07:07

Chetan Gawai

2,361
1
25
36

1

yeah its working this way but for a second thoughts lets say we dont want to alert it, we want to show the result in the div "err", with this code "success: function(response){ $("#err").load("check.php"); }" but when doing this all the time its going into the else case and shows "i dont know you", what am i doing wrong? – gomzy Jun 04 '14 at 04:48

score 0 · Answer 7 · answered Dec 23 '20 at 12:43

<form method="post" name="myForm" id="myForm">

replace with above form tag remove action from form tag. and set url : "check.php" in ajax in your case first it goes to jQuery ajax then submit again the form. that's why it's creating issue.

i know i'm too late for this reply but i think it would help.

score -1 · Answer 8 · edited Nov 14 '14 at 14:53

-1

Your problem is in your php file. When you use jquery serialize() method you are sending a string, so you can not treat it like an array. Make a var_dump($_post) and you will see what I am talking about.

edited Nov 14 '14 at 14:53

Boris Zagoruiko

12,705
15
47
79

answered Nov 14 '14 at 14:21

Alcides

1

3

Do you have a solution ? Otherwise this should be a comment. – DatRid Nov 14 '14 at 14:41

jQuery AJAX form data serialize using PHP

8 Answers8

Linked