Sending data gives [object HTMLInputElement] as query response - html

Question

I am trying to send user form data to partner endpoint like this:
$('#registrationFrm').on('submit', function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: "https://pixel.plexop.com/?country="+countryid+"&_v=6&name="+firstName+"&lastname="+lastName+"&phone="+phone
+"&email="+emailid+"&ud=&e=2&adv=1&a=4&f=221161&FormId=1807&SerialId=1210053",
data: $("#registrationFrm").serialize(),
success: function() {
alert('success');
}
});
});
I get 200 "OK" back, but as of data I get this sent when I inspect it on "network":
Query string: country "[object HTMLSelectElement]
Query string: name "[object HTMLInputElement]
Query string: lastname "[object HTMLInputElement]"
My form looks like this:
<form id="registrationFrm" >
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="First Name" name="firstName" id="firstName" required />
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="Last Name" name="lastName" id="lastName" required />
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="tel" class="form-control" placeholder="Phone No" name="phone" id="phone" required />
<span class="glyphicon glyphicon-earphone form-control-feedback"></span>
What am I doing wrong here?

Answer 1

Probably, you define your variables like:
const firstName = document.getElementById('firstName');
/*and so*/
But you should do this like:
const firstName = document.getElementById('firstName').value;
UPD:
$('#registrationFrm').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'POST',
url:
'https://pixel.plexop.com/?country=' +
countryid.value +
'&_v=6&name=' +
firstName.value +
'&lastname=' +
lastName.value +
'&phone=' +
phone.value +
'&email=' +
emailid.value +
'&ud=&e=2&adv=1&a=4&f=221161&FormId=1807&SerialId=1210053',
data: $('#registrationFrm').serialize(),
success: function () {
alert('success');
}
});
});