Jump to content

Creating Custom Toggle Buttons


Recommended Posts

Hi All,

I have a page where people can enter the name of food, like you would order in a restaurant (would appear on the menu).

They can set if the food is gluten free, nut free, vegan etc.

I am wanting to use buttons that can be clicked going red if they are not gluten free or not vegetarian and green if they are vegan or vegetarian.

I have working code that does this but i dont feel like i am being efficient with how i am writing it as it is turning into a lot of repeated code.

I would appreciate some help pointing me in the right direction.

function popManageMenuModal($conn, $miid){
	$stmt = $conn -> prepare('
	                        	SELECT menu_item_name, menu_item_is_vegan, menu_item_is_vegitarian, 
	                        	menu_item_is_gf, menu_item_is_nf, menu_item_is_df 
	                        	FROM ssm_menu_items
	                        	WHERE menu_item_id = ?
	$stmt -> bind_param('i', $miid);
	$stmt -> execute();
	$stmt -> bind_result($miname, $miisvegan, $miisveg, $miisgf, $miisnf, $miisdf);
	$stmt -> fetch();

	if($miisvegan == '1'){
		$vegansel = 'btn-success';
		$vegan = 'Vegan';
		$veganop = 'Is';
		$vegansel = 'btn-danger';
		$vegan = 'Vegan';
		$veganop = 'Not';
	if($miisveg == '1'){
		$vegsel = 'btn-success';
		$vegi = 'Vegi';
		$vegop = 'Is';
		$vegsel = 'btn-danger';
		$vegi = 'Vegi';
		$vegop = 'Not';

	$output = "";
	$output .= "<form><div class='form-group'><label>Menu Item Name</label><textarea class='form-control'>$miname</textarea></div>";
	$output .= "<div class='form-inline'>";

	$output .= "<div class='drButton btn $vegansel' data-value='$miisvegan'>{$veganop} {$vegan}</div>";
	$output .= "<div class='drButton btn $vegsel' data-value='$miisveg'>{$vegop} {$vegi}</div>";

	$output .= "<div>$miisvegan, $miisveg, $miisgf, $miisnf, $miisdf</div>";
	$output .= "</form>";

	return $output;
$(document).on('click','.drButton', function(){
	var polarity = $(this).data("value")
	if(polarity == '0'){
		$(this).data("value", '1')
	if (polarity == '1'){
		$(this).data("value", '0')


Link to comment
Share on other sites

46 minutes ago, Barand said:

When you find you have a lot of repetition of similar code, consider the use of an array and iteration.

This sorted me out

	$a = array('Vegan'=>$miisvegan, 'Vegitarian' => $miisveg, 'Gluten Free' => $miisgf, 'Nut Free' => $miisnf, 'Dairy Free' => $miisdf);

	foreach ($a as $type => $value) {
		if($value == '0'){
			$polarity = 'btn-danger';
		if($value == '1'){
			$polarity = 'btn-success';
		$output .= "<div class='m-1 col drButton btn {$polarity}' data-value='$value'>$type</div>";


Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.