append a value to form with jquery and serialize the form for AJAX Post

Question

I have a form that has an input that gets filled by the user and is sent as a serialized form with an AJAX Post request. I want to append a value to my form before sending it but it seems like it is not working (I have used Chrome's debugger and I can see that the only part that is not working is the append part). Here is my code:

 var $form = $("#confirmPhoneNumberForm");
    var phoneNumber = $("input[name='EmailOrPhoneNumber']").val();
    $form.append("PhoneNumber", phoneNumber);
    var formlog = $form.serialize();
    console.log(formlog);

In the console.log() part it just shows the input that the user enters.

Answer 1

The problem is that you're appending the value of your EmailOrPhoneNumber input to the form, instead of the input element itself.

The .serialize() function can only serialize the values of form elements.

Try removing .val(); from your phoneNumber declaration.