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
– Matthew Page, Commented Jan 26, 2019 at 5: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
– Peter Westerlund, Commented Jan 26, 2019 at 5:30
@Hasanalattar Does that function has any different features from just html() except containing the outer box as well? — Peter Westerlund
– Peter Westerlund, Commented Jan 26, 2019 at 5: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
– benvc, Commented Jan 26, 2019 at 5:54

score 2 · Accepted Answer · 2019-01-26 06:10:55Z

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, 2019 at 6:10

answered Jan 26, 2019 at 5:30

user10221193

Sign up to request clarification or add additional context in comments.

4 Comments

Peter Westerlund Over a year ago

But then I have to go through everything in the HTML code that can be changed and store everything separately?

Peter Westerlund Over a year ago

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.

user10221193 Over a year ago

maybe calling an onchange function on each method and passing the value and a name, then just save that data within an object.

user10221193 Over a year ago

I have edited my answer to give a rough idea of one possible way of doing it

Nicole Essex · Accepted Answer · 2019-01-26 06:45:59Z

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, 2019 at 6:45

answered Jan 26, 2019 at 6:40

Nicole Essex

12 bronze badges

1 Comment

Nicole Essex Over a year ago

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.

Collectives™ on Stack Overflow

Save changed HTML to a Javascript variable?

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related