POST multiple AJAX data - php

Question

I'm trying to POST multiple AJAX data to update.php. This is my code at the moment:
$.ajax({
url:"update.php",
method:"POST",
data: $('#update_form').serialize(),
beforeSend:function(){
$('#update').val("Geupdate!");
},
success:function(data){
$('#update_form')[0].reset();
$('#add_data_Modal').modal('hide');
$('#employee_table').html(data);
}
});
However I also want to sent an ID within the data. This is the form that I'm using.
<form method="post" id="update_form">
<label>Notitie:</label>
<input type="text" name="name" id="' . $row["id"] . '" class="form-control" value='.$row["name"].' width="100%">
<br />
<input type="submit" name="update" id="update" value="Opslaan" class="btn btn-success" />
</form>
How can I combine data: $('#update_form').serialize() and id="' . $row["id"] . '" together?
I tried a few combinations but I can't find the correct answer. Here is what I've tried:
data: $('#update_form').serialize(), id: <?php echo $row["id"] ?>

Answer 1

One simple way is add a hidden input to the form so serialize() will include the id
<form method="post" id="update_form">
<input type="hidden" name="id" value="' . $row["id"] . '" >
<label>Notitie:</label>
<input type="text" name="name" id="' . $row["id"] . '" class="form-control" value='.$row["name"].' width="100%">
<br />
<input type="submit" name="update" id="update" value="Opslaan" class="btn btn-success" />
</form>

Answer 2

You are serializing entire form, which includes your textbox data as well. So, you don't need to explicitly add each element of form.
The .serialize() method creates a text string in standard URL-encoded
notation. It can act on a jQuery object that has selected individual
form controls, such as <input>, <textarea>, and <select>: $("input, textarea, select" ).serialize();
So, whatever element added in form (<input>, <textarea>, and <select>) gets serialized implicitly. So, in case, you wanted to pass additional data along with form, then you can create a hidden field inside your form.

Answer 3

I don't use jQuery so this is a bit of a "stab in the dark" but you could alternatively use a FormData object and append a new parameter & value to it like this perhaps.
$.ajax({
var form=$('#update_form');
var fd=new FormData( form[0] );
fd.append('id', document.querySelector('input[name="name"]').id );
url:'update.php',
method:'POST',
data: fd,
beforeSend:function(){
$('#update').val('Geupdate!');
},
success:function(data){
form[0].reset();
$('#add_data_Modal').modal('hide');
$('#employee_table').html(data);
}
});