Create Radio Button Toggle Switch with Bootstrap, jQuery & PHP

As we know that Radio buttons are used to limit the user to just make one selection from listed options. The radio buttons are used extensively in web projects but these are very old and not matched with look and feel when developing projects using Bootstrap. We can replace radio button with toggle switch radio to make it more beautiful and user friendly.

So in this tutorial you will learn how to create Radio button with Bootstrap and jQuery. We will also handle radio buttons form submits to server end to save selected values using PHP. The tutorial explained in very easy steps with live and link to download source code.

Also, read:

So let’s start the coding. We will have following file structure to create Radio Button Toggle Switch with Bootstrap, jQuery & PHP.

index.php
style.css
radio_toggle.js
save.php

Steps1: Create Form with Radio Button

First we will create For with radio button and submit button in index.php. We will also give action save.php to get form submitted POST values. We have used Boostrap btn-group to group element to create radio button.

<div class="row">		
		<form method="post" action="save.php">	
			<div class="form-group">
				<label for="gender" class="col-sm-4 col-md-4 control-label text-right">Gender: </label>
				<div class="col-sm-7 col-md-7">
					<div class="input-group">
						<div id="gender_radio" class="btn-group">
							<a class="btn btn-primary btn-sm active" data-toggle="gender" data-title="male">Male</a>
							<a class="btn btn-primary btn-sm noActive" data-toggle="gender" data-title="female">Female</a>
						</div>
						<input type="hidden" name="gender" id="gender" value="male">
					</div>
				</div>
			</div>			
			<div class="form-group">
				<label for="like" class="col-sm-4 col-md-4 control-label text-right">Are you like this ?</label>
				<div class="col-sm-7 col-md-7">
					<div class="input-group">
						<div id="like_radio" class="btn-group">
							<a class="btn btn-primary btn-sm active" data-toggle="like" data-title="y">YES</a>
							<a class="btn btn-primary btn-sm noActive" data-toggle="like" data-title="X">I don't know</a>
							<a class="btn btn-primary btn-sm noActive" data-toggle="like" data-title="N">NO</a>
						</div>
						<input type="hidden" name="like" id="like" value="y">						
					</div>					
					<button type="submit" class="btn btn-default" name="btn-save" id="btn-submit">
						 Submit
					</button> 					
				</div>				
			</div>				
		</form>
	</div>

Steps2: Create CSs For Radio Button
We will create CSS style.css file and create class noActive for display radio button as no selected.

.noActive{
    color: #3276b1;
    background-color: #fff;
}

Steps3: Handle Radio Button Toggle
Now in radio_toggle.js, we will handle functionality to toggle clicked radio button and set selected option value in form hidden in input.

$(document).ready(function(){
	$("#gender_radio a, #like_radio a").on('click', function(){
		var selected = $(this).data('title');
		var toggle = $(this).data('toggle');
		$('#'+toggle).prop('value', selected);		
		$('a[data-toggle="'+toggle+'"]').not('[data-title="'+selected+'"]').removeClass('active').addClass('noActive');
		$('a[data-toggle="'+toggle+'"][data-title="'+selected+'"]').removeClass('noActive').addClass('active');
	})
});

Steps4: Handle Form Submit POST Values
Now finally on form submit, you can handle form submitted POST values in save.php.

<?php print_r ($_POST); ?>

Latest Tutorials

Popular Tags