What is the best way to transfer the selected values from a Radio Button to a different page once they have been verified for accuracy?

I need help with a questionnaire that involves JavaScript. I want to gather the results from radio buttons marked True or False, and display them on another page. The questions are included in a form.

CODE:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styling/style.css">
    <title>1</title>
</head>

<body>
    <script>

        function sendclick() {
            var answers = [document.forms["questionarre"]["clickRule"].value,
                document.forms["questionarre"]["404error"].value,
                document.forms["questionarre"]["colour"].value,
                document.forms["questionarre"]["H2Tag"].value,
                document.forms["questionarre"]["SiteMap"].value,
                document.forms["questionarre"]["heading"].value,
                document.forms["questionarre"]["alttag"].value,
                document.forms["questionarre"]["UseAgain"].value];
            var count = 0
            for (var i = 0; i<answers.length; i++) {
                if (answers[i] == "") {
                    var temp = i+1;
                    alert("Please complete question "+temp);
                    break;
                }
                count++;
            }

            if (count == answers.length) { 
                var correct = [document.getElementById("correct1").checked,
                document.getElementById("correct2").checked,
                document.getElementById("correct3").checked,
                document.getElementById("correct4").checked,
                document.getElementById("correct5").checked,
                document.getElementById("correct6").checked];
                //window.open("YourResults.html", "_self")  
            }
        }
    /*
        for (var i = 0; i<x.length; i++) {
                if (x[i] == "") {
                    var temp = i+1;
                    //  alert("results"+x)//window.open("results"+x);
                    break;}
            }

        }function - sendClick end

        function opener() {
            var text = document.getElementById('correct7').value;
            var target = {
            non text content : alert("correct")
            };
            if (text in targetNames) {
                window.open(targetNames[text]);  
            }
        }

            document.getElementById('name').addEventListener('keyup', opener, false);
*/
    </script>

    <div id="questionarre_bg">
    <form name="questionarre" action=""  method="post">
        <div id="Question1">
            <p class="thicker">How many clicks do developers use to keep the user close to information? </p>
            <input type="radio" name="clickRule" value=1>1<br>
            <input type="radio" name="clickRule" value=4>4
            <input type="radio" name="clickRule" id="correct1" value=3>3<br>
            <input type="radio" name="clickRule" value=6>6
        </div>

        <div id="Question2">
            <p class="thicker">How are developers using the 404 Error Page, for keep the users happy?</p>
            <input type="radio" name="404error"  id="correct2" value="Including links">Including links<br>
            <input type="radio" name="404error" value="displaying a video">displaying a video<br>
            <input type="radio" name="404error" value="playing music">playing music<br>
        </div>

        <div id="Question3">
            <p class="thicker">Should you rely on colour alone in a website build?</p>
            <input type="radio" name="colour" value="Yes">Yes<br>
            <input type="radio" name="colour" id="correct3" value="No">No
        </div>

        <div id="Question4">
            <p class="thicker">A H2 Tag is useful for?</p>
            <input type="radio" name="H2Tag" id="correct4" value="The disabled autoreaders">The disabled autoreaders<br>
            <input type="radio" name="H2Tag" value="Pretty webpages">Pretty webpages<br> 

        </div>


        <div id="Question5">
            <p class="thicker" >What is correct name given to page of the websites pages?</p>
            <input type="radio" name="SiteMap" value="Tube Map">Tube Map
            <input type="radio" name="SiteMap" id="correct5" value="Site Map">Site Map <br>
            <input type="radio" name="SiteMap" value="Map">Map
            <input type="radio" name="SiteMap" value="Page List">Page List
        </div>

        <div id="Question6">
            <p class="thicker">A webpage heading should do what?</p>
            <input type="radio" name="heading" id="correct6" value="Tell the user about the content in a few words">Tell the user about the content in a few words<br>
            <input type="radio" name="heading" value="include meaningless text">include meaningless text<br>
            <input type="radio" name="heading" value="Be short">Be short<br>
        </div>

        <div id="Question7">
            <p class="thicker">The Alt tag is used for what....</p>
            <input type="text" name="alttag" id="correct7" ><br><!--ANSWER__non text content--> 
        </div>

        <div id="Question8">
            <p class="thicker">Would you use this website again for information?</p>
            <input type="radio" name="UseAgain" value="Yes">Yes<br>
            <input type="radio" name="UseAgain" value="No">No<br>
            <textarea rows="4" cols="50"></textarea>
        </div>
        </form>

        <button onclick="sendclick()">send</button>


        </div>
    </div>

</body>
</html>

Answer №1

If you want to save the answer using local storage, you can follow these steps:

// Save the answer on page 1
// The variable answers holds all the radio results and can be retrieved using jQuery or any other method of your choice

localStorage.setItem("answers", answers);

// Retrieve the answer on page 2
document.getElementById("answer1").innerHTML = localStorage.getItem("answers")[0];

To learn more about local storage, check out: http://www.w3schools.com/html/html5_webstorage.asp

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

Tooltip positioned within a custom container using Material UI

Currently, as part of my Chrome extension development utilizing React and Material UI, I am implementing an inject page strategy. I have managed to set up a tooltip for the Fab button, but unfortunately, it appears outside the DOM of my extension. Upon ins ...

Issue with Flowtype not properly refreshing when maximizing or minimizing

There is a strange behavior with my Flowtype plugin. When I load the page without maximizing the screen, the font size remains the same even after maximizing the screen. However, if I then restore the window to its original size, the font size adjusts as ...

Guidelines on launching an ionic 4 modal using routes

How can I open a modal using routes? I attempted the following approach, but it did not work as expected: ngOnInit() { this.launchModal(); } async launchModal() { const modal = await this.modalController.create({ component: AuthPasswordR ...

put two elements next to each other in a single row

This specific section contains an image positioned at the top, followed by two other components (within <ItemsContainer/>) at the bottom which display as separate rows. I am trying to place these two items (a grid and a chart) side by side within the ...

Develop a new entity utilizing Array in Javascript

let DaysArray: any = ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"] I am looking to transform the above array into an Object structure as shown below: let DaysObject: any = { time: { headerName: "" }, m ...

ReactJS - troubleshooting webcam video stream issue

I can't figure out why this code is not working properly. I am able to access the camera stream and see the light on my camera indicating that it's working, but the stream doesn't seem to be attaching correctly. class VideoOutput extends ...

Can someone shed light on why this error keeps popping up repeatedly every few minutes?

I've implemented the nodemon npm package to automatically restart my node application when file changes are detected in the directory. The server is built using express and http npm packages. However, I encountered an issue where if the server remains ...

Navigating the DOM to locate a particular element: Tips and techniques

I'm struggling to recall how to access the data attribute on an anchor tag when clicking a button that's not inside the tags container. Can someone help me understand how I can achieve this? For example, if I click on .js-watchlist-add, I want to ...

How can I run a TypeScript function within a JavaScript file?

I am working with a typescript file named file1.ts export function Hello(str: string) { console.log(str); } In addition, I have another file called index.js { require('./some.js'); } Furthermore, there is a script defined in the pack ...

"An error has occurred due to an Array Index being out of

This program flows smoothly until it reaches the second loop where it displays user input. At that point, an error message appears in the command prompt: (Exception in thread "main" java.lang.ArrayIndexOutOfBoundsException: 5 at CaseStudy2A.main(CaseStud ...

AG-GRID-ANGULAR - Is there a way to automatically check or uncheck a checkbox in the header component based on the status of checkboxes in the cell renderers?

Currently, I am using ag-grid for my project. In one of the columns, I have a checkbox in the header using headerComponentFramework and checkboxes in the corresponding cells using cellRendererFramework. My goal is to automatically check or uncheck the hea ...

conceal the .card-body element if the children have the CSS property "display:none"

My challenge involves managing two collapsible cards on a webpage. I am looking for a solution where the .card-body will have its display set to none when there are no inner divs to show in the card upon clicking a letter in the pagination. Otherwise, the ...

Utilizing Angular's dynamic property names within a nested ng-repeat loop

Is there a way to dynamically add generated names in nested ng-repeat loops? For example: <div ng-repeat="x in JSONfile"> <div ng-repeat="i in x.name"> <span><a ng-href="{{i.link}}">{{i.name}}</a></span& ...

Built-in validator in Bootstrap 4 - Error messageText

I used Bootstrap 4 to create a basic form and decided to utilize the built-in validator in BS4. For the email field, I implemented the following code: <label for="email">E-mail cím:</label><br> <input type="email" name="email" class ...

Create a function that will output an array containing a selection of hexadecimal colors

I'm trying to figure out how to generate arrays of hexadecimal colors. If you have any insights, please let me know. function createHexColorArray(n){ let arr = []; let hashtag = '#'; let semicolon = ','; let r = Math.floor(Math.ra ...

The MUI Select event is coming back as undefined

I am facing an issue with a Select component in my MUI form. Here is my current state: const [formdata, setformdata] = useState({}); This is my event handler: const onchangehandle = (e) => { setformdata((prevState) => ({ ...prevState, [e.target. ...

Having trouble getting my Jquery Ajax post request to work with JSON data

I am working on syncing data from my Phonegap app back to the server. I have a PHP script set up on the server to handle the incoming data and now I need to figure out how to post values from my App to this script. Currently, I store my data in a SQLite d ...

Tips for successfully sending arrays of strings to a different function in C

I've encountered some difficulty in transferring the randomly generated strings from one function to another. I specifically aim to pass the strings created by the inputAccounts() function to the viewAllRecords() function. These strings, produced by ...

Guide on making API calls in AngularJS using query strings

I am new to learning about AngularJS and recently came across a helpful article on connecting to an API and using its data in our app. The article specifically focuses on displaying weather information with AngularJS. The only downside is that the weather ...

Enhanced functionality in MUI TablePagination now allows users to easily select their desired page

I've implemented MUI TablePagination to enable pagination in my table. The code is performing well, offering most of the features I need: Users can choose between displaying 5, 10, or 20 entries per page using a dropdown. The number of pages displaye ...