$.ajax() gives [object HTMLInputElement] instead of value

Question

I have an $.ajax() request working properly and it's calling 3 ids. The only id with no issues is the name id. The clientId logs well on the console, but prints undefined on the table. The url is printing [object HTMLInputElement] on the table and on the console, logs like this <input class="form-control no-border" type="text" id="redirectUrl" name="url" placeholder="http://stuffpage/redirect/?id=1" required=""> .I want to print the url that i am introducing on the input.

Can you tell me what is the problem?

 $('#saveButton').on('click', function() { var url = "http://stuffpage.com/redirect/redirect"; var name = $('#name').val(); console.log("name", name); var clientId = $('#clientId').val(); console.log("clicentId", clientId); var redirecUrl = $('#redirectUrl').val(); console.log("redirectUrl", redirectUrl); var formData = new FormData(); formData.append('name', name); formData.append('client_id', clientId); formData.append('url', redirectUrl); console.log('test') $.ajax({ url: url + "/saveRedirect", type: "POST", dataType: "json", data: formData, contentType: false, cache: false, processData: false, success: function(obj) { var name, clientId, redirecUrl; var rows = ''; for (i = 0; i < obj.length; i++) { rows += "<tr class='lightgrey'><th>" + obj[i].name + "</th><td>" + obj[i].clientId + "</td><td>" + obj[i].url + "</td><td><img id='editButton' class='col-md-2 edit nopad' src='http://stuffpage.com/redirect/public/img/edit.svg'><img class='col-md-2 link nopad float-right' src='http://stuffpage.com/redirect/public/img/copy.svg'></td></td></tr>"; $("#table").append(rows); console.log('sucess!'); } }, error: function() { console.log('error'); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="col-md-12 marg-t-30 nopad"> <!--REGISTER NAME CLIENT ID URL--> <div class="col-md-1 nopad"> <div class="rtitle"> <div class="roboto-condensed">name</div> </div> </div> <div class="col-md-3 nopad" style="margin-right: 20px;"> <input class="form-control no-border" id="name" type="text" name="nameClient" placeholder="Insert name..." required=""> </div> <div class="col-md-1 nopad"> <div class="rtitle"> <div class="roboto-condensed">client id</div> </div> </div> <div class="col-md-3 nopad"> <select class="form-control no-border selectpicker" name='clientId' id='clientId' data-show-subtext="true" required=""> <?php echo $client_data;?> </select> </div> <div class="col-md-3 nopad"> <button id="saveButton" class="save float-right">SAVE</button> </div> <div class="col-md-12 nopad marg-t-20"> <div class="col-md-1 nopad"> <div class="rtitle"> <div class="roboto-condensed">url</div> </div> </div> <div class="col-md-11 nopad"> <input class="form-control no-border" type="text" id="redirectUrl" name="url" placeholder="http://stuffpage/redirect/?id=1" required="" value=""> </div> </div> </div> <!--col-md-12--> 

Answer 1

Looks like you have a typo:

var redirecUrl = $('#redirectUrl').val();

should be

var redirectUrl = $('#redirectUrl').val();

Answer 2

You can replace

var clientId = $('#clientId').val();

To

var clientId = $('#clientId option:selected').val();

And

var redirectUrl = $('#redirectUrl').val();