1

I'm having an issue sharing a value between my HTML forms. I'm a beginner so this is probably a very easy fix.

Newvehicle.html:

<div class="input-group">
    <input class="form-control" id="inputMake" type="text" placeholder="Make..." style="width: 150px;"/>
</div>

Item1.html:

<label>Make: </label><li onclick="getMake()"></li></br>

Newvehicle.js:

function getMake(){
    var make = document.getElementById("inputMake").value;
}

I would like the value inputted into the text field on Newvehicle.html to display as a list item on Item1.html. Can someone please advise?

Mulan
  • 129,518
  • 31
  • 228
  • 259
Danny O'Sullivan
  • 121
  • 7
  • Just to clarify - Newvehicle.html and Item1.html are both inside separate browser windows? – obscure Feb 21 '19 at 16:43
  • 1
    If you need to pass variables to another html file you need to either use localstorage, cookies, or pass the variable as a url fragment. More info here: https://stackoverflow.com/questions/23213788/how-to-pass-variable-value-between-different-html-pages-in-javascript – cb64 Feb 21 '19 at 17:12
  • 1
    Possible duplicate of [How to pass variable value between different html pages in javascript](https://stackoverflow.com/questions/23213788/how-to-pass-variable-value-between-different-html-pages-in-javascript) – Heretic Monkey Feb 21 '19 at 17:29

1 Answers1

2

What you could do is, to save the value in localStorage and retrive it in the secound file.

A possible HTML solution would be:

Newvehicle.html:

<div class="input-group">
   <input class="form-control" id="inputMake" type="text" placeholder="Make..." style="width: 150px;" onkeyup="localStorage.value1 = this.value" />
</div>

Item1.html:

<label>Make: </label><li id='entry_1'></li></br>
<script type="text/javascript">
            document.getElementById('entry_1').innerHTML = localStorage.value1;
</script>

Newvehicle.js:

not required for that, but nice to have the whole logic in a seperate JS file

Explanation:

the onkeyup event fires up each time the usert releases a key on the keyboard, so with each firing we create/replace the value1 in localStorage.

right after the list element will a javasript code be executed that reads the value from localStorage in your case value1 and replaces the innerHTML.

keep in mid that this only works if you work on the same domain.Localstorage keeps the data until you clear the localstorage whit localStorage.clear()

alternatively you can use sessionStorage instead of localStorage tho keep the data only for one browsing session.

See: Webstorage on W3C Schools

Keep on going and soon you will master the Javasript language.

Stan
  • 131
  • 1
  • 5
  • Thanks Stan, this code works great for what I asked for. Unfortunately, my web app was connected to a working Firebase database - when I clicked the submit button, it used to add this information to this database but having altered it, it no longer does. Do you know why this code may have caused this? I could always ask Stack Overflow again and provide code if needs be. – Danny O'Sullivan Feb 21 '19 at 21:56
  • @DannyO'Sullivan i gues there are some issues with the logic. If you would provide me more code, i could help for sure. Or provide me a link to your app. – Stan Feb 22 '19 at 07:59
  • Think I got it working Stan, very very grateful for your help! – Danny O'Sullivan Feb 27 '19 at 16:27