Creating Custom Toggle Buttons

[Adamhumbug]

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';
	}else{
		$vegansel = 'btn-danger';
		$vegan = 'Vegan';
		$veganop = 'Not';
	}
	if($miisveg == '1'){
		$vegsel = 'btn-success';
		$vegi = 'Vegi';
		$vegop = 'Is';
	}else{
		$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).addClass("btn-success")
		$(this).removeClass("btn-danger")
		$(this).data("value", '1')
		return
	}
	if (polarity == '1'){
		$(this).addClass("btn-danger")
		$(this).removeClass("btn-success")
		$(this).data("value", '0')
		return
	}
});

 

[Barand]

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

[Adamhumbug]

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>";
	}