Save changed HTML to a Javascript variable?

Question

If I have a HTML code with for example an input field inside it like this:

<div><input type="text" name="search_word" value=""></div>

And then a website visitor types something into it, for example Car, without submitting the field or anything, but so the current HTML code looks like this:

<div><input type="text" name="search_word" value="Car"></div>

Can I somehow store this HTML code to a Javascript variable WITH the word Car or whatever is typed in the input field? The point is to store the HTML code as it looks for the moment. The input field was just an example.

Thing is that the visitor can go to another tab in this section of the website and then get back to this tab. My idea is that the HTML will be retrieved from the Javascript variable.

I've noticed that it doesn't work with just $('.search-form').html(). That will just store the original version of the HTML.

I understand it's possible to just let the HTML be left in the code with a "hidden" style-rule or something. But I would mostly like to have it stored as a Javascript variable for performance reasons.

When you say they go to a different tab do you mean they load a new page? If they do then your javascript variables are lost forever... — Matthew Page, Jan 26 '19 at 05:22
@MatthewPage No I'm building a navigation based on Javascript right now. They can switch between the tabs without leaving the page. That's the whole point with it. — Peter Westerlund, Jan 26 '19 at 05:30
@Hasanalattar Does that function has any different features from just html() except containing the outer box as well? — Peter Westerlund, Jan 26 '19 at 05:52
If I am understanding your question, you want to capture the "current" state of the html element with any and all attribute changes (not just value). I don't know of an easy way to do that across all browsers since most browsers only retrieve the html that was sent as part of the original request (not the current state of those elements) when you use `innerHTML`, `outerHTML` or jQuery's `html()`. — benvc, Jan 26 '19 at 05:54
@peter westeelund i was reading this.. https://stackoverflow.com/a/46943719/4410536 so i thought maybe it will work — Hasan alattar, Jan 26 '19 at 06:02
@benvc But shouldn't it be possible to at least bind the storing action to code that has been changed with on.click-events. That wouldn't maybe work with the input typing. But with code inside this code block that's changed by jQuery. But I cant even get that to work. — Peter Westerlund, Jan 26 '19 at 06:07
You could iterate over all element attributes and their values to create and store an object that represents the current state of the element, but I am not coming up with great ideas for an easy way to store only those attribute values that have changed. See [Get all attributes of an element using jQuery](https://stackoverflow.com/questions/14645806/get-all-attributes-of-an-element-using-jquery) — benvc, Jan 26 '19 at 06:27

score 2 · Answer 1 · 2019-01-26T06:10:55.923

2

You could try using web storage, take a look at this link Web storage (W3Schools)

You can store data in the browser and use it later on.

To save on code repeating, you can do something like this

<input type="text" name="product" onchange="TextChanged(this.name, this.value)">
<input type="text" name="product1" onchange="TextChanged(this.name, this.value)">
<input type="text" name="product2" onchange="TextChanged(this.name, this.value)">

<script type="text/javascript">
  TextChanged = (name, value) =>
  {
      if(localStorage[name] == null)
      {
          //if the item doesn't exist, create it
          localStorage.setItem(name, value);
      }
      else
      {
          //else modify it
          localStorage[name] = value;
      }
  }
</script>

edited Jan 26 '19 at 06:10

answered Jan 26 '19 at 05:30

But then I have to go through everything in the HTML code that can be changed and store everything separately? – Peter Westerlund Jan 26 '19 at 05:32
As I said in the question. The input field is just an example. It could be anything. A div inside the code that is visible or hidden or all kind of things. – Peter Westerlund Jan 26 '19 at 05:45
maybe calling an onchange function on each method and passing the value and a name, then just save that data within an object. – Jan 26 '19 at 05:56
I have edited my answer to give a rough idea of one possible way of doing it – Jan 26 '19 at 06:11

Nicole Essex · Answer 2 · 2019-01-26T06:45:59.730

0

<input type="text" id="user-input" oninput="captureInput()">

<p id="user-output"></p>

<script>
function captureInput() {

var userInput = document.getElementById("user-input").value;
var elOutput = document.getElementById("user-output");
elOutput.innerHTML = "User Input: " + userInput;
var userOutput = elOutput.innerHTML;    
}
</script>

edited Jan 26 '19 at 06:45

answered Jan 26 '19 at 06:40

Nicole Essex

1
2

1

You should be able to see what the user has typed appear below the input box. And it is saved in the variable userOutput. Hope this helps. – Nicole Essex Jan 26 '19 at 06:47

Save changed HTML to a Javascript variable?

2 Answers2