How to save fetch response as input value

Question

I'm trying to capture the client-side IP address and automatically store it as the value inside of an input field. Here's my code so far:

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);

This is returning the error:

Uncaught (in promise) TypeError: Cannot set property 'value' of null

.value is the bit of code it doesn't like, which seems to mean awf_field-106493013 is null, but I know for a fact by the time this function has been called the input has populated, and I'm positive this is the correct input id.

What am I missing?

EDIT Here's what the input looks like:

<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>

This is all called before the javascript code so it should be there.

Edit 2 Here's all the javascript I currently have on my page, I just made it so when the document is ready, then the fetch is made:

<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>

Returns the same

You can check if that element is loaded or not and then call your fetch request. — Sifat Haque
– Sifat Haque, Commented Apr 28, 2020 at 22:14
Haven't you tested yet whether getElementById returns a non-null value? — collapsar
– collapsar, Commented Apr 28, 2020 at 22:15
I suspect the argument chaining is incomplete: .then(res => res.json()).then(data => data.ip).then(ip => { console.log(ip); return ip; }).then(ip => document.getElementById('awf_field-106493013').value = ip); should fix it. — collapsar
– collapsar, Commented Apr 28, 2020 at 22:18
Seems to me like there is no element with id="awf_field-106493013". "Return value: An Element object describing the DOM element object matching the specified ID, or null if no matching element was found in the document." - Document.getElementById() documentation — 3limin4t0r
– 3limin4t0r, Commented Apr 28, 2020 at 22:19
Works fine, provided the element ID is correct. jsfiddle.net/4tphdur9 — emsoff
– emsoff, Commented Apr 28, 2020 at 22:20

collapsar · Accepted Answer · 2020-04-28 23:15:28Z

1

The code from the question works with me - run the snippet. The last JS line uses an alternative selector for the target input field, but the original line (commented out here) works just as fine.

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>

Remark

This is not a genuine answer. It serves to sort out the OP's issue and will be modified or deleted thereafter

edited Apr 28, 2020 at 23:15

answered Apr 28, 2020 at 23:02

collapsar

17.4k5 gold badges40 silver badges66 bronze badges

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

2 Comments

Ethan Over a year ago

unfortunately I am not able to modify the name of the input field as it was generated by Aweber

collapsar Over a year ago

You don't have to. In your original code you referenced the input element by its id. The name attribute should be unique as well - check that. You have the power of CSS selectors at your disposition to uniquely identify an element in the DOM. If you use positional information only, you do not even have to resort to attributes at all ( This is not an advisable solution, though ).

Ethan · Accepted Answer · 2020-04-29 03:56:51Z

1

The issue was solved by modifying https://api.ipify.org/?format=json, which returns abck some sort of weird json object to https://api.ipify.org/ which, as per their documentation, returns back a standard text reply.

answered Apr 29, 2020 at 3:56

Ethan

2,0973 gold badges25 silver badges54 bronze badges

Comments

yoss · Accepted Answer · 2020-04-28 22:48:19Z

0

the url you used to fetch ip didn't work on my machine, changed API provider and now it works fine.

<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>

answered Apr 28, 2020 at 22:48

yoss

979 bronze badges

Collectives™ on Stack Overflow

How to save fetch response as input value

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related