How can I copy content from a div to a hiddenfield?

Question

I have a div that displays the user’s IP, in which this address is picked up by Javascript. However, I need to use the IP in Code-Behind. The idea would be to copy the contents of the div to a hiddenfield and work on it. I’m having trouble making this copy. Below is the code:

<script>
 var RTCPeerConnection = /*window.RTCPeerConnection ||*/
 window.webkitRTCPeerConnection || window.mozRTCPeerConnection;

    if (RTCPeerConnection) (function () {
    var rtc = new RTCPeerConnection({ iceServers: [] });
    if (1 || window.mozRTCPeerConnection) {
        rtc.createDataChannel('', { reliable: false });
    };
    rtc.onicecandidate = function (evt) {
        if (evt.candidate)
            grepSDP("a=" + evt.candidate.candidate);
    };
    rtc.createOffer(function (offerDesc) {
        grepSDP(offerDesc.sdp);
        rtc.setLocalDescription(offerDesc);
    }, function (e) { console.warn("offer failed", e); });


    var addrs = Object.create(null);
    addrs["0.0.0.0"] = false;
    function updateDisplay(newAddr) {
        if (newAddr in addrs) return;
        else addrs[newAddr] = true;
        var displayAddrs = Object.keys(addrs).filter(function 
    (k) { return addrs[k]; });
     document.getElementById('list').textContent =
     displayAddrs.join(" or perhaps ") || "n/a";
    }

    function grepSDP(sdp) {
        var hosts = [];
        sdp.split('\r\n').forEach(function (line) {
            if (~line.indexOf("a=candidate")) {
                var parts = line.split(' '),
                    addr = parts[4],
                    type = parts[7];
                if (type === 'host') updateDisplay(addr);
            } else if (~line.indexOf("c=")) {
                var parts = line.split(' '),
                    addr = parts[2];
                updateDisplay(addr);
            }
        });
    }
   })();
    else {
    document.getElementById('list').innerHTML = "<code>ifconfig| grep inet | 
    grep -v inet6 | cut -d\" \" -f2 | tail -n1</code>";
    document.getElementById('list').nextSibling.textContent = "In Chrome and 
  Firefox your IP should display automatically, by the power of 
   WebRTCskull.";
 }

   $('#btn').on('submit', function () {
    var valor = $('#list').val();
    $('#HiddenField1').val(valor);
   });
 </script>

 <div id="list"></div>
  <asp:HiddenField ID="HiddenField1" runat="server" />

Answer 1

Your code is dirty, with implementations that do not apply to the question. But I will try to help you.

To get the contents of hiddenField is enough:

var conteudo = document.getElementById("HiddenField1").value;

already to record content in hiddendField enough:

document.getElementById("HiddenField1").value = "192.168.0.1";

Answer 2

It seems to me you’re trying to catch one value of a div:

<div id="list"></div>          <-- a "div"
var valor = $('#list').val();  <-- pegando o "valor"

Div does not have "value". If you want to catch the text div, use .text():

$("#list").text().trim();

The .trim() removes possible spaces generated by HTML.

Another thing is that you are playing div content on the field while doing Submit. It would be better to put one setTimeout to ensure that it takes time for the field to receive the value before Submit:

$('#btn').on('submit', function (e){
   e.preventDefault();
   var $this = $(this);
   var valor = $('#list').val();
   $('#HiddenField1').val(valor);
   setTimeout(function(){
      $this.submit();
   }, 50);
});

The e.preventDefault(); prevents the form from being submitted at the event, and the $this.submit(); in the setTimeout will send after a split second after the div text has been placed in the field #HiddenField1.

Now, what you notice is that you’re doing a one button Ubmit #btn (by the name of the id looks like a button, not the form). If this id refers to the button that submits the form, it is wrong. This id should be the form id, something like:

<form id="form" ...>

   // elementos do formulário

   <button id="btn">Enviar</button>
</form>

And in the code would be the form id and not the button:

$('#form').on('submit', function (e){
      ↑

That is, this id #btn it is neither necessary to have, if that is the case.

Answer 3

To get the html of any div with jquery use the following argument

var valorDiv = $('#list').html();
$('#id_input').val(valorDiv);