adding data to form right before ajax post

Question

I am trying to add some data to my form right before posting using the beforeSend function, but the data is not coming through on the post. I am guessing the form is getting serialized before the data gets added, but that is just a guess.

Here is my jquery/ajax:

$.ajax({
  type: "POST",
  url: '@Url.Action( "SaveHeaders", "Tally" )',
  //data: { model: @Html.Raw(Json.Encode(@Model)) },
  data: $('#myForm').serialize(),
  beforeSend: function() {
  var displayIndex = imageIndex+1;
  $("#images tbody").append("<tr><td class='text-center align-middle'>" + displayIndex + "<input type='hidden' id='SellerGroup_" + imageIndex + "__imageId' class='form-control text-box single-line' name='SellerGroup[" + imageIndex + "].imageId' readonly='readonly' value='" + $('#imageName').val() + "' /><td><input type='text' id='SellerGroup_" + imageIndex + "__majorGroup' class='form-control text-box single-line' name='SellerGroup[" + imageIndex + "].majorGroup' readonly='readonly' value='" + major + "' /></td><td><input type='text' id='SellerGroup_" + imageIndex + "__minorGroup' class='form-control text-box single-line' name='SellerGroup[" + imageIndex + "].minorGroup' readonly='readonly' value='" + minor + "' /></td></tr>");
                    },
                    success: function (data) {
                        console.log(data);
                    }
                });

Answer 1

Before you run the $.ajax(...) code, try to put this:

$('#myForm').append('<input type="hidden" name="whateverName" value="whateverValue" />');

and only then run your code (with the $('#myForm').serialize() method).