Скачать или смотреть How to Dynamically Change Form Fields Based on Radio Button Selection with URL Parameters

Learn how to show or hide form fields based on radio button selections and how to auto-select fields when specific URL parameters are present.
---
This video is based on the question https://stackoverflow.com/q/69337351/ asked by the user 'Shawn' ( https://stackoverflow.com/u/11653799/ ) and on the answer https://stackoverflow.com/a/69337902/ provided by the user 'Younes Bennour' ( https://stackoverflow.com/u/14248636/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: onclick radio button change form fields

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Introduction

In modern web forms, it's common to want different input fields to be shown based on user choices. For instance, you might have a set of radio buttons where selecting one option reveals different fields, or, in some cases, where an option should be automatically selected based on URL parameters. In this guide, we'll tackle a common problem: dynamically changing form fields based on radio button selection and URL parameters using JavaScript and jQuery.

The Problem

You have two radio buttons:

Field_One

Field_Two

When Field_One is selected, the form displays the fields for entering the first name and last name. Conversely, selecting Field_Two reveals a field for a reference ID. However, the challenge arises when a reference_id is included in the URL (like myurl.com?reference_id=12345). In this case, the expected behavior is that Field_Two should be auto-selected, and the reference ID should be displayed in the form. Instead, your form defaults to showing Field_One on load, which is not what you want.

The Solution

Let's dive into the solution with the proper HTML structure and the accompanying jQuery functionality that will make this dynamic behavior possible.

HTML Structure

Our HTML setup consists of two radio buttons and two separate divisions for the fields:

[[See Video to Reveal this Text or Code Snippet]]

jQuery Functionality

We will use jQuery to handle the radio button clicks and check for the presence of the reference_id in the URL:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Code

Radio Button Click Event: When a radio button is clicked, we check which one was selected:

If Field_One is clicked, it shows the fields related to the first and last name while hiding the reference ID field.

If Field_Two is clicked, it does the opposite.

URL Parameter Handling:

We use URL and searchParams to check for a reference_id in the URL.

If no reference_id is found, Field_One is displayed by default.

If a reference_id is present, Field_Two is shown instead, and its input field is populated with the reference ID from the URL.

Conclusion

By implementing this functionality, you create a more dynamic and user-friendly form. Users can easily switch between different input fields, and those who come from a link containing relevant parameters won't face any confusion as they'll see the appropriate fields populated.

Feel free to use and modify the above example in your projects to enhance the user experience of your forms!