Ajax to send all POST form values to php file

Question

I have the following script which tries to send all the form data to login_processor.php file.

<script>
        $( document ).ready(function() {
            $("#submit").click(function(){
                var name = $("#name").val();
                var email = $("#email").val();
                var FD = new FormData($("#main");
                if(name=="" || email==""){
                    $("#display").html("Please fill all fields");
                }else{
                    $.ajax({
                        type: "POST",
                        url: "login_processor.php",
                        processData: false,
                        contentType: false,
                        data: FD,
                        success: function(result){
                            $("#display").html(result);
                            
                            $("#display").fadeTo(2000, 500).slideUp(500, function(){
                                $("#display").slideUp(500);
                            });
                        }
                    });
                }
                return false;
                
            });
           });
     </script>

My form got many text inputs, drop down menu, checkbox arrays etc. How can I get all the form values to my php file? For example, textbox values, selected dropdown values, selected checkbox values etc. With the above code, it is not working. I am not sure what am I doing wrong.Could someone help?

Edit 1 Issue found to be due to missing ). But still it is not capturing my checkboxarray values. My checkbox as below. It is getting data from mysql database and showing as checkboxes

<?php
   while($oaNamesQueryRow = mysqli_fetch_array($oaNamesQueryExecute)){
    $oaName = $oaNamesQueryRow['oaName'];
    echo '<div class = "checkbox-group" required style="float:left; margin-right: 25px;"><input class="checkBoxes" type="checkbox" name="checkBoxArray[]" value="'.$oaName.'" '; ?> <?php if(in_array($oaName,$_POST['checkBoxArray'])) echo "checked='checked'"; ?> <?php echo '> '.$oaName.'</div>';
   }
 ?>

You have missed a `)` near `new FormData..` just add `new FormData($("#main"));` also check your console is there any error ? — Swati, Sep 05 '19 at 04:00
Noted about the `)`. It is now able to get the values. However, it is not capturing the checkboxarray values. Do you know why? — Anu, Sep 05 '19 at 04:39
In your browser's dev tool, in the Network tab, do you see the data being sent to the server? If so, is checkboxarray in there? What if you console.log(FD) right after defining it? — VVV, Sep 05 '19 at 04:46
@VVV Sorry. I am not so expert in this. I think I am making some mistake of receiving the array. In my php script, I define the following way to receive all the checked checkbox value. I think it is not correct. Can you tell me how to do it? I am getting the value like `$checkbox = $_POST['checkBoxArray'];`. This is definitely not getting an array. This should be the mistake — Anu, Sep 05 '19 at 04:51
Try `var_dump($_POST);` and see what does it gives .Also get values like -> `$checkbox= explode("," ,$_POST["checkBoxArray"]);`. — Swati, Sep 05 '19 at 04:58
That is the correct way to get it with PHP. I'm suspecting the problem is that your javascript is not sending the values in the Ajax request. Do you know how to open and use the browser's dev tools? If so, check the data being sent to the server. If not, look for a tutorial on how to use dev tools. It'll be a lot faster to debug. — VVV, Sep 05 '19 at 05:02
@Swati `var_dump($_POST);` showing all the values including checkbox array. So I used as you suggested `$checkbox = explode("," ,$_POST["checkBoxArray"]);` and tried to `echo $checkbox;`. But then it is showing nothing — Anu, Sep 05 '19 at 05:05
@Anu check [this](https://stackoverflow.com/a/14752987/10606400) ,also [here](https://stackoverflow.com/a/19734486/10606400) it will help you to loop through values if they are present. — Swati, Sep 05 '19 at 05:08
@Swati Looping it using for each did the work. Thank you for you time and effort — Anu, Sep 05 '19 at 05:19

score 1 · Accepted Answer · answered Sep 05 '19 at 07:14

I hope this i may help you.Try this

 <script>
        $( document ).ready(function() {
            $("#submit").click(function(){
                var name        = $("#name").val();
                var email       = $("#email").val();
                if(name=='' || email==''){
                    $("#display").html(result);
                }else{
                    $.ajax({
                        type    : "POST",
                        url     : "login_processor.php",
                        data    : formData,
                        cache   : false,
                        success : function(result){
                            $("#display").html(result);
                            $("#display").fadeTo(2000, 500).slideUp(500, function(){
                                $("#display").slideUp(500);
                            });
                        }
                    });
                }
            });
        });
    </script>

Yes,you can do in different ways to post form data to login_processor.php. In data :{'name':name,'email',email} you can post in these ways instead of using data : formData. — kirubha, Sep 05 '19 at 07:30

Nijin P J · Answer 2 · 2019-09-05T05:52:44.047

0

$("#submit").click(function(){
        event.preventDefault();     
            $.ajax({
                type: "POST",
                dataType: "json",
                contentType: "application/json",
                url: "/login_processor.php",
                data: $('form').serialize(),
                success: function (result) {
                    
                }
            });
    }

after that suppose you have username and password as form fields,

<?php
$username=$_POST['username'];
$password=$_POST['password'];

echo $username."<br>";
echo $password;
?>

edited Sep 05 '19 at 05:52

answered Sep 05 '19 at 05:17

Nijin P J

1,302
1
9
15

I got the code working right using another method. But just curious, how your code works too. Lets say after this, how can i get the form data in `login_processor.php` file? – Anu Sep 05 '19 at 05:25
suppose you have 2 inputs named `username` and `password`, you can take it as `$user = $POST['username'];` `$pass = $POST['password'];` – Nijin P J Sep 05 '19 at 05:28
I did that way. But not getting any output. `contentType:` is this some location of some files? I gave exactly like how you posted for contentType. Not sure if that is the problem – Anu Sep 05 '19 at 05:36
remove content type and check then. – Nijin P J Sep 05 '19 at 05:37
@Anu check this. ive modified my solution – Nijin P J Sep 05 '19 at 05:53
somehow, it is still not working. Anyway I have another working code. I will stick to that for now. Thank you for trying to help me out – Anu Sep 05 '19 at 06:01

Ajax to send all POST form values to php file

2 Answers2