Send form data (string) and array through AJAX jQuery form submit

556
November 23, 2016, at 6:05 PM

I've researched several similar answers however I can't find any that show how to send both an array, and a string.

I have discovered that .serialize and .serializeArray should allow me to construct the string I need to send the form data and the array to my PHP script, but I cannot understand the syntax to use both of these functions together.

My form is simple:

<form id="email-input">
   <input type="email" name="user-mail" />
</form> 

I wish to submit with AJAX, and send both the value in the form and a javascript array called basketData to my PHP script.

$.ajax({
            type: "POST",
            url: "scripts/send-mail.php",
            data: {$("#email-input").serialize(),basketData.serializeArray()}
            success: function(data)
            {
                console.log(data);
            }
        });

I'm aware the above is completely syntactically incorrect but I just can't work out how to pass multiple data values through this function.

Answer 1

jQuery:

$.ajax({
    type: "POST",
    url: "scripts/send-mail.php",
    data: {
        email: $('input[name="user-mail"]').val(),
        basketData: basketData
    }
    success: function(data) {
        console.log(data);
    }
});

PHP:

$email = $_POST['email'];
$basketData = $_POST['basketData'];
Answer 2

serializeArray is for converting a jQuery object containing a form into structured data as a precursor for converting it in to a serialized string. It is rarely useful to call it directly, and it can't be called on an array (otherData:basketData.serializeArray()} will throw an array because serializeArray is undefined since basketData isn't a jQuery object).

serialize is for converting a jQuery object containing a form into a string of form encoded data. It is great for dealing with complex forms. It becomes a little fiddly when you want to modify the data.

Forget about using either of them for this.

The data argument for .ajax accepts a JavaScript object as its value, and then jQuery will encode it as form data using PHP's conventions for complex data structures (which works out nicely for you since you say your array isn't flat and you are using PHP).

Just put the array and the value of the form control into your data object.

data: {
    email: $("input[name='user-mail']").val(),
    array: basketData
},
Rent Charter Buses Company
READ ALSO
Regex replace(/\n/g, &ldquo;&lt;br /&gt;&rdquo;) doesn&#39;t work

Regex replace(/\n/g, “<br />”) doesn't work

I have this string 02/11/2015 \n € \n that I show into a popup. Before I do this I use a RegEx to replace \n with <br/>.

305
Fullscreen video as site header background

Fullscreen video as site header background

I'm having problems trying to fix this problem. I have a client that required that the site header need to have a video as background with a dark layer on it and over the video & overlay there will also be some texts (like h1,span, etc).

387
Set focus to an input field without blinking cursor

Set focus to an input field without blinking cursor

I have a textfield (fullname) and on click of the button "Set Focus", i want the focus to be set on the textfield(fullname) but do not want the blinking cursor within the focused textfield. How can this be achieved using js/jQuery.

603
Change DIV BG on every Click from another DIV

Change DIV BG on every Click from another DIV

I have one problem with my JQuery script. .

386