Making Choices Fun: Pass two values from a radio button when clicked

In the exciting world of web development, making interactions smooth is key. This guide dives into the fun part, that is, pass two values from a radio button when clicked With easy techniques and friendly steps, you’ll pick up the know-how to spice up user engagement and handle dynamic content effortlessly.

Introduction

You might go through a situation where you need to pass more than 1 value using radio buttons. We can pass multiple values with a radio button and can fetch them in PHP with a simple trick. In this article, we will see how to pass two values from a radio button when clicked.

Understanding the Fun: Pass two values from a radio button

Imagine radio buttons as choices in a game. Sometimes, you need more than just one piece of information when a choice is made. This could be like knowing not only the chosen option but also its special code or identifier. Learning how to do this adds a cool twist to your web apps, making them more interesting and responsive.

We need to use a different prefix with a unique separator for example “,” or underscore “_” or colon “:”  to separate data from a string. For example, if you want to pass 2 values Mango and Fruit then we can either do it as “Mango, Fruit”, “Mango_Fruit” or “Mango:Fruit”. In this article, we have taken an example of a comma-separated option. Please note that you can use any separator of your choice, however it should be unique. We can use the separator to pass two values from a radio button on form submission.

Prerequisites

Before diving into the code, make sure you have a basic understanding of HTML, CSS, and JavaScript. Ensure you have a text editor like Visual Studio Code or Sublime Text installed for a seamless coding experience.

Now, let’s write some code.

Setting Up the HTML Structure

Let’s start by creating the HTML structure. Open your preferred code editor such as Visual Studio Code or Sublime Text and create a new HTML file say index.html. At first, we need to define the radio element, which is the HTML’s form element.

We will use a set of values comma-separated with a comma. For example, in the following HTML form, we have created the fields to pass two values from a radio button:

<input type="radio" name="option" value="Mango, Fruit" id="option1" /> 
<label for="option1">Mango</label> <br>

<input type="radio" name="option" value="Onion, Vegetable" id="option2" /> 
<label for="option2">Onion</label> <br> 

<input type="radio" name="option" value="Mango, Fruit" id="option3" /> 
<label for="option3">Mango</label> <br> 

<input type="radio" name="option" value="Onion, Vegetable" id="option4" /> 
<label for="option4">Onion</label> <br> 

<input type="radio" name="option" value="Mango, Fruit" id="option5" /> 
<label for="option5">Mango</label> <br>

<input type="radio" name="option" value="Onion, Vegetable" id="option6" />
<label for="option6">Onion</label> <br> 

Here, we have used “,” as a separator. You can structure the form as per your template.

The PHP logic to process the values

The form submission will pass two values from a radio button to the PHP’s backend processing. We need to write the backend logic to get the values from the selected radio button.

The first step is to convert the value into an array. We will use explode() function.

The explode() function is used to convert a string into an array. It uses a separator which is a mandatory parameter of this function. In our case, that separator is a comma.

<?php
	// split into comma separate array
	$option = explode(",", $_POST['option']);
	
	// get value at first index
	$option_value = $option[0];

	// get value at second index
	$option_type = $option[1];
?>

and that’s it!

So when you select “Mango”, you will get “Mango” in $option_value and “Fruit” in $option_type.

You can see that we were able to pass two values from a radio button. You can pass as many values as you want. These values can be fetched from the indexes of an array.

Best Tips for a Smooth Ride

1. Keep It Simple: Stick to easy names for your radio buttons and their special notes. Simplicity makes your code easy to understand.
2. Make It Accessible: Ensure everyone can play around with it! Use clear labels for your radio buttons so everyone, including those who may need a little extra help, can understand.
3. No Stress without JavaScript: What if someone can’t play with JavaScript? No problem! Develop your code so that it still works well even if JavaScript isn’t around.

Conclusion

In the end, making choices with radio buttons can be fun and easy. This guide has shown you some simple tricks on how to Pass two values from a radio button when clicked, to add an extra layer of excitement to your web apps. As you try these out, you’ll become a pro at giving users cool choices and handling their picks with style. Enjoy making your web applications more interactive and playful with the knowledge gained from this guide!