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

【问题标题】：Creating popup window with form content and then show output in parent page and send to database使用表单内容创建弹出窗口，然后在父页面中显示输出并发送到数据库
【发布时间】：2015-06-30 16:37:40
【问题描述】：

我有一个表格，并且在它的列中，我希望用户单击此列内的按钮时会出现带有复选框的弹出窗口，并且在用户选中复选框后，它将显示为具有按钮的同一列中的输出以及将所选复选框和用户名的这些值发布到数据库（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>

【问题讨论】：

欢迎来到 Stack Overflow！这个问题的信息有点少。能分享一下你尝试过的，遇到了什么问题吗？
@Jay，我有两列的表格，第一列用于插入用户名，第二列有一个选择按钮，当用户点击选择按钮弹出窗口时，这个弹出窗口有复选框和提交按钮用户选择复选框然后单击提交按钮我希望这个选定的值再次出现在第二列的表中，而不是选择按钮以及将选定的值和用户名发布到数据库。感谢您的帮助。
用户会选择多少张支票？单击一个复选框时可以关闭弹出窗口吗？
选择复选框没有限制，用户可以选择多个。 @误解

标签： javascript php checkbox html-table popupwindow

【解决方案1】：

使用 AngularJS 你可以这样做：

通过 ajax 请求从服务器获取数据。在演示中，我使用静态数据来降低复杂性。
创建一个 ng-repeat 来创建表
将存储在数组中的选定数据添加到表格单元格中。
通过向表格单元格添加打开引导模式的 ng-click 或将所选数据包装在按钮中，使列表可点击。
在模式中使用 ng-repeat 创建一个包含您选择的产品的表单。可以使用array.indexOf(item) !== -1 测试当前项目是否被点击，如果该项目在数组中，则返回 true。
每次点击复选框都会更新产品数组。
单击确定按钮后，关闭模式并使用 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>

【讨论】：

非常感谢您的帮助，它看起来像我想要的，但是有一个小问题，所选产品应该显示在段落
中而不是在同一个按钮中。
这很容易解决，只需将表达式 {{( user.selectedProducts | array ) || 'nothing selected!' }} 从按钮移动到 p - 标签并为按钮添加标题。

【解决方案2】：

这个sn-p会弹出框。提交将提交所有内容。我不认为这是你想要的。我想会有更多的产品。

选择打开弹出窗口
提交提交到 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>

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

选择打开弹出窗口
提交关闭弹出窗口

    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>

【讨论】：

感谢您的帮助，但我需要选中的复选框代替按钮的选择，并将所选产品和用户名的值发布到数据库
选择按钮将被移除并出现选中的复选框值。