CODEWITHSUNDEEP
javascriptjqueryajax
Timmy
Timmy

Reputation: 165

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

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

Upvotes: 0

Views: 2265

Answers (2)

Gohel Dhaval
Gohel Dhaval

Reputation: 830

You can replace

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

To

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

And

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

Upvotes: 0

Adam Paxton
Adam Paxton

Reputation: 1432

Looks like you have a typo:

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

should be

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

Upvotes: 1

Related Questions