Creating Popup Window With Form Content And Then Show Output In Parent Page And Send To Database

I have a table and in of it's column I want user when click on button that is inside this column pop up window appear which have checkboxes and after user checked checkbox it will

Solution 1:

With AngularJS you would do it like this:

• Get the data from server with an ajax request. In the demo I've used static data to reduce complexity.
• Create a ng-repeat to create the table
• Add the selected data that is stored in an array into the table cell.
• Make the list clickable by adding ng-click that opens a bootstrap modal to the table cell or wrap the selected data in a button.
• In the modal create a form with ng-repeat with your selected products. Testing if the current item is clicked can be done with array.indexOf(item) !== -1 that returns true if the item is in the array.
• With every click to the checkboxes update the product array.
• After OK button click, close modal and post the updated data to the server with an ajax request. (A check if the data have changed would be good.)

You could also do it with-out AngularJS but I think there you would have to do a lot more code to get that behaviour.

(I'm also pretty new to javascript and AngularJS, so the code is not perfect, but it works.)

There are probably somethings that could be improved e.g. work with services to do the ajax requests.

There is one bug in the script: The cancel click is not working as expected. The data will be changed even with cancel click. You can fix this by working with a copy of the scope data or restore the original data if cancel is clicked.

DEMO

Please find the demo below (it is not working here because it seems that bootstrap.ui uses cookies that are not allowed at SO) and here at jsFiddle. Check it at jsFiddle. There it works.

var app = angular.module('myApp', ['ui.bootstrap']);

app.controller('mainController', function($scope, $modal, $log) {
    $scope.products = ['coffee', 'beer', 'wine', 'tea', 'milk'];

    // userData will be later from server with $http.get('/phpscript').success(...)// just dummy userData here because no backend available    
    $scope.userData = [
        {
            name: 'John Doe',
            selectedProducts: [
                'coffee',
                'beer',
                'wine']
        },
        {
            name: 'Jane Doe',
            selectedProducts: [
                'coffee',
                'tea']
        }
    ];
    
    $scope.changeProducts = function(userData) {
        //$scope.items = ['item1', 'item2', 'item3'];var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
            controller: 'ModalInstanceCtrl',
            
            //size: size,resolve: {
                user: function() {
                    return userData;
                },
                selectedProducts: function() {
                    return userData.selectedProducts;
                },
                products: function () {
                    //console.log($scope.selectedProducts);return $scope.products; // get all available products
                }
            }
        });
        
        modalInstance.result.then(function (selectedItems) {
            //products = selectedItems;
        }, function () {
            $log.info('Modal dismissed at: ' + newDate());
        });
    };
});

app.controller('ModalInstanceCtrl', function ($scope, $http, $modalInstance, products, selectedProducts, user) {

  //console.log('user', user);
  $scope.products = products;
    
  $scope.selected = selectedProducts;

  $scope.chkChange = function(item) {
      console.log(item);
      var index  = $scope.selected.indexOf(item);
      if (index > -1) {
          $scope.selected.splice(index, 1);
      }
      else {
          // not selected --> we have to add it
          $scope.selected.push(item);
      }
      console.log($scope.selected);
  };
  //console.log(selectedProducts);
  $scope.ok = function () {
      // prepare everything for sending to sever// --> probably check here if the data have changed or not (not implemented yet)console.log('new selection', $scope.selected);
      var data = $.param({
            json: JSON.stringify({
                user: user.name,
                products: $scope.selected
            })
        });
      
      $http.post('/echo/json/', data)
          .success(function(data, status) {
              console.log('posted the following data:', data);
          });
      
      $modalInstance.close();//); $scope.selected.item);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});

//custom filter to display the selected products.
app.filter('array', function() {
    returnfunction(input) {
        //console.log(input);return input.join(', ');
    };
});

body {
    padding: 5px;
}

<scriptsrc="https://code.jquery.com/jquery-1.11.2.min.js"></script><scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script><scriptsrc="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script><linkhref="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /><divng-app="myApp"><divng-controller="mainController"><scripttype="text/ng-template"id="myModalContent.html"><!-- template for modal --><divclass="modal-header"><h3class="modal-title">Choose your products!</h3></div><divclass="modal-body"><form><divclass="checkbox"ng-repeat="item in products"><label><inputtype="checkbox"ng-click="chkChange(item)"ng-checked="selected.indexOf(item) !== -1"/>
                            {{item}}
                        </label></div></form></div><divclass="modal-footer"><buttonclass="btn btn-primary"ng-click="ok()">OK</button><buttonclass="btn btn-warning"ng-click="cancel()">Cancel</button></div></script><tableclass="table"><tr><th>User name</th><th>products selected</th></tr><trng-repeat="user in userData"><td>{{user.name}}</td><td><buttonng-click="changeProducts(user)">{{( user.selectedProducts | array ) || 'nothing selected!' }}</button></td></tr></table></div></div>

Solution 2:

This snippet will pop up the box. And the submit will submit everything. I do not think this is what you want. I am guess there will be more products.

Select opens popup Submit submits to product.php

functionopenPopup(){
          var pop = document.getElementById('pop').style.display='block';  
        }    

#pop{
      font:4001em Arial,sans-serif;
      width:20em;
      display:none;  
      position:absolute;
      top:0;left:0;
      background:#ff0;
      color:#000;
      height:8em;
      z-index:10;
    }
    #frm{width:100%;}

<FORMid="frm"action="product.php"method="post"><div><divid="pop"><INPUTTYPE="checkbox" >Cell phone</br><INPUTTYPE="checkbox" >TV</br><INPUTTYPE="checkbox" >Book</br><INPUTTYPE="submit"VALUE="Submit"></div></div><tableborder="1"><tr><th> user name </th><th>product selected</th></tr><tr><td><inputtype="text"/></td><td><buttontype="button"onclick="openPopup()">Select</button></td></tr></table></form>

This snippet will pop up the box. you could get the check box values with JS but I think it would be better to submit to a PHP script at this point. but only you know this. I am now working on submitting everything to a script.

Select opens popup Submit closes popup

functionopenPopup(){
      var pop = document.getElementById('pop').style.display='block';  
    }    
    functionclosePopup(){
      var pop = document.getElementById('pop').style.display='none';  
    }

#pop{
  font:4001em Arial,sans-serif;
  width:20em;
  display:none;  
  position:absolute;
  top:0;left:0;
  background:#ff0;
  color:#000;
  height:8em;
  z-index:10;
}
#frm{width:100%;}

<divid="pop"><FORMid="frm"NAME="popupForm"><div><INPUTTYPE="checkbox" >Cell phone</br><INPUTTYPE="checkbox" >TV</br><INPUTTYPE="checkbox" >Book</br><INPUTTYPE="BUTTON"VALUE="Submit"onclick="closePopup()"></div></FORM></div><tableborder="1"><tr><th> user name </th><th>product selected</th></tr><tr><td><inputtype="text"/></td><td><buttononclick="openPopup()">select</button></td>