获取 HTML class 的值，然后放入一个输入元素

Question

I've been trying to get the value of the ip address, which is already inside <p id='details'></p> to be put in the value of the input html class as well found on the last line.

I tried declaring it as a php variable but I couldn't afford so.

<script>
    var ipinfo;
    $.getJSON("https://ipinfo.io", function (data) {
    $("#details").html(data.ip)
    })
</script>
    
<p id='details'></p>
    
<input type="text" name="ip" class="" value="@php echo ""; @endphp" readonly>

Answer 1

You can firstly get hold of the content of a particular HTML class by copying over the value into a variable, and then inject this value by assigning the copied over variable's value into the input's value. You could achieve this by using plain Vanilla JavaScript.

Since your p tag is initially empty and the data is injected into the p tag after it is fetched from a network, this process becomes an asynchronous task. So, you'd want to feed the data only after it is fetched, so you can add the value assigning logic within the fetch function as follows:

    var ipinfo;
    $.getJSON("https://ipinfo.io", function (data) {
      document.querySelector("#details").innerHTML = data.ip

      const inject = document.querySelectorAll("input[type=text]")[0] //Identify the input element

      inject.value = data.ip //Assign the returned value to input's value.
    })

As you want the returned value from fetch to be fed to the p tag content as well as the input tag value, you could directly assign it, instead of copying over the already copied value.

Answer 2

From what i Can see you just need a token.

Also, I've used ES6 fetch method to get the API object response

 fetch('https://ipinfo.io/json?token=e0b12a7d02537a').then( (response) => response.json() ).then( (jsonResponse) => { //this will display the IP as ap elemenet text $('#details').html('IP Address = ' + jsonResponse.ip) //here we are assigning it as a value to the input $('input[name="ip"]').val(jsonResponse.ip); } )

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p id='details'></p> <input type="text" name="ip" class="" readonly>