Jump to content

Creating Custom Toggle Buttons


Adamhumbug

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';
	}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
	}
});

 

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. Please don't revive it unless you have something important to add.

Join the conversation

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

Guest
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.