How to console log input val?

Question

I am trying to apply to an input.val() a text from a span element but when I try to check it in console I don't get it.

$("#sandbox-container span").on("click", function(e) {
      $("#sandbox-container span").removeClass("selected_year");
      $(this).attr("class", "selected_year");
      var dateSelected = $(".selected_year").text();
      var dateCat = $(".time_value").val(dateSelected);
      console.log(dateSelected);
      console.log(dateCat);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sandbox-container">
      <span class="selected_year">2014</span>
      <span>2018</span>
    </div>
<input label="null" style="display: none;" class="time_value" maxlength="99" name="usp-category" type="text" value="">

The above gives me:

2014
(index):208 r.fn.init [prevObject: r.fn.init(1)]

While I would expect console.log(dateCat); to give me 2014

That code seems to work? Or at least doesn't error. Please create a [Minimal, Complete, and Verifiable example](http://idownvotedbecau.se/nomcve/) of your problem — Liam, Mar 23 '18 at 11:32
@Keith yes just updated, was missing the input. Yet now they have changed my code and I am more confused as it is giving both text values and the issue changed — rob.m, Mar 23 '18 at 11:44

score 6 · Accepted Answer · edited Mar 23 '18 at 11:47

When you pass a value to the function, you're setting the value of the element not obtaining it, the jQuery methods follow a chaining pattern, so they actually return the element itself so if you want to set a value and then retrieve it:

var dateCat = $(".usp-input-category").val(dateSelected);

console.log(dateCat.val())

Just so you're aware, class selectors i.e. $(".usp-input-category") return an array. So running .val with a value in the constructor on the array will change the value for all the elements with this class.

The .val function, when constructor is empty, will return the value of the element, where as when a constructor is called with a value, it'll return the element itself.

Worth noting differences between .val(), .text() as the later is probably the function you should look at.

.val gets/sets value of the input elements
.text gets/sets the innerText of elements

I don't get it, what do you mean remove dateSelected? That's where I set the value — rob.m, Mar 23 '18 at 11:33
It says "Remove dateSelected if you're not wanting to set a value.". You may keep it, read later on for explanation. I think I made it pretty clear. — Adrian, Mar 23 '18 at 11:33

Alexander · Answer 2 · 2018-03-23T11:49:41.170

0

If the .val() method is called without arguments, then the function returns current value of an <input> (or <select>, or <textarea>) element. If the method is used to set the value , then the the set of matched element will be returned.

So, you should use

console.log(dateCat.val());

or

var dateCat = $(".time_value").val(dateSelected).val();
console.log(dateCat);

to display a new value.

edited Mar 23 '18 at 11:49

answered Mar 23 '18 at 11:43

Alexander

4,420
7
27
42

score 0 · Answer 3 · answered Mar 23 '18 at 11:45

If you give an element with the class 'usp-input-category' then you will get the value.

$("#sandbox-container span").on("click", function(e) {
      $("#sandbox-container span").removeClass("selected_year");
      $(this).attr("class", "selected_year");
      var dateSelected = $(".selected_year").text();
      var dateCat = $(".usp-input-category").val(dateSelected);
      console.log(dateSelected);
      console.log(dateCat.val());
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sandbox-container">
      <span class="selected_year">2014</span>
      <span>2018</span>
    </div>
    <input class="usp-input-category"/>

score 0 · Answer 4 · answered Mar 23 '18 at 11:51

You are setting the value of an element using jQuery .val(value). This does not return the value you have set. You may check the documentation.

You may retrieve the value using $(".usp-input-category").val();.

The logic does not make much sense here. But as you are insistent on following this logic, you may do like:

var dateSelected = $(".selected_year").text();
$(".usp-input-category").val(dateSelected);
var dateCat = $(".usp-input-category").val();

This should give you the correct answer you expect.

For explanations regarding the r.fn.init [prevObject: r.fn.init(1)] output you were getting, you can refer this SO question and answer.

How to console log input val?

4 Answers4

Related