Возврат текста в текстовое поле ввода с другой страницы моего домена с использованием JavaScript

Question

Я пытаюсь вернуть текст с другой страницы моего домена в текстовое поле ввода. Я могу вернуть текст внутри div (DivThisPage), но не могу получить текст из загруженного div в поле ввода текста (txtValue).

function getValue() {
  $("#DivThisPage").load("http://another-page-on-my-site #DivTheOtherPage"); //This is working and I see "test" on this page. 
  var myVal = $('#DivThisPage').val(); //I've tried both DivThisPage and DivTheOtherPage but get nothing
  $("#txtValue").val(myVal);
}

Вот это HTML на этой странице:

<button onclick="getValue()">Get Value</button>
<div id="DivThisPage"></div>
<input type="text" id="txtValue" name="txtValue" />

html с другой страницы моего сайта:

<div id="DivTheOtherPage">test</div>

Однако, когда я проверяю элементы на странице после выполнения, я вижу:

<div id="DivThisPage">
<div id="DivTheOtherPage">test</div>
</div>

Но когда я отлаживаю скрипт, myVal всегда имеет значение null.

Answer 1

У вас есть две проблемы здесь. Во-первых, элементы div не имеют атрибута value, поэтому метод val() для них не работает. Предполагая, что из контекста вопроса вы хотите получить текст внутри элемента, используйте html() или text().

Во-вторых, вызов AJAX, используемый load() под капотом, является асинхронным. Это означает, что вам нужно будет использовать аргумент обратного вызова для чтения данных из DOM после того, как они были обновлены.

<button>Get Value</button>
<div id="DivThisPage"></div>
<input type="text" id="txtValue" name="txtValue" />

jQuery(function($) {
  $('button').on('click', function() {
    $("#DivThisPage").load("/relative-path #DivTheOtherPage", function() {
      var myVal = $('#DivTheOtherPage').text();
      $("#txtValue").val(myVal);
    }); 
  });
});

Также обратите внимание, что здесь используется ненавязчивый обработчик событий. Встроенные атрибуты событий теперь считаются плохой практикой (так как они HTML и JS logi c слишком плотно), и их следует по возможности избегать.

Кроме того, если вы позвонив в определенное место на вашем сайте, используйте относительную ссылку.

Answer 2

Использует это:

function getValue() {
  $("#DivThisPage").load("http://another-page-on-my-site #DivTheOtherPage", function(response, status, xhr){
  var myVal = $('#DivThisPage').val();
  $("#txtValue").val(myVal);
  });
  
}