Navigating to a specific page based on the selected option is the key to efficient web browsing

Question

Navigating to a specific page based on the selected option is the key to efficient web browsing

I'm currently working on a form development project and I'm looking for guidance on how to navigate to different pages based on the selection made in a radio button. Here's the current form setup with two radio buttons:

.sh_k .sh_sl {
    background-color: #edf7f8;
    color: #282828;
    font-size: 14px;
    margin-bottom: 20px;
    padding: 20px;
}

.sh_k .sh_sn {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

... (CSS code continues)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
... (HTML and CSS code continues)

I am aiming to achieve the following:

If the "Elaboration" option is selected, the form should redirect to elaboration.html. If "Revision" is selected, then the form should redirect to revision.html upon clicking the "Next" button.

I would greatly appreciate any guidance or assistance on how to implement this functionality in the form.

javascript html css radio-button

Answer 1

Answer №1

To implement this method, I suggest storing the URI in the radio button's value attribute and then accessing it using an event listener.

<!-- HTML -->
<form id="form">
    <div>
        <label for="dnaelaboracion">
            <div id="elaboracion-radio">
                <input name="dna" id="dnaelaboracion" type="radio" value="page1.html">
            </div>
            <span>Elaboration</span>
        </label>
    </div>
    <div>
        <label for="dnarevision">
            <div id="revision-radio">
                <input name="dna" id="dnarevision" type="radio" value="page2.html">
            </div>
            <span>Revision</span>
        </label>
    </div>
    <button id="submit" type="submit">Next</button>
</form>

<!-- JS -->
<script>
    const button = document.getElementById("submit");
    button.addEventListener("click", function(event) {
    event.preventDefault();
    window.location.href = document.querySelector('input[name="dna"]:checked').value;
});
</script>

If you prefer not to use the value attribute, you can also save the URI in a data attribute.

Answer 2

To implement this method, I suggest storing the URI in the radio button's value attribute and then accessing it using an event listener.

<!-- HTML -->
<form id="form">
    <div>
        <label for="dnaelaboracion">
            <div id="elaboracion-radio">
                <input name="dna" id="dnaelaboracion" type="radio" value="page1.html">
            </div>
            <span>Elaboration</span>
        </label>
    </div>
    <div>
        <label for="dnarevision">
            <div id="revision-radio">
                <input name="dna" id="dnarevision" type="radio" value="page2.html">
            </div>
            <span>Revision</span>
        </label>
    </div>
    <button id="submit" type="submit">Next</button>
</form>

<!-- JS -->
<script>
    const button = document.getElementById("submit");
    button.addEventListener("click", function(event) {
    event.preventDefault();
    window.location.href = document.querySelector('input[name="dna"]:checked').value;
});
</script>

If you prefer not to use the value attribute, you can also save the URI in a data attribute.

Navigating to a specific page based on the selected option is the key to efficient web browsing

Answer №1

Similar questions

Integrating force refresh functionality into a React application

Retrieve information stored in a component's data variable

"Assure that setTimeout will be executed within the then method in

Error messages in HTML5 are notifications that are triggered when

What is the best way to align the right column section below the left column section on a reduced screen size in a responsive design?

Why am I unable to insert data into the 'sessions' database using connect-mongo?

Issue encountered while trying to utilize the reset function of the FormGroup with the angular2-tinymce plugin

Equal-sized tiles in Highchart treemaps

Unable to retrieve variable using the require statement

Ways to confirm the presence of strings within an array?

Managing account activation errors in django: A step-by-step guide

Incorporating Javascript into HTML

Using jQuery to hide an element when the script is invoked

Issue: Attempting to write data after reaching the end in Node.js while using

Retrieve information from the API prior to rendering the controller components

Tips for using the arrow keys to navigate the cursor/caret within an input field

How are these background images able to remain in a fixed position like this?

Warning message in React about missing floating prop in components

Issue encountered with sortable table in list.js

What is the proper method for removing the object from the system?