0

I'm very new to Javascript/JQuery and wanted to know how i can store the values of these Inputs:

<input type="number" id="rooms_amount_bedroom" autocomplete="off" value="0">
<input type="number" id="rooms_amount_bathrooms"autocomplete="off" value="0">
<input type="number" id="rooms_amount_kitchens" autocomplete="off" value="0">

inside this input <p> element:

<p class="chosen_service__room_types">""</p>

using pure Javascript. Thanks for the help!

Delroy Brown
  • 125
  • 1
  • 7
  • How do you get to the other page? submitting a form using some server language like PHP or just a link or a form using GET to load page2? – mplungjan May 10 '20 at 17:59
  • You need to persist this value somewhere : local storage, server side database, URL query parameter...before the page changes – Florian Motteau May 10 '20 at 18:02
  • Several ways mentioned [here](https://stackoverflow.com/questions/28230845/communication-between-tabs-or-windows) in addition you can use service workers to communicate between browser tabs – Makan May 10 '20 at 18:09
  • @mplungjan I just used the simple ```onClick="location.href='index.html'"``` to link to the other page – Delroy Brown May 10 '20 at 18:22

2 Answers2

1

You can add an Event Listener to the input and set its value in localStorage.

In case you want to update the storage every time the user inputs you can do this:

document.getElementById('rooms_amount_bedroom').addEventListener('input', function(){
     let val = this.value;
     localStorage.setItem('input',val)
})
<input type="number" id="rooms_amount_bedroom" autocomplete="off" value="0">

In case you want to update the storage once on a button click:

document.getElementById('btn').addEventListener('click', function(){
     let val = document.getElementById('rooms_amount_bedroom').value;
     localStorage.setItem('input',val)
})
<input type="number" id="rooms_amount_bedroom" autocomplete="off" value="0">
<button id="btn">Update</button>

Then, on the other page, you can set the stored value to the paragraph's content on load as follows:

window.onload = function(){
     document.getElementsByClassName('chosen_service__room_types')[0].innerHTML = localStorage.getItem('input');
}
<p class="chosen_service__room_types"></p>
Majed Badawi
  • 27,616
  • 4
  • 25
  • 48
1

Example 1. Using a link

page 1

Change WhateverItIsYouArClicking to #link if what you are clicking has id="link" or ".someClass" if what you are clicking has class="someClass"

window.addEventListener("load",function() {
  document.querySelector("WhateverItIsYouArClicking").addEventListener("click",function(e) {
    e.preventDefault(); // if it is a link or a submit button
    const fields = [...document.querySelectorAll("input[type=number]")].map(fld => fld.id+"="+fld.value);
    location = "index.html?"+fields.join("&");
  })
})

Page 2 

window.addEventListener("load",function() {
  const url = new URL(location.href);
  document.querySelector(".rooms_amount_bedroom").textContent = url.searchParams.get("rooms_amount_bedroom");
  document.querySelector(".rooms_amount_bathrooms").textContent = url.searchParams.get("rooms_amount_bathrooms");
  document.querySelector(".rooms_amount_kitchens").textContent = url.searchParams.get("rooms_amount_kitchens");
})

Example 2 using a form

<form action="index.html">
  <input type="number" id="rooms_amount_bedroom" autocomplete="off" value="0">
  <input type="number" id="rooms_amount_bathrooms"autocomplete="off" value="0">
  <input type="number" id="rooms_amount_kitchens" autocomplete="off" value="0">
  <input type="submit" />
</form>

and on page 2 have the same as above

mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • Thanks! this works perfect. Is it possible to do this for multiple separate values? – Delroy Brown May 10 '20 at 18:39
  • Sure. Update the question with relevant HTML - if you have a form, just use the searchParams to get each field value – mplungjan May 10 '20 at 18:41
  • Thanks again, I've updated the question with the input values i'd like to have appear with in the ```

    ``` element.

     – Delroy Brown May 10 '20 at 18:47
  • I've also noticed that this takes me straight to the next page once the next button is clicked. Is there anyway to store the new value and then see it on the desired page, without going straight to that page? – Delroy Brown May 10 '20 at 18:57