使用表单内容创建弹出窗口 window，然后在父页面中显示输出并发送到数据库

Question

我有一个 table 并且在它的列中我希望用户在单击此列内的按钮时弹出 window 出现具有复选框并且在用户选中复选框后它将出现作为同一列中的输出，它有一个按钮以及 post 所选复选框的这些值和数据库的用户名 (PHP)。我是初学者，希望有人能帮助我。

help.html代码：

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

这是我的 f.html 代码：

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

Answer 1

此代码段将弹出框。提交将提交所有内容。我不认为这是你想要的。我想会有更多的产品。

Select 打开弹出窗口
提交提交至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>

此代码段将弹出框。您可以使用 JS 获取复选框值，但我认为此时提交到 PHP 脚本会更好。但只有你知道这一点。我现在正在努力将所有内容提交给脚本。

Select 打开弹出窗口
提交关闭弹出窗口

    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>

Answer 2

使用 AngularJS 你会这样做：

使用 ajax 请求从服务器获取数据。在演示中，我使用了静态数据来降低复杂性。
创建 ng-repeat 以创建 table
将存储在数组中的选定数据添加到 table 单元格中。
通过向 table 单元格添加打开 bootstrap 模态的 ng-click 或将所选数据包装在按钮中，使列表可点击。
在模式中使用 ng-repeat 为您选择的产品创建一个表单。可以使用 array.indexOf(item) !== -1 来测试当前项目是否被单击，如果项目在数组中，则 returns 为真。
每次单击复选框都会更新产品数组。
单击“确定”按钮后，关闭模式并post 使用ajax 请求向服务器更新数据。（检查数据是否已更改会很好。）

你也可以在没有 AngularJS 的情况下做到这一点，但我认为你必须做更多的代码才能获得这种行为。

（我也是 javascript 和 AngularJS 的新手，所以代码并不完美，但它可以工作。）

可能有些地方可以改进，例如使用服务来执行 ajax 请求。

脚本中存在一个错误：取消点击没有按预期工作。即使单击取消，数据也会更改。您可以通过使用范围数据的副本来解决此问题，或者如果单击取消则恢复原始数据。

演示

请在下面找到演示（它在这里不起作用，因为似乎 bootstrap.ui 使用了 SO 不允许的 cookie）和这里的 jsFiddle。在 jsFiddle 检查它。好用。

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>

使用表单内容创建弹出窗口 window，然后在父页面中显示输出并发送到数据库

Creating popup window with form content and then show output in parent page and send to database

javascript

php

checkbox

html-table

popupwindow

演示