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>
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.
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 a p 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>