Saving user input as a local variable to be utilized on a different web page

Question

Saving user input as a local variable to be utilized on a different web page

I am attempting to capture a user input from a form and then utilize that variable on a separate page. This process should be straightforward, but I am not receiving any results and I am unsure of the reason why.

Here is the code on the first page:

<div class="container-fluid d-flex justify-content-center" id="mySearchBar">

        <div class="row d-flex justify-content-center ">


            <h3 class="heading text-center pt-5">Search the Title Below and Find The Site It's Hosted On!</h3>

            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search this blog" id="searchbar" name="searchbar ">
               <script> localStorage.setItem('loan', document.getElementById("searchbar").value );</script>
                <div class="input-group-append">
                    <button class="btn btn-secondary" id='searchButton' type="submit">
                    <i class="fa fa-search"></i>
                  </button>
                </div>

            </div>

Next, on the second page, I have the following:

<script>
           var loan = localStorage.getItem('searchbar');
           console.log(loan);
           </script>

Any assistance would be greatly appreciated!

javascript forms bootstrap-4

Answer 1

Answer №1

To retrieve a value entered by the user, it is essential to do so after they input the value. An event listener should be used to fetch and retain the value. For your specific scenario, it would be most effective to enclose your inputs within a <form> tag and monitor the form submission. This approach enables capturing the click of the submit button and/or the pressing of the enter key on the input field.

Given that you are utilizing Bootstrap-4, it is assumed that you have jQuery imported.

<form class="container-fluid d-flex justify-content-center" id="mySearchBar">
  <div class="row d-flex justify-content-center ">
    <h3 class="heading text-center pt-5">Search the Title Below and Find The Site It's Hosted On!</h3>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search this blog" id="searchbar" name="searchbar">
      <div class="input-group-append">
        <button class="btn btn-secondary" id='searchButton' type="submit">
          <i class="fa fa-search"></i>
        </button>
      </div>
    </div>
  </div>
</form>

<script>
  // utilize a constant key string on both pages
  const searchbar_local_storage_key = 'my_unique_key_for_searchbar_value'

  // for the page where the stored value needs to be fetched
  $(document).ready(function() {
    let stored_value = localStorage.getItem(searchbar_local_storage_key)
    console.log('searchbar localStorage value at document.ready:')
    console.log(stored_value)
  })

  // for the page where the value needs to be stored/updated
  $(document).ready(function() {
    let $searchbar = $('#searchbar')
    console.log('searchbar input value at document.ready:')
    console.log($searchbar.val())

    $('#mySearchBar').on('submit', function(event) {
      console.log('searchbar form submitted')
      // prevent form submission if necessary
      event.preventDefault()
      
      // retrieve the current value
      let term = $searchbar.val()
      console.log('searchbar input value at form.submit:')
      console.log($searchbar.val())

      // store values
      localStorage.setItem(searchbar_local_storage_key, $searchbar.val());
      console.log('new searchbar value in localStorage:')
      console.log(localStorage.getItem(searchbar_local_storage_key))

    })
  })
  
</script>

Observe the demonstration here https://jsfiddle.net/chan_omega/qt510oms/
Enter a value, submit, review the output in the console, then refresh the page (to mimic a different page). You will notice the identical value loaded from localStorage.

Answer 2

To retrieve a value entered by the user, it is essential to do so after they input the value. An event listener should be used to fetch and retain the value. For your specific scenario, it would be most effective to enclose your inputs within a <form> tag and monitor the form submission. This approach enables capturing the click of the submit button and/or the pressing of the enter key on the input field.

Given that you are utilizing Bootstrap-4, it is assumed that you have jQuery imported.

<form class="container-fluid d-flex justify-content-center" id="mySearchBar">
  <div class="row d-flex justify-content-center ">
    <h3 class="heading text-center pt-5">Search the Title Below and Find The Site It's Hosted On!</h3>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search this blog" id="searchbar" name="searchbar">
      <div class="input-group-append">
        <button class="btn btn-secondary" id='searchButton' type="submit">
          <i class="fa fa-search"></i>
        </button>
      </div>
    </div>
  </div>
</form>

<script>
  // utilize a constant key string on both pages
  const searchbar_local_storage_key = 'my_unique_key_for_searchbar_value'

  // for the page where the stored value needs to be fetched
  $(document).ready(function() {
    let stored_value = localStorage.getItem(searchbar_local_storage_key)
    console.log('searchbar localStorage value at document.ready:')
    console.log(stored_value)
  })

  // for the page where the value needs to be stored/updated
  $(document).ready(function() {
    let $searchbar = $('#searchbar')
    console.log('searchbar input value at document.ready:')
    console.log($searchbar.val())

    $('#mySearchBar').on('submit', function(event) {
      console.log('searchbar form submitted')
      // prevent form submission if necessary
      event.preventDefault()
      
      // retrieve the current value
      let term = $searchbar.val()
      console.log('searchbar input value at form.submit:')
      console.log($searchbar.val())

      // store values
      localStorage.setItem(searchbar_local_storage_key, $searchbar.val());
      console.log('new searchbar value in localStorage:')
      console.log(localStorage.getItem(searchbar_local_storage_key))

    })
  })
  
</script>

Observe the demonstration here https://jsfiddle.net/chan_omega/qt510oms/
Enter a value, submit, review the output in the console, then refresh the page (to mimic a different page). You will notice the identical value loaded from localStorage.

Saving user input as a local variable to be utilized on a different web page

Answer №1

Similar questions

Choose an image and save the selection information for the following page (Tarot card)

Encountering the error message "Uncaught Error: [vuex] Getters must be functions, but 'getters.getters' is {}. This occurred while splitting the Vuex store into modules in Vue.js."

Unleashing the power of TypeScript with Solid JS Abstract Class

Full-screen modal fade not functioning properly

Error: Disappearing textarea textContent in HTML/TS occurs when creating a new textarea or clicking a button

Having trouble getting event modifiers to work in Vue when added programmatically

Node.js application experiences a delay when calling Mongoose Model.save()

Python-JavaScript Integration Problem

Breadcrumb navigation that is determined by data hierarchies and relationships between parent and child items

Shuffling images in JavaScript using z-index for a dynamic deck effect

stepper vue with previous and next buttons

Is it feasible to decrease the lateral margins of Bootstrap's container without the need for custom CSS? If so, what is the method?

Update the JavaScript and CSS files following an AJAX request with $.get

Securing string parameters in Django templates for JavaScript function usage

Is it the same item in one situation, but a completely different item in another?

Error message: "No elements were found in Ember.js jQuery cycle slideshow"

Tips for preventing the ng-click event of a table row from being triggered when you specifically want to activate the ng-click event of a checkbox

Combining NodeJS with Javascript for wrangler bundling: A guide

A step-by-step guide on utilizing the reduce function to calculate the overall count of a user's GitHub repositories

Display an HTML tag with JavaScript