Geek Answers Handbook

Is there a way to transfer html elements from one client to another while preserving all the entered values, as in text windows?

Let's say I have a page with some html elements. These elements are textboxes, checkboxes, radiobuttonsand other custom features.

I need the ability to transfer the whole page from client1 to client2, so client2 will see everything that client1 has installed in the html elements.

I use WebSocket technology for this, but I do not know how to transfer these elements. If I pass document.body.innerHTML, then client2 will see empty elements instead of filled ones. enter image description here

html. - , websocket? document.body ?

- html-. script . http + websocket, .

+4
2

outerHTML innerHTML, , .

// To send your html via websocket
//var ws = new WebSocket('ws://my.url.com:PORT');
//ws.onopen = function(event) { // Make sure it only runs after the web socket is open

  document.querySelector('button').addEventListener("click", function() {
    var inputs = document.querySelectorAll('input');
    Array.prototype.forEach.call(inputs, function(el, i) {
      el.setAttribute('value', el.value);
    });
    document.querySelector('button').setAttribute('data-button', true); // Attributes are rememebered
    var HTML = document.querySelector('section').outerHTML;
    document.querySelector('#result').innerHTML = HTML;
    document.querySelector('#resulttext').textContent = HTML;

    //ws.send(HTML);
  });

//};
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
div {
  background: orange;
  border: 3px solid black;
}
<section>
  <div>
    <input />
  </div>
  <div>
    <input />
  </div>
  <div>
    <input />
  </div>
  <div>
    <input />
  </div>
  <div>
    <input />
  </div>
  <div>
    <button>Generate</button>
  </div>
</section>
<p id="resulttext"></p>
<p id="result"></p>
Hide result
+1

, .

  • ( )
  • : text, checkbox, radio,... ( )
  • , . alert; .

, . , "checked" "value". document.onload, for each ( )

: Javascript

<body>
<p class="first">Hello World Dude</p>
<label for="search_field">my text:</label>
<input type='text' id ='myinput' class='MyIntputField' />

  <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
</body>
<p id="demo" onclick='myFunction()'>Click me to send Data.</p>
<script>
function myFunction() {
    inputs = document.getElementsByTagName('input');
    for (index = 0; index < inputs.length; ++index) {
        switch (inputs[index].type){
            case "text":
                inputs[index].defaultValue = inputs[index].value;
            break;

            case "checkbox":
                 inputs[index].value = inputs[index].checked;
            break;
        }
    }

    var $mybody = $("body").html();
}

</script>
+2

More articles:


All Articles