Creating popup window with form content and then s

2019-08-06 12:42发布

站内问答 / JavaScript
1235 2 4

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 be appear as output in same column which were have a button as well as post these values of selected checkboxes and user name to database (PHP). I'm a beginner and i wish anyone help me.

help.html code :

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
myPopup = '';

function openPopup(url) {
myPopup = window.open(url,'popupWindow','width=640,height=480');
if (!myPopup.opener)
     myPopup.opener = self;
}
</SCRIPT>
</script>
</head>
<body>
<table border="1">
<tr>
<th> user name </th>
<th>product selected</th>
</tr>
<tr>
<td> <input type="text"/></td>
<td> <button onclick="openPopup('f.html')">select</button></td>
</body>
</html>

And this my f.html code:

<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM NAME="popupForm">
<INPUT TYPE="checkbox" >Cell phone</br>
<INPUT TYPE="checkbox" >TV</br>
<INPUT TYPE="checkbox" >Book</br>
<INPUT TYPE="BUTTON" VALUE="Submit">
</FORM>
</BODY>

2条回答
唯我独甜
2楼-- · 2019-08-06 12:53

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: ' + new Date());
        });
    };
});

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() {
    return function(input) {
        //console.log(input);
        return input.join(', ');
    };
});
body {
    padding: 5px;
}
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div ng-app="myApp">
<div ng-controller="mainController">
    <script type="text/ng-template" id="myModalContent.html">
        <!-- template for modal -->
            <div class="modal-header">
                <h3 class="modal-title">Choose your products!</h3>
            </div>
            <div class="modal-body">
                <form>
                    <div class="checkbox" ng-repeat="item in products">
                        <label> 
                            <input type="checkbox" ng-click="chkChange(item)" ng-checked="selected.indexOf(item) !== -1"/>
                            {{item}}
                        </label>
                    </div>    
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="ok()">OK</button>
                <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
            </div>
        </script>
    
    <table class="table">
        <tr>
            <th>User name</th>
            <th>products selected</th>
        </tr>
        <tr ng-repeat="user in userData">
            <td>{{user.name}}</td>
            <td><button ng-click="changeProducts(user)">{{( user.selectedProducts | array ) || 'nothing selected!' }}</button></td>
        </tr> 
    </table>
</div>
</div>

查看更多
0人赞 添加讨论(0) 举报
男人必须洒脱
3楼-- · 2019-08-06 13:07

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

        function openPopup(){
          var pop = document.getElementById('pop').style.display='block';  
        }    
    #pop{
      font:400 1em 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%;}
<FORM id="frm" action="product.php" method="post"><div>
<div id="pop">
<INPUT TYPE="checkbox" >Cell phone</br>
<INPUT TYPE="checkbox" >TV</br>
<INPUT TYPE="checkbox" >Book</br>
<INPUT TYPE="submit" VALUE="Submit">
</div>
</div>
<table border="1">
<tr><th> user name </th><th>product selected</th></tr>  
<tr><td> <input type="text"/></td>
<td> <button type="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

    function openPopup(){
      var pop = document.getElementById('pop').style.display='block';  
    }    
    function closePopup(){
      var pop = document.getElementById('pop').style.display='none';  
    }
#pop{
  font:400 1em 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%;}
    <div id="pop">
    <FORM id="frm" NAME="popupForm"><div>
    <INPUT TYPE="checkbox" >Cell phone</br>
    <INPUT TYPE="checkbox" >TV</br>
    <INPUT TYPE="checkbox" >Book</br>
    <INPUT TYPE="BUTTON" VALUE="Submit"onclick="closePopup()">
    </div></FORM>
    </div>
    <table border="1">
    <tr>
    <th> user name </th>
    <th>product selected</th>
    </tr>
    <tr>
    <td> <input type="text"/></td>
    <td> <button onclick="openPopup()">select</button></td>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)