CODEWITHSUNDEEP
javascripthtml
Bruce
Bruce

Reputation: 3

Is there a good way to display collected data to the user in HTML or javascript and still keep the data?

I am trying to pick up some user data from a HTML page by having the user type it in. I want to retain the data, (they are ID numbers of sorts) display it back to the user on any subsequent section they go to (currently different href sections on one page), collect more data from them and eventually present the data to the user as a review. I thought this would be a little like HTML “Hello World”, but it’s proving to be more than that. . I found out that document.write() is the wrong way to go about it, but no good answer on how to accomplish this. Collecting this data is the first thing I need from the user, and then I will collect more data, so I have to be able to get data and let the user move around.

I have spent a day and a half on this site and others, pulled out two books (yes, paper!) looking for answers, but not reaching a usable solution. Nothing seems to work. When complete, I want to give the user a chance to correct the data before submitting, most likely to post at the moment, but would be a server if implemented.

Here’s how I am collecting, simplified as much as possible:

<form name="getNPIandTIN">
<p> Please enter NPI and TIN</p>
Provider NPI: <input type="number" name="Provider_NPI">
<p>
Provider TIN: <input type="number" name="Provider_TIN">
<input type="submit" value="Submit NPI and TIN">
</form>

...

<p id="demo"></p>

Inner HTML action
<script> document.getElementById"demo").innerHTML=
document.getNPIandTIN.Provider_NPI.value
</script>

No error messages; things just don't work. I want to ask the user to enter field 1, have them type it in, click for acceptance, store the data in a variable and echo the information back to them. Sounds pretty simple, but it isn't.

Upvotes: 0

Views: 1369

Answers (2)

JoSchMO
JoSchMO

Reputation: 56

The form is going to get in your way, you don't need it unless you want to post the data somewhere. Since you just want to grab the data directly from the input fields and store it yourself you can just do something like this:

<div>
  Provider NPI: <input type="number" id="providerNPI" name="Provider_NPI" value="">
  <br>
  Provider TIN: <input type="number" id="providerTIN" name="Provider_TIN" value="">
  <br>
  <button onclick="captureNumbers()">Submit NPI and TIN</button>
</div>

<p id="demo"></p>

<script>
  function displayNumbers() {
    // get the stored values and show them to the user
    var providerNPI = sessionStorage.getItem('providerNPI');
    var providerTIN = sessionStorage.getItem('providerTIN');
    document.getElementById("demo").innerHTML = "NPI: " + providerNPI + ", TIN: " + providerTIN;
  }

  function storeNumbers(numbersObject) {
    // store the values locally so you can access them wherever you need them
    sessionStorage.setItem('providerNPI', numbersObject.providerNPI);
    sessionStorage.setItem('providerTIN', numbersObject.providerTIN);
  }

  function captureNumbers() {
    // first get the values from the input fields as a javascript object so you don't have to pass a ton of individual variables
    var providerNumbers = {};
    providerNumbers.providerNPI = document.getElementById("providerNPI").value;
    providerNumbers.providerTIN = document.getElementById("providerTIN").value;

    // then pass the object variable to the storage function
    storeNumbers(providerNumbers);

    // then call the display function
    displayNumbers();
  }
</script>

Upvotes: 1

Toxi
Toxi

Reputation: 109

There are many different ways, you can use ajax to save all data to a database and show them to user when ever you want.

Or you could use localStorage to save the data temporarily and save them later in certain circumstances...

Upvotes: 0

Related Questions