7

我有 2 个这样的 HTML 文件。

父.html

<form method='get' action=''>
    <input type='hidden' name='something'>
    <input type='button' name='submit' value='Submit' onclick='newwindow=window.open("child.html","popup","height=150,width=200");'>
</form>

child.html

Enter Something Here<br />
<input type='text' name='somethingelse'>
<input type='button' name='submit' value='OK'>

当用户单击parent中的Submit按钮时，将显示一个新的弹出窗口并要求他输入一些内容。

谁能告诉我如何将 input[somethingelse] 的值从 child转移到 input[something] 并在用户单击OK后在parent中提交表单？

4

2 回答 2

13

您可以通过 获取对父窗口中表单的引用window.opener.document，如下所示：

var form = window.opener.document.getElementById("theFormID");

（尽管有其他方法可以做到这一点，但您可以为表单提供一个 ID。）

然后您可以访问该表单中的字段，当然还可以设置它们的属性，然后您可以通过其功能.value提交表单。.submit()

但公平的警告：用户不喜欢弹出窗口。如果有任何方法可以将其他字段合并到表单中，我会建议您这样做。

这是一个完整的示例：Live Copy | 来源| 弹窗来源

主页面：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <form id="theForm" action="" method="GET">
    <input type="text" id="theField" name="theField">
    <br><input type="submit" value="Send" onclick="window.open('/urawum/1','','height=400,width=400'); return false;">
  </form>
</body>
</html>

弹出窗口：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <p>Please fill in more information:</p>
  <input type="text" id="thePopupField">
  <br><input type="button" value="Send Form" onclick="doTheSubmit();">
  <script>
    function doTheSubmit() {
      var doc = window.opener.document,
          theForm = doc.getElementById("theForm"),
          theField = doc.getElementById("theField");
      theField.value = document.getElementById("thePopupField").value;
      window.close();
      theForm.submit();
    }
  </script>
</body>
</html>

如果你运行它，你会发现当你点击Send主页时，它会弹出。如果您在弹出窗口中填写一个值并单击Send Form，则弹出窗口消失并提交表单。您可以告诉表单是使用该值提交的，因为我已经使用过method="GET"，因此您可以theField=yourValue在结果页面的 URL 中的查询字符串中看到。例如，如果您在弹出窗口中键入“我的值”，您将http://jsbin.com/abiviq/1?theField=my+value在表单提交后在主页中看到 URL。（但您的表单可能使用POST而不是GET，我只是GET用来演示。）

于 2013-04-30T12:44:44.867 回答
-1 
        $('#popupformid').submit(function() {

                var myVar = $('#somethingelseid').val();
                $('input:text.something').val(myVar);
                document.getElementById("formID").submit();
         });
于 2013-04-30T12:54:05.110 回答