Javascript 在“提交”按钮上向弹出窗口发送表单数据

我有一个只有一个选择框的表单，现在当用户点击提交按钮时，弹出窗口就会打开。但是我需要这个弹出窗口来包含表单中的值。我一直写到这里，但无法传递表单值。在线阅读此问题，但仍然没有帮助

任何建议都会有帮助

<form action="" method="post">
                        <select name="sme">
                        <option value="sometinf">Someting</option>
                        <option value="p">p</option>
                        </select>
                        <input onclick="javascript:popUp();" type="submit" class="btn btn-lg btn-border" value="Upgrade">
                        </form>

<script type="text/javascript">
    function popUp()
    {
        popupWindow = window.open('admin_upgrade_user.php','User','resizable=yes,scrollbars=yes,width=650,height=550');
        popupWindow.focus();
    }
    </script>

错误现已修复，但尚未完全修复

---

好的，我似乎能够得到这个值。但是，不会打开新的弹出窗口，它会显示当前弹出窗口中的值，什么会触发此操作？

您可以使用基本jquery执行此操作：-

<form action=""  method="post">
<select id="sme">
    <option value="sometinf">Someting</option>
    <option value="p">p</option>
</select>
<input onclick="popUp();" type="submit" class="btn btn-lg btn-border" value="Upgrade">
</form>

<script type="text/javascript">
function popUp()
{
    var value = document.getElementById('sme').value;
    //Now if you want to access the select field value in the new window url then write
    var popupWindow = window.open('admin_upgrade_user.php?value=' + value,'User','resizable=yes,scrollbars=yes,width=650,height=550');
    //else if you want to just access the value within the new popup window page they write
    var popupWindow = window.open('admin_upgrade_user.php','User','resizable=yes,scrollbars=yes,width=650,height=550');
    popupWindow.selectField=value;
    // Now, you can access the value as window.selectField within admin_upgrade_user.php page
    popupWindow.focus();
}
</script>

---

您可以通过查询参数将值传递到弹出窗口：

function popUp()
{
    var popupValue = document.querySelector('select[name=sme]').value;
    var popupWindow = window.open('admin_upgrade_user.php?value=' + popupValue,'User','resizable=yes,scrollbars=yes,width=650,height=550');
    popupWindow.focus();
}

---

在这种情况下，使用Get方法更容易，并且在url字符串中包含表单值

您还可以在提交时返回false来停止表单的提交，从而刷新页面

例如：

function popUp() {
    var sme = document.getElementById('sme'), opt;
    if (sme) {
        opt = sme.options[sme.selectedIndex].value;
        popupWindow = window.open('admin_upgrade_user.php?opt=' + opt,'User','resizable=yes,scrollbars=yes,width=650,height=550');
        popupWindow.focus();
        return false;
    }
    return false;
}

请参阅JSFIDLE上的此链接：

还有一些关于html的小改动

<form onsubmit="return popUp();">
    <select name="sme" id="sme">
        <option value="sometinf">Someting</option>
        <option value="p">p</option>
    </select>
    <input type="submit" class="btn btn-lg btn-border" value="Upgrade" />
</form>

---

使用jQuery方法serialize将表单元素编码为类似 myinput=minpuntvalue&MyInputWO=mysecondinputvalue

如果您以后想在字符串中添加更多表单元素，则不需要修改javascript函数弹出窗口来发送表单数据。如果在同一页上有不同的表单，建议为每个表单添加一个唯一的ID，并使用serialize this$'yourFormId'。serialize

---

查看此处：

可能重复：此操作正常。然而，我有一个疑问。我不能从弹出窗口打开另一个弹出窗口吗？表单本身在一个弹出窗口中打开，然后，当我们单击升级按钮时，另一个弹出窗口将打开$\u GET['opt']。它正确打开，但在同一弹出窗口中显示值。是的，这是因为您需要为弹出窗口指定不同的targetName，或为其指定“\u blank”目标。您可以在这里找到更多信息：除了focus，我在这里没有看到任何其他jQuery方法？

 function popUp() {
    var formData = $('form').serialize();
    var popupWindow = window.open('admin_upgrade_user.php?'+ formData +' ','User','resizable=yes,scrollbars=yes,width=650,height=550');
    popupWindow.focus();
    }