Как показать обновленное значение поля ввода в нескольких местах на странице HTML в режиме реального времени?

Question

У меня есть следующий HTML:

<input type="date" name="order_date" id="order_date"/>

После обновления поля я хочу отобразить значение этого поля в обычном тексте в двух других местах на той же HTML-странице в режиме реального времени, какдата поля обновляется. Как?

JS пробовал:

<p>The date selected was <span id="place_one"></span></p>
<p>And using the date of <span id="place_two"></span></p>

$(document).ready(function(){
    $("#order_date").change(function(){
        $('#place_one').text($("#order_date").val());
        $('#place_two').text($("#order_date").val());
    });
})

Answer 1

Предполагая, что вы хотите отформатировать значение, а не отображать его в виде даты Unix, вы можете отформатировать его в заданную локаль.

EG:

$(function(){
  $("#order_date").on("input",function(){
    var $input = $(this),
    val = $input.val(),
    date = new Date(val),
    longformat = {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'};
    $(".live_order_date").each(function(){
      var locale = $(this).data("locale") || "en-GB",
      verbose = $(this).data("verbose"),
      opts = (verbose)?longformat:{};
      $(this).text(date.toLocaleDateString(locale,opts));
    })
  });
});

span {color:#666699;
font-style:italic;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" name="order_date" id="order_date"/>
<p>The date selected was <span class="live_order_date" data-locale="en-GB" data-verbose="true">...</span></p>
<p>And using the date of <span class="live_order_date" data-locale="en-GB">...</span><br/>
(or <span class="live_order_date" data-locale="en-US">...</span> if you're in the US)</p>
<p>What's that? you need it in Hindi <span class="live_order_date" data-locale="hi-IN" data-verbose="true">...</span>

Answer 2

let orderDate = document.getElementById('order_date');
orderDate.addEventListener ("change", function () {
  let showHeres = Array.from(document.getElementsByClassName('show_here'));
  let value = this.value;
  showHeres.forEach(function(showHere) {
     showHere.innerText = value;
  });
});

<input type="date" name="order_date" id="order_date"/>

<p>The date selected was <span class="show_here"></span></p>
<p>And using the date of <span class="show_here"></span></p>

РЕДАКТИРОВАТЬ: Ваше решение также работает:

$(document).ready(function(){
    $("#order_date").change(function(){
        $('#place_one').text($("#order_date").val());
        $('#place_two').text($("#order_date").val());
    });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" name="order_date" id="order_date"/>

<p>The date selected was <span id="place_one"></span></p>
<p>And using the date of <span id="place_two"></span></p>