CODEWITHSUNDEEP
phpjqueryajax
Jerry
Jerry

Reputation: 420

AJAX not sending Form Data to PHP

I' sending some form data to PHP via AJAX. The value of the input field is being displayed before the data is sent using AJAX, but in the PHP script the value received is NULL.

$(document).ready(function(){   
    $('#my_form').submit(function(){    
        event.preventDefault();                 
        var form = $('form')[0];
        var formData = new FormData(form);                    
        $.ajax({            
            url: "signup.php",
            enctype: "multipart/form-data",
            cache: false,
            type: "post",
            dataType: "html",
            data: formData,
            processData: false,
            success: function(response){ 
                //do something
            },
            error: function (xhr, ajaxOptions, thrownError) {
               // some alert
            }
        });
    });
});

PHP

<?php
    //.......
    $fname=$_POST['fname']; 
    $lname=$_POST['lname']; 
    //.......
?>

HTML

<form id="my_form" method="post">
    <input type="text" id="fname" name="fname" class="inputname" placeholder="First Name" required/>
    <input type="text" id="lname" name="lname" class="inputname" placeholder="Last Name" required/>
    <input type="submit" value="BUTTON" class="submitbtn">
</form>

I get some Undefined index:fname warning

Upvotes: 2

Views: 3506

Answers (3)

VIJAY P
VIJAY P

Reputation: 1433

You can use serialize() function in jquery.

$(document).ready(function(){   
    $('#my_form').submit(function(){    
        event.preventDefault();   
        var data = $(this).serialize();
        $.ajax({            
            url: "signup.php",            
            cache: false,
            type: "post",            
            data: data,            
            success: function(response){ 
                //do something
            },
            error: function (xhr, ajaxOptions, thrownError) {
               // some alert
            }
        });
    });
});

<?php   
    $fname=$_POST['fname']; 
    $lname=$_POST['lname']; 
    echo $fname;
    echo $lname;
?>

Upvotes: 2

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

Ok you can try

$(document).ready(function(){   
    $('#my_form').submit(function(event){    
        event.preventDefault();                 
        var fname= $(this).find('#fname').val();
        var lname= $(this).find('#lname').val();                
        $.ajax({            
            url: "signup.php",
            type: "post",
            data: {fname:fname , lname:lname},
            success: function(response){ 
                alert(response);
            },
            error: function (xhr, ajaxOptions, thrownError) {
               // some alert
            }
        });
    });
});

in php

<?php
    //.......
    $fname=$_POST['fname']; 
    $lname=$_POST['lname']; 
    echo $fname .|||. $lname;
    //.......
?>

Upvotes: 0

Luke Joshua Park
Luke Joshua Park

Reputation: 9806

Change enctype to x-www-form-urlencoded. This is the default for forms that don't specify an encoding type, like yours.

Upvotes: 1

Related Questions