How to get value of date input and put it in innerHTML in javascript

Question

Hi there i'm trying to get the input value of a date input in Javascript/Jquery so i can put it in an innerHTML.

I have the following code;

$("#input").change(function()
  {
    document.getElementById('output').innerHTML = document.getElementById("input").value ;
  });

Where as 'input' is the ID of the date select. And output is the ID of the in which i want the selected date to be visible.

It works with text field inputs but it doesn't work with the date select. Does anybody know a solution, preferably in JQuery. Thanks

maybe a race condition? could be whatever datepicker you're using hasn't written the picked date to the field yet at the time the change is triggered. — Marc B
– Marc B, Commented Aug 15, 2016 at 21:49

gavgrif · Accepted Answer · 2016-08-15 22:33:25Z

2

Not a solution - but a slightly different approach for when you do get the value sorted - you are already using jQuery and you are using the change event handler - this means you can tidy up the code a bit:

$("#input").change(function()
  {
    $('#output').html($(this).val());
  });

But I would suggest that .text() is what you should be using to change the content of the output since you are trying to change the content not a HTML element.

$("#input").change(function()
  {
    $('#output').text($(this).val());
  });

And the other suggestion would be to check that you don't have elements with duplicate (#input) id's in your code.

edited Aug 15, 2016 at 22:33

answered Aug 15, 2016 at 21:55

gavgrif

15.5k2 gold badges30 silver badges31 bronze badges

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

Comments

nyedidikeke · Accepted Answer · 2016-08-15 23:47:00Z

0

You can achieve that using the jQuery approach below:

<script>
$("#input").change(function() {
    $('#output').append($('#input').html());
});
</script>

Achieving same result using JavaScript only:

<script>
document.getElementById("input").onchange = function() {
    updateValue()
};

function updateValue() {
    var input = document.getElementById("input").innerHTML;
    document.getElementById("output").innerHTML = input;
}
</script>

answered Aug 15, 2016 at 23:47

nyedidikeke

7,8188 gold badges48 silver badges65 bronze badges

2 Comments

gavgrif Over a year ago

using append() will cause each changed #input value to be appended to the #output div - meaning that you will end up with a number of displayed values - one for each time the #input value is changed. So if i select a date - that will be appended to the output - then I decide i want to change the date - the original value will still be displayed in #output and then the new value will be appended to it as well. Not a good solution - sorry to say. Also - this is like my answer - doe not ddress the issue that the OP has - but rather a better way of displaying it.

nyedidikeke Over a year ago

You have a point @gavgrif; my answer does not take that into consideration.

luissimo · Accepted Answer · 2016-08-16 12:10:52Z

Oke i fixed this issue myself. Based on the console outputs i came to the conclusion that Ruby on Rails automatically assigns id's to the date select fields.

Based on those id's i made the following JQuery code:

 $("#date_3i").change(function()
  {
    $('#output').text(($(this).val()) + ' ' + ($("#date_2i").find(":selected").text()) + ' ' +  ($("#date_1i").val()) ) ;
  });
  $("#date_2i").change(function()
  {
    $('output').text( ($("#date_3i").val()) + ' ' + ($(this).find(":selected").text()) + ' ' + ($("#date_1i").val()) ) ;
  });
  $("#date_1i").change(function()
  {
    $('output').text( ($("#date_3i").val()) + ' ' + ($("#date_2i").find(":selected").text()) + ' ' + ($(this).val()) ) ;
  });

Case closed, thanks.

Collectives™ on Stack Overflow

How to get value of date input and put it in innerHTML in javascript

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related