Get the value of HTML class, then put in in an input element

user_12175601 0
Viewed 59

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>
laravel-blade javascript
2 Answers

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.

user_128285660

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>

user_85007180
Related