CODEWITHSUNDEEP
javascripthtmlcssweb
stoney78us
stoney78us

Reputation: 305

Create a button/tag with built in cancel sign at the end

I'm trying to create a page that requires buttons/tags similar to following image using html: photo I'm not sure what these buttons are called. Ultimately I want to create them dynamically since what buttons need to be created are different from different users. Any suggestions are greatly appreciated. Thanks.

Upvotes: 1

Views: 456

Answers (3)

Jacques Mathieu
Jacques Mathieu

Reputation: 113

A solution to this in Angularjs would be to create a controller for your form that determines whether or not the browser is allowed to display your cancel button. This can be created using the following code:

  var app = angular.module('formExample', [])
  app.controller('ExampleController', ['$scope', function($scope) {
     $scope.canCancel = false;
     $scope.updateCancelVal = function(myForm) {
     $scope.canCancel = $scope.myForm.$valid;
     };
  }]);

And then in your html, it would look like:

 <div ng-controller="ExampleController">
    <form name="myFormName">
       Name: <input ng-keyup="updatCancelVal(myFormName)" type="text" ng-model="user.name" /><br>
       Email: <input ng-keyup="updatCancelVal(myFormName)" type="email" ng-model="user.email" /><br>
       <button ng-show="canCancel" href="myCancelLink.html"> Cancel </button>
    </form>
 </div>

Ultimately, this makes it so that the Cancel button is only shown when canCancel is true. And on each key input in each of the separate inputs, this value is updated until the form is valid. If you need more aid in implementing this, lmk and more detail will be added!

Upvotes: 0

Kunal Pradhan
Kunal Pradhan

Reputation: 522

You can implement such functionality using jQuery or core javascript.

You can use this jquery readymade plugin Demo - http://xoxco.com/projects/code/tagsinput/example.html

GitHub Link : https://github.com/xoxco/jQuery-Tags-Input

Upvotes: 2

Matus Mucka
Matus Mucka

Reputation: 100

These things are called Chips. If you are using angular, then you can look at the demo here.

Upvotes: 3

Related Questions