Send form inputs with AJAX to PHP

Question

I want to send form inputs from a page to a PHP function, using AJAX, and save the data in a multidimensional array. There should be no page reload, and the response can be a simple true or false. In the Chrome browser, I can see both inputs in the "Request Payload" element, in JSON, but how can I retrieve the data in PHP and transform this data into an array?

HTML:

<div id="formEditBilling"><form>
<input name="register[personal][firstname]" type="text" id="firstname" value="" class="text required " placeholder="Firstname">
<input name="register[personal][lastname]" type="text" id="lastname" value="" class="text required " placeholder="Lastname">
<input type="buttom" id="editBilling" value="speichern"/></form></div>

JavaScript:

<script type="text/javascript">

$('#editBilling').click(function() {
    editBilling();
});


function editBilling(){

    var url = '/checkout/saveAddress';  // Server Function

    var data = $('#formEditBilling form').serializeArray();
    data = JSON.stringify(data);

    $.ajax({
        'type': 'post',
        'async': false,
        'data': data,
        'url': url,
        'contentType': "application/json",
        'dataType': "text",
        'success': function (result, data) {

    $('.output').html(data);    // Output Div
 }
});
}
</script>

Here's my problem. How can I get a array like:

['register'] => Array 
    ( 
        ['personal'] => Array
                 (
                      ['firstname'] => "Michael"
                      ['lastname']  => "Cooper"

    )

PHP: Here's my attempt, but it's not working, $_POST seems to be empty.

public function saveAddressAction(){

    $data = json_decode(stripslashes($_POST['register']));

    return true;
}

You have wrong input type on input "buttom" should be "button". And maybe you can take a look useful plugin for jquery - jquery-form (malsup.com/jquery/form) — super pantera
– super pantera, Commented Sep 24, 2013 at 16:15

Jamie Taylor · Accepted Answer · 2013-09-24 15:42:37Z

1

Your function's brackets aren't joining up properly, try using this

function editBilling(){

    var url = '/checkout/saveAddress';  // Server Function

    var data = $('#formEditBilling form').serializeArray();
    data = JSON.stringify(data);

    $.ajax({
        'type': 'post',
        'async': false,
        'data': data,
        'url': url,
        'contentType': "application/json",
        'dataType': "text",
        'success': function (result, data) {
            $('.output').html(data);    // Output Div
        }
    });
}

answered Sep 24, 2013 at 15:42

Jamie Taylor

4,7716 gold badges47 silver badges68 bronze badges

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

1 Comment

Heinz Beck Over a year ago

Thanks but this was only a copy & paste problem when I created my problem.

Daniel · Accepted Answer · 2013-09-29 21:27:09Z

1

You need to transform your serialized formdata into correct JSON

var formdata = $('#formEditBilling form').serializeArray();

var formobject = {};

$(formdata).each(function (e) {
    formobject[formdata[e].name] = formdata[e].value;
});
var data = {
    action: action,
    json: JSON.stringify(formobject)
};

send with ajax

function send(data) {
    var deferred = $.ajax({
        method: "post",
        url: settings.ajaxURL,
        dataType: "json",
        data: data
    });
    return deferred.promise();
}

send(formdata).done(function(response){
    console.log(response)
}

catch with PHP

$_POST['action']
json_decode($_POST['json']);

edited Sep 29, 2013 at 21:27

answered Sep 24, 2013 at 16:02

Daniel

4,9643 gold badges30 silver badges33 bronze badges

1 Comment

Asesha Over a year ago

$('#formEditBilling form').serializeArray(); working grate

Collectives™ on Stack Overflow

Send form inputs with AJAX to PHP

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related