$.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-->

No, you can see the code that i'm not using JSON.parse(obj). Should i use it? — Timmy
– Timmy, Commented May 22, 2017 at 12:20
@ScottMarcus You don't need to parse the JSON, jQuery already does that for you. — Terry
– Terry, Commented May 22, 2017 at 12:20
Any reason why you are redeclaring the three variables in your success callback? var name, clientId, redirecUrl;? — Terry
– Terry, Commented May 22, 2017 at 12:22

Adam Paxton · Accepted Answer · 2017-05-22 12:19:35Z

1

Looks like you have a typo:

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

should be

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

answered May 22, 2017 at 12:19

Adam Paxton

1,4321 gold badge12 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mplungjan Over a year ago

Well spotted. Question should be closed so I will not vote up

Timmy Over a year ago

Aw! Omg it was such a small thing! Thank you! But the clientId appears undefined on the table and it's logging fine in the console. Can you tell me why this is happening?

Adam Paxton Over a year ago

Are you referring to obj[i].clientId in the success callback? I'm not able to see what data you are getting returned. You might try logging the returned data in the callback console.log(obj); to verify that a clientId is being returned as expected

Gohel Dhaval · Accepted Answer · 2017-05-22 12:29:21Z

0

You can replace

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

To

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

And

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

answered May 22, 2017 at 12:29

Gohel Dhaval

8301 gold badge8 silver badges12 bronze badges

1 Comment

Timmy Over a year ago

I found the problem! On the success result, this obj[i].clientId should be like this obj[i].client_id. Many thanks! :)

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Related