Question

我有2个像这样的HTML文件。

parent.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'>

当用户点击父中的提交按钮时，会出现一个新的弹出窗口并要求他输入内容。

任何人都可以告诉我如何从中输入输入[somethingelse]的值孩子输入[something]并在用户点击确定后在父中提交表单？

Answer 1

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

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

（您可以为表单提供ID，但还有其他方法可以执行此操作。）

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

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

以下是一个完整的示例：Live Copy | Source | Source of popup

主页：

<!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。（但是您的表单可能使用POST而不是GET，我只是使用GET进行演示。）

Answer 2

        $('#popupformid').submit(function() {

                var myVar = $('#somethingelseid').val();
                $('input:text.something').val(myVar);
                document.getElementById("formID").submit();
         });

从弹出窗口在父窗口中提交表单？

2 个答案: