Tag Archives: radio

Adding radio buttons to an Android app with Xamarin

June 24, 2016 admin

This tutorial explains how to add radio buttons to an Android app and make decisions based on which option the user selects. Radio buttons allow the user to select one item from a list of items. This is what an app screen with radio buttons looks like:

Step 1

To get started, create a new Android app solution in Xamarin and then open the Main.axml file (in the Resources > layout folder). Drag a Text (Medium) element and three RadioButton elements from the Toolbox on to the app screen. Change the Text values on each element from the Properties panel and make sure each radio button has a name (eg. radioButton1, radioButton2, radioButton3) after @+id/ in the Id field on the Properties panel.

Step 2

Add a Space element and another Text (Medium) element to your screen. Resize the Space element to make some space between the radio buttons and the Text (Medium) element. Give the Text (Medium) element a name eg @+id/resultTextView.

Step 3

Open the MainActivity.cs file and define the three radio buttons and the text view. Then add them to the OnCreate method, so they can be accessed by the code.

Step 4

Now add a click event for each radio button so that the app displays a message saying which option was selected.

Save your code and test the app. The example shown below is what you should see. However, the problem is that once you select an option it can’t be de-selected. Also, when using radio buttons you should only be able to select one option at a time but at the moment you can have more than one option selected at a time. We will fix this in the next section.

Step 5

Go back to the screen design and delete all three radio buttons. Replace these radio buttons with a RadioGroup from the toolbox. This RadioGroup element has the name @+id/radioGroup1 . You will notice that the RadioGroup provides you already with three radio buttons grouped together. A RadioGroup can have any amount of radio buttons in it, but only one can be selected at a time.

If you go to the Source view you can see that you can add more RadioButton elements to belong to the RadioGroup as long as you add them inside the RadioGroup tags.

Change the Text value on each RadioButton so they are different.

Step 6

Save the Main.axml file and go back to the MainActivity.cs file. The code needs to be changed so now it can access the RadioGroup element. A CheckChanged event is also added to detect when an option has been checked by the user. When this event fires, the option they selected is store in the option variable and the result is displayed to the user.

Now if you test your app, it should look like what you see below. You could now add if statements to check which radio button was selected and have another event occur.

PHP and MySQL, Video

Checking set values (radio buttons) in PHP

March 6, 2016 admin

This tutorial explains how to use radio buttons in forms and check set values in PHP to ensure that the user has entered data in the form. Watch the video below and then scroll down to see the sample code.

Sample PHP code:

Step 1: Create a PHP file (eg. form.php) which contains a form with radio buttons by copying the following code. This example will quiz the user on the capital city of Australia.

<html>
<head>
  <title>Form that checks set values</title>
</head>
<body>
  <form action="action_handler.php" method="POST">
    <p>What is the capital city of Australia?</p>
    <input type="radio" name="capital" value="Sydney"> Sydney<br>
    <input type="radio" name="capital" value="Canberra"> Canberra<br>
    <input type="radio" name="capital" value="Melbourne"> Melbourne
    <p><input type="submit"></p>
  </form>
</body>
</html>

Step 2: Create a separate PHP file called action_handler.php and copy the following code into it. This file will handle the form data.

<?php
  if(isset($_POST['capital'])){
    $capital = $_POST['capital'];
  }
  else{
    $capital = NULL;
  }

  if($capital != NULL){
    if($capital != "Canberra"){
      echo "$capital is incorrect";
    }
    else{
      echo "$capital is correct";
    }
  }
  else{
    echo "You must select an answer";
  }
?>

JavaScript, Video

Radio buttons and form validation

February 21, 2015 admin

Forms allow users to submit data in many different ways. A range of form input elements are available including text boxes, checkboxes, radio buttons, and submit buttons. This video tutorial explains how to use radio buttons in a form and also how to use JavaScript to handle the form and validate the data which the user has provided.

Form validation checks whether an option has been selected before the form is submitted. If no option has been selected, then an alert message will tell the user to select an option and the form will not submit the data until an option has been selected.

Watch the video below and then scroll down to see the sample code.

Here is the sample code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Radio buttons and form validation</title>
 <script type="text/javascript">
 
 // This file will use form validation for forms with radio buttons
 // Using 'name' in the radio buttons, puts these two radio button options in the same group (the same question)
 // Value is the text displayed next to the radio button that has been selected
 // ID identifies this element which can be used by Javascript code
 
 // The isChecked function checks to see if an option has been selected before continuing
 // .checked is a property of a radio button (that the radio button has been checked)
 
 function isChecked(){
 var checkedYes = document.getElementById('like').checked;
 var checkedNo = document.getElementById('dislike').checked;
 
 if(checkedYes == false && checkedNo == false){
 alert('You need to select an option!');
 return false;
 }
 else{
 return true;
 }
 }
 
 </script>
 
</head>
<body>
<form action="submission.html" method="get" onsubmit="return isChecked();">
 <p>Do you like coding?</p>
 Yes<input type="radio" name="coding" value ="Yes" id="like"/><br/>
 No<input type="radio" name="coding" value ="No" id="dislike"/><br/>
 <input type="submit" value="Submit"/>
</form>
 
</body>
</html>

Next tutorial: Checkboxes and form validation