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
– SSS, Commented Jun 3, 2014 at 5:46
use chrome's inspect elements after clicking the button. is it show some javascript errors? — AmanS
– AmanS, Commented Jun 3, 2014 at 5: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
– Gowri, Commented Jun 3, 2014 at 5:48

Harish U Warrier · Accepted Answer · 2014-06-03 08:54:44Z

12

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);  
            }
        });
    });
    });

answered Jun 3, 2014 at 8:54

Harish U Warrier

6065 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

A l w a y s S u n n y · Accepted Answer · 2014-06-04 12:58:33Z

8

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
        }
        }
    });
});
});

answered Jun 4, 2014 at 12:58

A l w a y s S u n n y

38.8k9 gold badges68 silver badges120 bronze badges

Comments

ToHe · Accepted Answer · 2015-03-31 19:41:01Z

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, 2015 at 19:41

ToHe

1112 silver badges5 bronze badges

Comments

scylo · Accepted Answer · 2019-12-19 20:39:41Z

5

<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, 2019 at 20:39

scylo

477 bronze badges

answered Aug 3, 2015 at 12:17

Ananta Prasad

3,8683 gold badges26 silver badges36 bronze badges

3 Comments

Aaron Liu Over a year ago

What else is needed in order to stay on the same page after the form is submitted?

Ananta Prasad Over a year ago

prevent reload of page on submit if form is used

Razvan Zamfir Over a year ago

How do we get certain data from the response, like article_id given that console.log(data) is article_id=300&parent_id=445&msg=Test?

karthikeyan · Accepted Answer · 2019-12-19 20:40:35Z

1

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>

edited Dec 19, 2019 at 20:40

user5085788

answered Sep 12, 2017 at 13:39

karthikeyan

1821 silver badge10 bronze badges

Comments

Chetan Gawai · Accepted Answer · 2014-06-04 10:57:29Z

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 4, 2014 at 10:57

answered Jun 3, 2014 at 7:07

Chetan Gawai

2,4011 gold badge27 silver badges36 bronze badges

1 Comment

gomzy Over a year ago

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?

Zeeaan Ahmad · Accepted Answer · 2020-12-23 12:43:54Z

0

<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.

answered Dec 23, 2020 at 12:43

Zeeaan Ahmad

331 silver badge3 bronze badges

Comments

Boris Zagoruiko · Accepted Answer · 2014-11-14 14:53:13Z

-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, 2014 at 14:53

Boris Zagoruiko

13.2k15 gold badges53 silver badges80 bronze badges

answered Nov 14, 2014 at 14:21

Alcides

1

1 Comment

DatRid Over a year ago

Do you have a solution ? Otherwise this should be a comment.

Collectives™ on Stack Overflow

jQuery AJAX form data serialize using PHP

8 Answers 8

Comments

Comments

Comments

3 Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

Comments

Comments

3 Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related