如何从一种HTML表单获取“ make”价值？

Question

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?

Answer 1

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.