showing information on webpage 2 received via query parameters from webpage 1

Hello, I am trying to input text into a textarea and then send the data through a query string to another webpage. My goal is to display the data on the second webpage. I have written the following code, but it doesn't seem to be working. I've checked the console and the data is reaching webpage2, but it's not being displayed on the HTML page. Can someone please help me figure out what I'm doing wrong?

// Code to redirect to webpage 2 and send data in querystring after encoding

   location.href = "https://one.dummyjs.open.html?concern=" + encodeURIComponent($("#concern").val());

// Code to display data on webpage2

   var queryString = new Array();
    $(function () {
        if (queryString.length == 0) {
            if (window.location.search.split('?').length > 1) {
                var params = window.location.search.split('?')[1].split('&');
                for (var i = 0; i < params.length; i++) {
                    var key = params[i].split('=')[0];
                    var value = decodeURIComponent(params[i].split('=')[1]);
                    queryString[key] = value;
                }
            }
        }
        if (queryString["concern"] != null ) {
    
            var data = queryString["concern"];
            $("textarea#u_issue_description").val(data);
        
        }
    });
    
    $(p).html(data)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class= "main-container">
        <p></p>
    </div>

Answer №1

When you reach the second page, all you need is:

JQuery

    $(document).ready(function () {
        var queryString = new Array();
        $(function () {
            if (queryString.length == 0) {
                if (window.location.search.split('?').length > 1) {
                    var params = window.location.search.split('?')[1].split('&');
                    for (var i = 0; i < params.length; i++) {
                        var key = params[i].split('=')[0];
                        var value = decodeURIComponent(params[i].split('=')[1]);
                        queryString[key] = value;
                    }
                }
            }
            if (queryString["concern"] != null) {

                var data = queryString["concern"];
                //$("textarea#u_issue_description").val(data);
                $('#pTest').text(data);

            }
        });            
    });

HTML

<div class= "main-container">
        <p id="pTest"></p>
    </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to send data using AJAX in Laravel 5?

Hi there! I need some guidance on sending an ajax request within my page. I'm a bit lost with the process. Here's what I have so far: <script type="text/javascript"> $(document).ready(function(){ $.ajaxSetup({ hea ...

Changing the dimensions using jQuery's .resize() method

Can you activate a function using .resize(); only when the size reaches a specific width or height? Or is it possible to trigger the function only when the size increases? ...

Tips for resetting a bootstrap modal post form submission using jQuery

After completing an ajax request in my application, I am looking to reset the bootstrap modal. How can I ensure that the modal is reloaded fresh after it has been submitted previously? I have attempted using removeData() and .modal('dispose') me ...

The min-vh-50 class in Bootstrap CSS is not working as anticipated

I need to create two rows containing buttons in each row (10 buttons each). My goal is to center these two rows on the page while ensuring they are not too close together. To achieve this, I used the min-vh-50 class on both rows to align them in the upper ...

I'm looking to create a Triangle shape with CSS, any tips on how to achieve

Similar Question: Understanding the mystery behind this CSS triangle shape Please provide me with your valuable suggestions. ...

Ensuring the vue carousel component stops rendering once all of its data has been displayed

Is it possible to stop rendering a vue carousel component once its data is displayed or after a certain amount of time? I've searched for information on this, but haven't found anything relevant. Despite it being an unusual request, I still want ...

Having trouble getting Material-UI classes to work with external SVG icons?

I recently crafted a Material-UI persistent drawer that contains a list item component designed to alter the icon color upon user interaction. However, my styling adjustments only seem to apply to Material-UI icons and not external SVG ones. If you'r ...

Tool to identify your network location: Local domain and network status checker

Is there a way to determine if a user is accessing our site from within our local network or from the broader internet? For example, imagine someone scans a QR code at our restaurant that leads to a page designed to check whether they are connected locall ...

Utilizing form data to upload images and send them back to the front end within a React js application

I am working on a project using NestJS and React JS to create an image uploader. In React, I have the following setup: const props = { onChange({ file, fileList }: any) { const fd = new FormData(); fd.append('img& ...

What is the best way to transfer the array from my function and have it returned?

I've been struggling to successfully pass my array to an external function. Can anyone help me with this? You can find the code that I'm working on in jsbin: https://jsbin.com/kugesozawi/edit?js,console,output. The expected result should be passe ...

Error: The `Field` component encountered a failed prop type validation due to an invalid prop `component` after upgrading to MUI version

Encountered an error when migrating to Material ui v4 Failed prop type: Invalid prop component supplied to Field. in Field (created by TextField) This error points to the redux form field component export const TextField = props => ( <Field ...

Learning the process of accessing a JSON file from a different directory

I am faced with a straightforward folder structure, it looks like this: project │ └───data │ file.json │ └───js test.js My goal is to access the content of file.json within the test.js file in order to perform some ...

Displaying JSON data in HTML proves to be a challenge

I have collected JSON data and organized it into two arrays, then displayed it in JSON format. Now I'm trying to showcase this data in HTML using two loops by correlating the IDs of one array with the userIds of another array. {"personaldetails":[{"i ...

React JS makes it simple to create user-friendly cards that are optimized

I have a collection of objects that include a name and description. The name is short and consists of only a few characters, while the description can vary in length. I am looking to showcase this data within Cards in my React project, and have tried using ...

The Redux store has been modified, yet the changes are not reflected in the

In my Posts.js component, I am mapping every object in the posts array. Within this function, I attempt to filter all notes that have the same post_id as the id of the current mapped post object and store them in a variable called filteredNotes. I then pas ...

Implementing a Fixed Position for a Single Record in Extjs 4.2 Sortable Grid

Is there a way to allow users to sort by any column in a simple grid with sorting enabled, while ensuring that a specific record is always displayed at the last position (based on its ID)? I am working with ExtJS 4.2.2. ...

An issue with Nuxt.js causing body parameters to not be passed successfully while using this.$http.post

I've encountered an issue where using the @nuxt/http this.$http.post and this.$http.patch methods is causing problems with parsing body parameters during posting. Strangely, it used to work perfectly fine before, leaving me unsure of where to even beg ...

Is there a way to retrieve the line number of an error within a dynamically inserted <script> element?

When I dynamically create a script element and add it to the page, the errors do not give me the line numbers of the script itself, but instead provide the line number where I append the script. The following code in a .js file will result in an error mes ...

Error: Cannot execute 'x' as a function

I am currently developing an Express web application that initiates JavaScript scraping code upon the page's initial load. Below is the node web scraping code (scrape.js): const request = require('request-promise'); const cheerio = require( ...

Attempting to show an image in an Android app with the help of Worklight framework

I am currently developing an android application utilizing the worklight platform and am relatively new to html and javascript. I am attempting to showcase an image in the top row of a table within the app by implementing the following html code: <tr& ...