Как сохранить ответ выборки в качестве входного значения - PullRequest
Новая
       35

Как сохранить ответ выборки в качестве входного значения

0 голосов
/ 29 апреля 2020

Я пытаюсь перехватить IP-адрес на стороне клиента и автоматически сохранить его как значение внутри поля ввода. Вот мой код: 

var Ip;
fetch('https://api.ipify.org/?format=json')
  .then(res => res.json())
  .then(data => Ip = data.ip)
  .then(() => console.log(Ip))
  .then(() => document.getElementById('awf_field-106493013').value = Ip);

Это возвращает ошибку:

Uncaught (в обещании) TypeError: Невозможно установить для свойства 'value' значение null

.value - это фрагмент кода, который ему не нравится, что, по-видимому, означает, что awf_field-106493013 является нулем, но я точно знаю, что к тому времени, когда эта функция была вызвана, ввод был заполнен, и я ' m положительный, это правильный идентификатор ввода.

Чего мне не хватает?

РЕДАКТИРОВАТЬ Вот как выглядит ввод: 

<label class="previewLabel" for="awf_field-106493013">ipaddress:</label>
<div class="af-textWrap"><input type="text" id="awf_field-106493013" class="text" name="custom ipaddress" value=""  onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " tabindex="503" /></div>

Это все вызывается перед кодом javascript, поэтому он должен быть там.

Edit 2 Вот все javascript, которые у меня есть на моей странице, я просто сделал это, когда документ готов, то fetch сделано: 

<script type="text/javascript">
function getUrlParam(name, url) {
  if (!url) url = window.location.href;
  name = name.replace(/[\[\]]/g, '\\$&');
  var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
      results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

var tid = getUrlParam("adid");
var date = Date(Date.now());

jQuery(document).ready(function () {
  setIp();

  jQuery('#awf_field-106493014').val(date.toString()); //Time
  if (tid != null) {
    jQuery('#awf_field-106493015').val(tid.toString()); //Tid
  } else {
    jQuery('#awf_field-106493015').val("nulltid"); //Tid
  }
});

function setIp(){
  var Ip;
  fetch('https://api.ipify.org/?format=json')
    .then(res => res.json())
    .then(data => Ip = data.ip)
    .then(() => console.log(Ip))
    .then(() => document.getElementById('awf_field-106493013').value = Ip);
}
</script>

Возвращает то же самое

Ответы [ 3 ]

1 голос
/ 29 апреля 2020

У меня работает код из вопроса - запустите сниппет. Последняя строка JS использует альтернативный селектор для целевого поля ввода, но оригинальная строка (закомментированная здесь) работает так же хорошо. 

function getUrlParam(name, url) {
  if (!url) url = window.location.href;
  name = name.replace(/[\[\]]/g, '\\$&');
  var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
      results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

var tid = getUrlParam("adid");
var date = Date(Date.now());

jQuery(document).ready(function () {
  setIp();

  jQuery('#awf_field-106493014').val(date.toString()); //Time
  if (tid != null) {
    jQuery('#awf_field-106493015').val(tid.toString()); //Tid
  } else {
    jQuery('#awf_field-106493015').val("nulltid"); //Tid
  }
});

function setIp(){
  var Ip;
  fetch('https://api.ipify.org/?format=json')
    .then(res => res.json())
    .then(data => Ip = data.ip)
    .then(() => console.log(Ip))
    .then(() => document.querySelector('*[name="custom ipaddress"]').value = Ip);
// was:        .then(() => document.getElementById('awf_field-106493013').value = Ip);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="previewLabel" for="awf_field-106493013">ipaddress:</label>
<div class="af-textWrap"><input type="text" id="awf_field-106493013" class="text" name="custom ipaddress" value=""  onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " tabindex="503" /></div>

Примечание

Это не подлинный ответ. Он служит для решения проблемы ОП и будет впоследствии изменен или удален

0 голосов
/ 29 апреля 2020

Проблема была решена путем изменения https://api.ipify.org/?format=json, который возвращает abck какой-то странный json объект в https://api.ipify.org/, который, согласно их документации, возвращает стандартный text ответ.

0 голосов
/ 29 апреля 2020

URL, который вы использовали для получения ip, не работал на моей машине, сменил провайдера API и теперь работает нормально. 

<label class="previewLabel" for="awf_field-106493013">ipaddress:</label>
<div class="af-textWrap">
    <input type="text" id="awf_field-106493013" class="text" name="custom ipaddress" value=""  onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " tabindex="503" />
</div>
<script>
var Ip;
fetch('http://ip-api.com/json/?fields=status,query')
  .then(res => res.json())
  .then(data => Ip = data.query)
  .then(() => console.log(Ip))
  .then(() => document.getElementById('awf_field-106493013').value = Ip);
</script>
...